文章目录
- 一、`Print.js`
- 二、安装
- 2.1、 `js`文件
- 2.2、`npm`
- 2.3、`CDN`
- 三、使用
- 3.1、网页(`HTML`)打印
- 3.2、`PDF` 打印
- 3.3、图像打印
- 3.4、`JSON` 打印
- 四、最后
一、Print.js
在使用 Print.js
插件之前,我们可以通过下面的链接先了解和认识一下这个 JavaScript
插件。
官方地址:
Print.js - Javascript library for HTML elements, PDF and image files printing
GitHub
地址:GitHub - crabbly/Printjs: A tiny javascript library to help printing from the web
如何认识和快速上手 Print.js
,我们可以从官网的内容开始阅读,在官网中有很详细的介绍和使用例子,虽然是英文版的。
Print.js
打印插件包括了 PDF
打印、HTML
打印、JSON
打印、图像打印等。
二、安装
2.1、 js
文件
下载最新版本的 Print.js
,点击【前往】
2.2、npm
使用 npm
进行安装,请执行以下操作:
npm install print-js --save
使用 yarn
安装:
yarn add print-js
通过 npm
或 yarn
安装时,将库导入到项目中:
import print from 'print-js'
2.3、CDN
使用在线的 CDN
:
https://printjs-4de6.kxcdn.com/print.min.js
https://printjs-4de6.kxcdn.com/print.min.css
三、使用
3.1、网页(HTML
)打印
有时我们只想打印HTML
页面的选定部分,这可能很棘手。使用 Print.js
,我们可以轻松传递要打印的元素的 id
。该元素可以是任何标记,只要它具有唯一的 id
。图书馆将尝试非常接近它在屏幕上的外观进行打印,同时,它将为其创建打印机友好的格式。
<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>
3.2、PDF
打印
Print.js
主要是为了帮助我们直接在应用程序中打印 PDF
文件,无需离开界面,也不使用嵌入。对于用户不需要打开或下载 PDF
文件,而只需要打印它们的独特情况。
例如,当用户请求打印在服务器端生成的报表时,这很有用的一种情况。这些报告以 PDF
文件的形式发回。在打印这些文件之前,无需打开它们。Print.js
提供了一种在我们的应用程序中打印这些文件的快速方法。
注意:
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>
<button type="button" onclick="printJS({printable: base64, type: 'pdf', base64: true})">
Print PDF with Message
</button>
3.3、图像打印
Print.js
可用于通过传递图像 URL
快速打印页面上的任何图像。当您使用低分辨率版本的图像在屏幕上有多个图像时,这可能很有用。当用户尝试打印所选图像时,您可以将高分辨率 url
传递给 Print.js
。
<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;'
})
3.4、JSON
打印
打印动态数据或 JavaScript
对象数组的简单快捷方法。
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>
JSON
、HTML
和 Image
print
可以接收原始 HTML
标头:
<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>
四、最后
本人每篇文章都是一字一句码出来,希望对大家有所帮助,多提提意见。顺手来个三连击,点赞👍收藏💖关注✨,一起加油☕