前端实现打印的方式有很多种，本人恰好经历了几个项目都涉及到了前端打印，目前较为推荐Print.js来实现前端打印
话不多说，直接上教程
官方链接: Print.js官网
-
在项目中如何下载Print.js
使用npm下载：npm install print-js --save
使用yarn下载： yarn add print-js -
在项目中如何引入print.js
// 第一种 通过import的方式引入
import print from 'print-js'
// 第二种 通过CDN
https://printjs-4de6.kxcdn.com/print.min.js
https://printjs-4de6.kxcdn.com/print.min.css的方式引入
<script src="print.js"></script>
<link rel="stylesheet" type="text/css" href="print.css"> //使用Print.js模版的时候引入
- print.js的参数配置（常用）
| 参数 | 描述 |
|---|---|
| printable | （默认null）pdf或图像的url，html元素的id或json数据的对象 |
| type | 打印的类型（默认pdf） pdf, html, image, json and raw-html. |
| css | 打印的css，可以是单个URL的字符串，也可以是多个URL的数组 |
| style | 格式为一个字符串，该字符串应该应用于正在打印的html样式 |
| targetStyles | 打印的样式数值，如需采用自身页面的样式 [‘*’] |
| onPrintDialogClose | 关闭浏览器打印对话框后执行的回调方法 |
| font_size | 参数适用于html/json,默认12pt |
- Print.js如何使用
import printJS from 'print-js';
const style = `@page {margin:0mm 0mm 0mm 0mm;}`; //设置打印页面的样式
printJS({
printable: idName, // 标签元素id
type: 'html',
header: '',
targetStyles: ['*'],
style: style,
font_size: '',
onPrintDialogClose: () => {
//打印弹窗关闭后的回调方法
}
});
- 注意事项
//如需使用自身页面的样式
targetStyles: ['*'],
font_size: '',
//这两个参数必须同时存在
