vue打印pdf设置成a3(printpdf怎么打印)

生活常识 2023-04-16 17:35生活常识www.baidianfengw.cn

如何打印pdf文件 vue项目使用Print.js插件实现PDF文件打印

一、官网介绍

Print.js 主要是为了帮助我们直接在应用程序中打印 PDF 文件,无需离开界面,也不使用嵌入。对于用户不需要打开或下载 PDF 文件,而只需要打印它们的独特情况。例如,当用户请求打印在服务器端生成的报表时,这很有用的一种情况。这些报告以 PDF 文件的形式发回。在打印这些文件之前,无需打开它们。Print.js提供了一种在我们的应用程序中打印这些文件的快速 。

官网地址https://printjs.crabbly.com/

二、安装使用

使用 npm 进行安装

npm install print-js --save

引用

import print from #39print-js#39

三、项目示例

vue文件

lttemplategt ltdiv id=#34app#34gt ltdiv id=#34divPrint#34 class=#34mainbox print#34gt lt!-- ltdiv style=#34font-size: 25px margin-top: 80px#34 align=#34center#34gt 整改通知单 lt/divgt --gt ltdiv align=#34center#34 style=#34margin: 0 padding: 0 width: 100%#34gt lttablegt lttr style=#34border: none#34gt lttd colspan=#342#34gt工程项目xxlt/tdgt lttd style=#34text-align: right padding-left: 10px#34 colspan=#342#34gt编号xxlt/tdgt lt/trgt lttr style=#34border: none#34gt lttd colspan=#342#34gt整改单位xxlt/tdgt lttd style=#34text-align: right padding-left: 10px#34 colspan=#342#34gt编号xxlt/tdgt lt/trgt lttr style=#34border: none#34gt lttd colspan=#342#34gt整改内容xxlt/tdgt lttd style=#34text-align: right padding-left: 10px#34 colspan=#342#34gt编号xxlt/tdgt lt/trgt lt/tablegt lt/divgt lt/divgt ltdiv style=#34margin-top: 20px text-align: center#34gt ltbutton @click=#34print()#34gtpdf打印lt/buttongt lt/divgt lt/divgtlt/templategtltscriptgtimport print from #34print-js#34export default { name: #34printing#34, data() { return {} }, methods: { print() { print ({ printable: #34divPrint#34, // 标签元素id type: #34html#34, // 打印类型 header: #34整改通知单#34, // #39表单名称#39, targetStyles: [#34#34], style: #34@page {margin:0 10mm}#34, // 可选-打印时去掉眉页眉尾 ignoreElements: [#34no-print#34], // 接受打印父 html 元素时应忽略的 html id 数组。 properties: null, }) }, },}lt/scriptgtltstyle lang=#34scss#34gt#app { width: 100% font-family: #34Avenir#34, Helvetica, Arial, sans-serif -webkit-font- oothing: antialiased -moz-osx-font- oothing: grayscale text-align: center color: #2c3e50 .mainbox { width: 100% margin: 0 auto }}lt/stylegt

点击打印按钮后,出现PDF预览。

pdf文件打印预览

再点击打印即可实现PDF文件打印。

printpdf怎么打印 vue打印pdf和xml

Copyright@2015-2025 白癜风网版板所有