前端实现打印功能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模版的时候引入

3. 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

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: () => {
     //打印弹窗关闭后的回调方法
    }
  });

5. 注意事项

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