html通过flash打印一个精干的Javascript库实现Web打印printjs

或者访问:https://www.yuque.com/caiyongjie/snknlo/ga5ef9

官网截图

Print.js was primarily written to help us print PDF files directly within our apps, without leaving the interface, and no use of embeds. For unique situations where there is no need for users to open or download the PDF files, and instead, they just need to print them.

One scenario where this is useful, for example, is when users request to print reports that are generated on the server side. These reports are sent back as PDF files. There is no need to open these files before printing them. Print.js offers a quick way to print these files within our apps.

Print.js紧张是为了帮助我们直接在我们的运用程序中打印PDF文件，而无需离开界面，也不该用嵌入。
对付不须要用户打开或下载PDF文件的独特情形，相反，他们只须要打印它们。

例如，当用户要求打印在做事器端天生的报告时，这种情形很有用。
这些报告以PDF文件形式发回。
打印前无需打开这些文件。
Print.js供应了一种在我们的运用程序中打印这些文件的快捷办法。

PDF files must be served from the same domain as your app is hosted under. Print.js uses iframe to load files before printing them, therefore, it is limited by the Same Origin Policy. This helps preventing Cross-site scripting (XSS) attacks.

必须在托管运用程序的同一域中供应PDF文件。
Print.js在打印文件之前利用iframe加载文件，因此它受同源策略的限定。
这有助于防止跨站点脚本（XSS）攻击。

首先在页面上添加一个按钮

<button type=\公众button\"大众 onclick=\"大众printJS('docs/printjs.pdf')\"大众> Print PDF </button>打印大文件(可以弹出提示)

<button type=\"大众button\公众 onclick=\"大众printJS({printable:'docs/xx_large_printjs.pdf', type:'pdf', showModal:true})\"大众> Print PDF with Message </button>html打印

<form method=\公众post\"大众 action=\"大众#\"大众 id=\"大众printJS-form\"大众> ... </form> <button type=\公众button\公众 onclick=\"大众printJS('printJS-form', 'html')\"大众> Print Form </button>打印带头部

<button type=\"大众button\"大众 onclick=\"大众printJS({ printable: 'printJS-form', type: 'html', header: 'PrintJS - Form Element Selection' })\"大众> Print Form with Header </button>打印图片

<img src=\公众images/print-01.jpg\"大众 /> printJS('images/print-01-highres.jpg', 'image') printJS({printable: 'images/print-01-highres.jpg', type: 'image', header: 'My cool image header'})带头

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;' })从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' } ] <button type=\公众button\"大众 onclick=\公众printJS({printable: someJSONdata, properties: ['name', 'email', 'phone'], type: 'json'})\公众> Print JSON Data </button>自定义CSS

<button type=\"大众button\"大众 onclick=\公众printJS({ printable: someJSONdata, properties: ['name', 'email', 'phone'], type: 'json', gridHeaderStyle: 'color: red; border: 2px solid #3971A5;', gridStyle: 'border: 2px solid #3971A5;'})\"大众> Print JSON Data </button>自定义头

<button type=\"大众button\"大众 onclick=\"大众printJS({ printable: someJSONdata, properties: [{ field: 'name', displayName: 'Full Name'},{ field: 'email', displayName: 'E-mail'},{ field: 'phone', displayName: 'Phone'} ], type: 'json' })\"大众> Print with custom table header text </button><button type=\公众button\公众 onclick=\"大众printJS({printable: someJSONdata,type: 'json',properties: ['name', 'email', 'phone'],header: '<h3 class=\"大众custom-h3\"大众>My custom header</h3>',style: '.custom-h3 { color: red; }' })\"大众>Print header raw html</button>安装利用

npm install print-js --save//或 yarn add print-js

import print from 'print-js'

//cdn,不知道能不能访问,我这可以访问 https://printjs-4de6.kxcdn.com/print.min.js https://printjs-4de6.kxcdn.com/print.min.cssye <script src=\公众print.js\"大众></script>如果您将利用模态功能，还包括页面上的Print.css。

<link rel=\公众stylesheet\公众 type=\"大众text/css\"大众 href=\"大众print.css\"大众>

详细配置: