载地址在github,文末有使用方法

github地址:https://github.com/crabbly/Print.js/

官网:https://printjs.crabbly.com/(可能被墙)

无法访问可以加企鹅群看离线版:1006429377

或者访问: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）攻击。

初体验

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

• 打印PDF(注意:火狐不支持iframes,可以使用新标签页)

<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">

详细配置:

兼容性