一.安装及引入print.js
1.安装
npm install print-js --save //or yarn add print-js
2.在需要使用的文件引入
import printjs from 'print-js'
二.介绍
print.js有四种打印类型：'pdf'、'html'、'image'、'json'。
它的基本用法是调用printjs()并传入参数
//pdf打印 传入pdf文档url
printjs('docs/printjs.pdf')
//图片打印 传入图片url，第二个参数:'image'
printjs('images/printjs.jpg', 'image')
//html打印 第一个参数:元素id，第二个参数:'html'
printjs('myelementid', 'html')
//json打印 当打印json数据时，传入要打印的数据、类型和数据属性
printjs({printable: mydata, type: 'json', properties: ['prop1', 'prop2', 'prop3']})
三.常用配置
print.js接受一个对象作为参数，在这里你可以配置一些选项:
| 字段 | 默认值 | 说明 |
| printable | null | 数据源:pdf or image的url，html类型则填打印区域元素id，json类型则是数据object。 |
| type | 'pdf' | 可选类型:pdf, html, image, json。 |
| header | null | 应用于页面顶部标题文本。 |
| headerstyle | 'font-weight: 300;' | 应用于标题文本的可选标题样式。 |
| maxwidth | 800 | 最大文档宽度(像素)。 |
| css | null | 这允许我们传递一个或多个css文件的url，应该应用到正在打印的html。value可以是包含单个url的字符串，也可以是包含多个url的数组。 |
| style | null | 这允许我们传递一个自定义样式的字符串，该字符串应应用于正在打印的html。 |
四.具体使用
1.打印html
const printhtml=()=>{
//在页面显示需打印区域来获取dom
document.queryselector('#printjs-html').style.display = 'block'
printjs({
printable: 'printjs-html',//打印区域id
type: 'html',//打印类型
style: `@page { size: auto; } .paging{page-break-after: always;}`,
})
//获取打印内容后隐藏dom
document.queryselector('#printjs-html').style.display = 'none'
}
这里 .paging{page-break-after: always;}样式就是控制分页的关键。
2.打印图片
打印图片的话可以使用上面第一种html的方式，但更推荐使用print.js提供的"image"打印类型
printjs({
printable: ['第一张图片url','第二张图片url','第三张图片url'],
type: 'image',
header: null,
imagestyle: `display: block;margin: 0 auto;page-break-after: always;max-width:100%`
})
相对于html方式这个更简单，传入需要打印的图片url数组即可。
更多内容可访问 print.jsd88尊龙官网手机app官网：
