版本：
vue:2.7.10
pdfjs-dist:2.14.305
worker-loader:3.0.1
安装pdfjs-dist、worker-loader
npm install pdfjs-dist@2.14.305 --save
npm install worker-loader@3.0.1 --save-dev
在vue.config.js中配置
// webpack配置chainWebpack(config) {// 其余配置......// 处理 pdf.worker.js 文件config.module.rule('worker').test(/\.worker\.js$/).use('worker-loader').loader('worker-loader').options({esModule: false, // 禁用 esModule}).end();},// 这个得配置上transpileDependencies: ['pdfjs-dist']
在.vue文件中使用
// 模版部分，对话框内的dom结构
<div id="printArea" ref="printArea" />// 这里需要注意："pdfjs-dist": "^2.14.305",版本使用 的是 CommonJS 模块，使用 import 可能无法正常工作
// js部分
const pdfjsLib = require('pdfjs-dist')
pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.14.305/pdf.worker.min.js'// url是pdf的线上路径地址， pdfContainer是dom容器
async renderPDF(url, pdfContainer) {if (!pdfContainer || !url) return// 使用 PDF.js 加载 PDF 文件const pdf = await pdfjsLib.getDocument(url).promisefor (let pageNum = 1; pageNum <= pdf.numPages; pageNum++) {const page = await pdf.getPage(pageNum)const viewport = page.getViewport({ scale: 1 })const canvas = document.createElement('canvas')const context = canvas.getContext('2d')canvas.height = viewport.heightcanvas.width = viewport.widthawait page.render({canvasContext: context,viewport: viewport}).promise// canvas标签调用print可能会出现打印内容为空白的问题，因为浏览器的 window.print() 函数在处理 HTML 元素上的 canvas 图像数据时不够完善。// 因此需要将 canvas 转换为可打印的 HTML 或将 canvas 数据保存为图像后再打印const imageUrl = canvas.toDataURL('image/png')const img = document.createElement('img')img.src = imageUrlimg.style.width = '100%' // 设置图片宽度pdfContainer.appendChild(img)}
}// 打印
onPrintFiles() {const printArea = this.$refs.printAreaconst printWindow = window.open('', '_blank')printWindow.document.write('<html><head><title>批量打印</title></head><body>')printWindow.document.write(printArea.innerHTML)printWindow.document.write('</body></html>')printWindow.document.close()printWindow.print()printWindow.close()
}
// 包装数据、显示对话框、加载文件
// 批量打印图片和pdf文件async showPrintsDialog() {this.printFiles = []for (const key in this.formFile) {if (this.formFile.hasOwnProperty(key) && this.formFile[key]) {this.printFiles.push(this.formFile[key])}}if (this.printFiles.length) {this.printsView = true // 显示对话框this.$nextTick(() => {// 获取打印区域元素const printArea = document.getElementById('printArea')// 加载并显示所有文件this.printFiles.forEach(file => {const fileContainer = document.createElement('div')fileContainer.className = 'file-container'const index = file.lastIndexOf('.')const ext = file.substring(index + 1).toUpperCase()const isIMG = ['JPEG', 'JPG', 'PNG', 'SVG', 'GIF'].includes(ext)const isPDF = ['PDF'].includes(ext)if (isIMG) {// 图片文件const img = document.createElement('img')img.src = fileimg.style.width = '100%' // 设置图片宽度fileContainer.appendChild(img)} else if (isPDF) {// PDF 文件this.renderPDF(file, fileContainer)}printArea.appendChild(fileContainer)})})}}
需要注意的点：
vue版本不同使用的pdfjs-dist版本也不同，配置也不同，处理也不同，引入方式也不同（CommonJS/ES Modules），需要你自己去看pdfjs-dist源码包，看是.js文件还是.mjs文件，不同文件webpack配置也不一样，所以自己去摸索吧，经过无数次报错就知道了- 该文章仅仅作为记录