前端实现打印功能Print.js

前端实现打印的方式有很多种，本人恰好经历了几个项目都涉及到了前端打印，目前较为推荐Print.js来实现前端打印

话不多说，直接上教程

官方链接: Print.js官网

1. 在项目中如何下载Print.js

   使用npm下载：npm install print-js --save
   使用yarn下载： yarn add print-js

2. 在项目中如何引入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模版的时候引入
1
2
3
4
5
6
7
8
9

3. print.js的参数配置（常用）

4. 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: () => {
     //打印弹窗关闭后的回调方法
    }
  });
1
2
3
4
5
6
7
8
9
10
11
12
13

5. 注意事项

//如需使用自身页面的样式
 	targetStyles: ['*'],
	font_size: '',
//这两个参数必须同时存在
1
2
3
4