vue项目使用Print.js插件实现PDF文件打印 |
您所在的位置：网站首页 › js控制打印机打印文件数量 › vue项目使用Print.js插件实现PDF文件打印 |
vue项目使用Print.js插件实现PDF文件打印
|
一，Print.js介绍
Print.js主要是为了帮助我们在应用程序中直接打印PDF文件，而不需要离开界面，也不需要使用嵌入。对于用户不需要打开或下载PDF文件的特殊情况，只需要打印即可。 例如，当用户请求打印在服务器端生成的报告时，这是有用的一种情况。这些报告以PDF文件的形式发回。打印这些文件之前无需打开这些文件。Print.js提供了一种在我们的应用程序中快速打印这些文件的方法。 PDF文件必须与您的应用程序所在的域相同。Print.js在打印文件之前使用iframe加载文件，因此，它受到同源策略的限制。这有助于防止跨站点脚本（XSS）攻击。 原生js，不依赖其它库可指定打印（或不打印）区域支持css样式（内联、外联、嵌入）支持input（radio/checkbox/text）、select、textarea值获取 二，下载安装Print.js下载地址：https://download.csdn.net/download/weixin_43025151/87606898 或者使用npm安装 npm install print-js --save引入到自己的项目中： import print from 'print-js' 三，配置项Print.js将接受一个对象作为参数，您可以在其中配置一些选项：
实现思路：将目标区域的dom/css添加到空iframe中，打印该iframe。 1) pdf的打印 Print PDF 2)base64 Print PDF with Message 3)html的打印 ... Print Form 4)图片的打印 printJS('images/print-01-highres.jpg', '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;' }) 5)打印json someJSONdata = [ { name: 'John Doe', email: '[email protected]', phone: '111-111-1111' }, { name: 'Barry Allen', email: '[email protected]', phone: '222-222-2222' }, { name: 'Cool Dude', email: '[email protected]', phone: '333-333-3333' } ] Print JSON Data整个vue文件： 工程项目：xx 编号：xx 整改单位：xx 编号：xx 整改内容：xx 编号：xx pdf打印 import printJS from "print-js"; export default { name: "printing", data() { return {}; }, methods: { print() { printJS({ printable: "divPrint", // 标签元素id type: "html", // 打印类型 header: "整改通知单", // '表单名称', targetStyles: ["*"], style: "@page {margin:0 10mm};", // 可选-打印时去掉眉页眉尾 ignoreElements: ["no-print"], // 接受打印父 html 元素时应忽略的 html id 数组。 properties: null, }); }, }, }; #app { width: 100%; font-family: "Avenir", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; .mainbox { width: 100%; margin: 0 auto; } }点击打印按钮后，出现PDF预览。 经过多次实战演练： 如果要打印的样式比较复杂，并且有字体图标等，建议选择第一种； 如果打印表格数据，比如element表格，还可以按需勾选进行打印，选择第二种打印方式比较好。 再分享一个强制分页打印，每页只打印固定的内容： 只需要在要分页打印的末尾加上： 即可 代码如下： |
【本文地址】
今日新闻 |
推荐新闻 |