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

emo王子

已于 2022-02-21 19:07:27 修改

阅读量2.7k

点赞数 1

文章标签：前端 javascript vue.js

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

本文链接：https://blog.youkuaiyun.com/aaaaaaaa_ewf/article/details/123053479

版权

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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