前端实现打印功能可导出PDF

1、首先需要安装 print-js 插件

npm install print-js --save

2、在需要用的组件中引用

import print from 'print-js'

 3、在需要打印内容的地方设置id

4、 定义一个函数 点击打印时触发此函数

<Button loading={this.confirmLoading} onClick={this.ok}>打印凭证</Button>

5、函数具体实现

const ok = () => {
      confirmLoading.value = true;   //loading 效果开启
      print({
        printable: "printVoucherDetail",  //指定打印区域
        type: "html",  //type:可以是 html 、pdf、 json 等
        targetStyles: ["*"],   // 这样设置继承了页面要打印元素原有的css属性
           //传入自定义样式的字符串，使用在要打印的html页面 也就是纸上的样子。
        style: "@page{size:auto;margin:1cm 1cm 0cm 1cm;}@media print{font-size: 28px;}",
      })
        //设置定时器5秒后关闭loading
      setTimeout(() => { 
        confirmLoading.value = false
      }, 5000)
    }

print其他设置属性

printable:要打印的id。

type:可以是 html 、pdf、 json 等。

properties:是打印json时所需要的数据属性。

gridHeaderStyle和gridStyle都是打印json时可选的样式。

repeatTableHeader:在打印JSON数据时使用。设置为时false，数据表标题将仅在第一页显示。

scanStyles:设置为false时，库将不处理应用于正在打印的html的样式。使用css参数时很有用。

targetStyles: [’*’],这样设置继承了页面要打印元素原有的css属性。

style:传入自定义样式的字符串，使用在要打印的html页面 也就是纸上的样子。

ignoreElements：传入要打印的div中的子元素id，使其不打印。非常好用