利用Print.js实现打印pdf、HTML及图片(可设置样式可分页)，
目录
-
一.安装及引入Print.js
-
二.介绍
-
三.常用配置
-
四.具体使用
-
总结
一.安装及引入Print.js
npm install print-js --save
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
<div id="printJS-HTML" style=";">
<div v-for="index in 5" :key="index">
<table>
<td>序号</td>
<td>作者</td>
<td>1</td>
<td>Ghmin</td>
</table>
<!-- 控制打印分页的关键 -->
<div class="paging"></div>
<button @click="printHtml">打印 HTML</button>
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.js官网：https://printjs.crabbly.com/
到此这篇关于利用Print.js实现打印pdf、HTML及图片的文章就介绍到这了,更多相关Print.js打印pdf、HTML及图片内容请搜索3672js教程以前的文章或继续浏览下面的相关文章希望大家以后多多支持3672js教程！
您可能感兴趣的文章:- vue中使用vue-print.js实现多页打印
- vue使用Print.js打印页面样式不出现的解决
- 前端使用print.js实现打印功能(基于vue)
- vue print.js打印支持Echarts图表操作
- Vue使用Print.js打印div方式(选中区域的html)
评论已被关闭
