美文网首页我爱编程
后台的打印功能

后台的打印功能

作者: 付出的前端路 | 来源:发表于2018-04-16 15:48 被阅读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演示地址

    相关文章

      网友评论

        本文标题:后台的打印功能

        本文链接:https://www.haomeiwen.com/subject/xuncfftx.html