位置: IT常识 - 正文
推荐整理分享Print.js实现打印pdf,HTML,图片(可设置样式可分页)(print-js),希望有所帮助,仅作参考,欢迎阅读内容。
文章相关热门搜索词:js 直接打印,js window.print,js打印输出,print-js,js window.print,js println,print-js,print-js,内容如对您有帮助,希望把文章链接给更多的朋友!
1.安装
npm install print-js --save//oryarn add print-js2.在需要使用的文件引入
import printJS from 'print-js'二.介绍Print.js有四种打印类型:'pdf'、'html'、'image'、'json'。
它的基本用法是调用printJS()并传入参数
//pdf打印 传入PDF文档urlprintJS('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。headernull 应用于页面顶部标题文本。headerStyle'font-weight: 300;'应用于标题文本的可选标题样式。maxWidth800最大文档宽度(像素)。cssnull这允许我们传递一个或多个css文件的url,应该应用到正在打印的html。Value可以是包含单个URL的字符串,也可以是包含多个URL的数组。stylenull这允许我们传递一个自定义样式的字符串,该字符串应应用于正在打印的html。四.具体使用1.打印Html
<div id="printJS-HTML" style="display:none;"> <div v-for="index in 5" :key="index"> <table> <tr> <td>序号</td> <td>作者</td> </tr> <tr> <td>1</td> <td>Ghmin</td> </tr> </table> <!-- 控制打印分页的关键 --> <div class="paging"></div> </div></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/
上一篇:怎么无损数据地将动态磁盘转换为基本磁盘(无损数据分区)
友情链接: 武汉网站建设