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

原创已于 2022-02-21 19:07:27 修改 · 2.8k 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #vue.js

于 2022-02-21 19:05:16 首次发布

本文介绍了如何在前端项目中使用print-js插件来实现在Vue.js应用中进行打印功能，包括导出PDF。步骤包括安装插件、引用、设置打印内容ID，以及详细说明了打印函数的配置，如printable、type、properties等参数的使用，以实现自定义打印样式和忽略某些元素的功能。

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，使其不打印。非常好用