Vue中使用Printjs插件实现打印功能_vue.js_

前言

客户需求： 表单支持在线打印
实现思路： 百度…百度…百度之后，printjs 这款插件比较满足需求，无需下载，无需写打印模板，并且兼容Element-ui中el-form表单的打印。

一、Print.js介绍

Print.js官网

Print.js 主要是为了帮助我们直接在我们的应用程序中打印 PDF 文件，无需离开界面，也无需使用嵌入。 对于用户无需打开或下载 PDF 文件而只需打印它们的特殊情况。
支持“pdf”、“html”、“image”和“json”四种打印文档类型。默认为“pdf”。

PrintJS参数配置表

二、安装/引入

方法1.下载print.js

• 从官网下载print.js，将下载的 print.js 放入项目utils文件夹
• 可以全局引入即（在main.js中引入），也可以在需要的文件里面引入import Print from './utils/print'

方法2.使用npm安装print插件

• 安装print-jsnpm install print-js --save
• 可以全局引入即（在main.js中引入），也可以在需要的文件里面引入 import Print from 'print-js'

三、使用-“html”类型

在表单页面中调用打印方法

点击打印按钮，弹出打印预览界面，右边栏调整打印界面。
假设出现打印不全的问题，可以通过缩放来进行设置，数值越小，缩放的越小。

四、其他Type示例

1.pdf

printJS('docs/printjs.pdf') // 或 printJS({printable:'docs/printjs.pdf', type:'pdf', showModal:true}) 

2.image单个图像

printJS('images/print-01-highres.jpg', 'image') // 或 printJS({printable: 'images/print-01-highres.jpg', type: 'image', header: 'My cool image header'}) 

3.image多个图像

printJS({ printable: ['images/print-01-highres.jpg', 'images/print-02-highres.jpg', 'images/print-03-highres.jpg'], type: 'image', header: 'Multiple Images', imageStyle: 'width:50%;margin-bottom:20px;' }) 

4.json

 someJSONdata = [ { name: 'John Doe', email: 'john@doe.com', phone: '111-111-1111' }, { name: 'Barry Allen', email: 'barry@flash.com', phone: '222-222-2222' }, { name: 'Cool Dude', email: 'cool@dude.com', phone: '333-333-3333' } ] printJS({ printable: someJSONdata, properties: ['name', 'email', 'phone'], type: 'json', gridHeaderStyle: 'color: red; border: 2px solid #3971A5;', gridStyle: 'border: 2px solid #3971A5;' }) 

更多示例请参考Print.js官网。

总结

以上便是printjs插件的使用场景，希望对大家有所帮助。

到此这篇关于Vue中使用Printjs插件实现打印功能的文章就介绍到这了,更多相关Vue Printjs打印插件内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！