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

后台的打印功能

作者: 付出的前端路 | 来源:发表于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演示地址

相关文章

  • 后台打印功能

    业务要求 选择某一条订单,点击打印按钮,弹出一个框显示需要打印出来的内容,底部存在两个按钮,取消(关闭弹框)打印(...

  • 后台的打印功能

    通常做法: 调用window.print()来启动打印功能。 常见问题点击打印,回到之前的界面,功能都失效,只能浏...

  • JS调用浏览器的打印功能

    最近做一个后台管理系统,其中有个用户需求要求调用浏览器打印的功能去打印订单,本来以为需要用户手动(Ctrl+P)、...

  • iOS 11 无法定位问题:This app has attem

    iPhone 升级到iOS 11后发现的定位功能不可用,通过调试发现异常,系统后台打印: This app has...

  • 打印机共享出现0x000006ba错误的解决方法

    用共享打印机打印时出现这种情况:操作无法完成(0x000006ba)。本地后台打印程序服务没有运行。请重新启动后台...

  • uv打印机打印光油实用吗

    uv打印机不是很实用的功能是什么呢?那就是近1年很火的uv打印机打印光油的功能。为什么说uv打印机打印光油的功能不...

  • iOS 打印 AirPrint无线打印

    主要功能:使用iPhone、PC连接同一个WiFi,iPhone 上App有打印功能,点击打印,实现打印文档功能。...

  • excel中实用的打印技巧,看一次就会了

    本文介绍了一些基本打印技巧、分页打印、每页打印标题行、打印背景图片、打印页码等功能。这些功能基本涵盖了日常打印需求...

  • 2018-04-08 python中创建一个名片管理系统

    1:打印功能 2:判断用户输入 3:执行用户功能 代码如下 1. 打印功能提示 print("="50)print...

  • 后台产品设计要点

    最近做了一系列功能,有些是新功能自己做新后台,有些是新功能复用旧的后台,有些是优化旧功能同时优化旧后台。在使用和修...

网友评论

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

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