【Vue】如何在vue项目中调用打印机，打印指定区域

Z时代
2024-01-10
分类：技术分享

想打印下面内容（红框内）：

代码如下：

【Vue】如何在vue项目中调用打印机，打印指定区域

此方法结果如图：

【Vue】如何在vue项目中调用打印机，打印指定区域
打印功能出来了，但是没有对应的要的内容，
各位大神有啥更好的方法，或者可以在我原有代码的情况下改进可以提出。
btw，解决问题了，不点一手赞，都是白嫖~~

回答

常用方法

doPrint () {
     // 1.设置要打印的区域 div的className
      var newstr = document.getElementsByClassName('printOrder-data')[0].innerHTML
      // 2. 复制给body，并执行window.print打印功能
      document.body.innerHTML = newstr
      // 3. 还原：将旧的页面储存起来，当打印完成后返给给页面。
      var oldstr = document.body.innerHTML
      window.print()
      document.body.innerHTML = oldstr
      return false    }

你可能会遇到的问题--点击打印，回到之前的界面，功能都失效，只能浏览，鼠标点击事件都失效了怎么办？
对于用window.print(),打印完之后，页面不能操作的问题。
解决方法：

doPrintVue () {
      var newstr = document.getElementsByClassName('printOrder-data')[0].innerHTML
      document.body.innerHTML = newstr
      window.print()
      // 重新加载页面，以刷新数据
      window.location.reload()}

【Vue】如何在vue项目中调用打印机，打印指定区域