我爱编程

后台的打印功能

2018-04-16  本文已影响0人  付出的前端路

通常做法: 调用window.print()来启动打印功能。

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
    }

常见问题
点击打印,回到之前的界面,功能都失效,只能浏览,鼠标点击事件都失效了怎么办?
解决方法:
1.再次刷新页面

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

2.用插件print.js打印 ---是一个比较完善的解决方案
原生的window.print打印会附带你的样式,而用插件print.js打印则需要另外设置来添加样式;

// npm install print-js --save
// import Print from 'print-js'
// 调用print.js插件
        Print({
          printable: 'printJS-form',
          type: 'html',
          // 继承原来的所有样式
          targetStyles: ['*']
        })

参考:print.js的项目地址
Demo演示地址

上一篇 下一篇

猜你喜欢

热点阅读