前端调用谷歌打印方法实现自定义打印
... 2025-7-10 大约 2 分钟
# Print.js
Print.js 主要是为了帮助我们直接在我们的应用程序中打印 PDF 文件，无需离开界面，也无需使用嵌入。
针对于用户无需打开或下载 PDF 文件，而只需打印它们的特殊情况。
例如，当服务端返回的是 PDF 文件流时，前端接收后无需下载或者打开这些文件，就可以直接在当前页面调用打印。
# 下载
npm install print-js --save
1
# 引入
// Vue 引入
import printjs from 'print-js'
import 'print-js/dist/print.css'
Vue.prototype.$print = printjs;
// link链接引入
<script src="print.js"></script>
<link rel="stylesheet" type="text/css" href="print.css">
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# 使用
this.$print({
// 文档来源<null>：pdf或图像的url，html元素的id或json数据的对象
printable: 'main',
// 可打印类型<pdf>：pdf，html，image，json和raw-html。
type: 'html',
header: '标题，放在页面顶部',
// 要应用于标题文本的可选标题样式
headerStyle: 'font-weight：300;',
// 最大文档宽度（像素）。根据需要更改此项。在打印HTML，图像或JSON时使用。
maxWidth: '',
// 默认情况下，在打印HTML元素时，库仅处理某些样式。
// 传递要处理的样式数组。例如：['padding-top'，'border-bottom']
targetStyles: ['*'],
// 在检索或处理大型PDF文件时显示遮罩层
showModal: true,
// 遮罩层显示的文本信息
modalMessage: '正在载入文档...',
// 打印结束后的回调 / 打印弹窗关闭后的回调
onLoadingEnd: () => {
document.querySelector('#printJS').remove()
},
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
注意： 实现最基本的打印效果，不考虑用户体验可不传 showModal modalMessage onLoadingEnd 等参数。
这些参数会在一些低端机器上出现错误：卡顿，调不出来打印页面
# PDF 文件流 转 URL
后端返回 PDF 文件流时，将 PDF 文件流转换为 blob 协议的 URL 在新窗口打开 新窗口默认展示 PDF 预览页面，有打印按钮
// res：后端返回的PDF文件流
let blob = new Blob([res], { type: 'application/pdf' })
let PDF_URL = URL.createObjectURL(blob)
window.open(PDF_URL)
1
2
3
4
2
3
4
# Base64 转 URL
图片、PDF 等等格式的 Base64 文件转为 Blob 协议的 URL 地址
let bstr = atob(base64)
let n = bstr.length
let u8arr = new Uint8Array(n)
while (n--) {
u8arr[n] = bstr.charCodeAt(n)
}
// new File() 第二个参数 为文件类型
let file = new File([u8arr], `image/jpeg`)
let url = URL.createObjectURL(file)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# Blob 协议的地址，销毁
URL.revokeObjectURL(url)
1