【Vue】使用print.js插件实现打印预览功能，超简单

目录

一、实现效果

 二、实现步骤

【1】安装插件

【2】在需要打印的页面导入

【3】在vue文件中需要打印的部分外层套一层div，给div设置id。作为打印的区域

【4】在打印按钮上添加打印事件

【5】在methods中添加点击事件

三、完整代码

---

一、实现效果

 

 二、实现步骤

print.js插件，可以打印html、pdf、json数据等。

官网：https://printjs.crabbly.com/

【1】安装插件

npm install print-js --save

【2】在需要打印的页面导入

import print from 'print-js'

【3】在vue文件中需要打印的部分外层套一层div，给div设置id。作为打印的区域

【4】在打印按钮上添加打印事件

    打印

【5】在methods中添加点击事件

必要的就是printable和bype

methods: {
    printBox() {
      setTimeout(function () {
        print({
          printable: 'printBox',
          type: 'html',
          scanStyles: false,
          targetStyles: ['*']
        })
      }, 500)
    },
}

三、完整代码