https://www.toutiao.com/article/7182092875222827581
一、官网介绍
Print.js 主要是为了帮助我们直接在应用程序中打印 PDF 文件,无需离开界面,也不使用嵌入。对于用户不需要打开或下载 PDF 文件,而只需要打印它们的独特情况。
例如,当用户请求打印在服务器端生成的报表时,这很有用的一种情况。这些报告以 PDF 文件的形式发回。在打印这些文件之前,无需打开它们。Print.js提供了一种在我们的应用程序中打印这些文件的快速方法。
官网地址:
https://printjs.crabbly.com/
二、安装使用
使用 npm 进行安装
npm install print-js --save
引用
import printJS from 'print-js'
三、项目示例
vue文件
<template>
<div id="app">
<div id="divPrint" class="mainbox print">
<!-- <div style="font-size: 25px; margin-top: 80px" align="center">
整改通知单
</div> -->
<div align="center" style="margin: 0; padding: 0; width: 100%">
<table>
<tr style="border: none">
<td colspan="2">工程项目:xx</td>
<td style="text-align: right; padding-left: 10px;" colspan="2">编号:xx</td>
</tr>
<tr style="border: none">
<td colspan="2">整改单位:xx</td>
<td style="text-align: right; padding-left: 10px;" colspan="2">编号:xx</td>
</tr>
<tr style="border: none">
<td colspan="2">整改内容:xx</td>
<td style="text-align: right; padding-left: 10px;" colspan="2">编号:xx</td>
</tr>
</table>
</div>
</div>
<div style="margin-top: 20px; text-align: center">
<button @click="print()">pdf打印</button>
</div>
</div>
</template>
<script>
import printJS from "print-js";
export default {
name: "printing",
data() {
return {};
},
methods: {
print() {
printJS({
printable: "divPrint", // 标签元素id
type: "html", // 打印类型
header: "整改通知单", // '表单名称',
targetStyles: ["*"],
style: "@page {margin:0 10mm};", // 可选-打印时去掉眉页眉尾
ignoreElements: ["no-print"], // 接受打印父 html 元素时应忽略的 html id 数组。
properties: null,
});
},
},
};
</script>
<style lang="scss">
#app {
width: 100%;
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
.mainbox {
width: 100%;
margin: 0 auto;
}
}
</style>
点击打印按钮后,出现PDF预览。
pdf文件打印预览
最后再点击打印即可实现PDF文件打印。
文档更新时间: 2023-03-26 16:44 作者:admin