載地址在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">

詳細配置:

兼容性