### 实现
Vue.js 中 PDF 文件的
预览与打印功能
#### 方案一：使用 `
vue-pdf` 组件库
为了简化开发过程并提高效率，可以采用现有的第三方库来处理 PDF 的渲染工作。`
vue-pdf` 是一个基于 PDF.js 构建的轻量级插件，能够方便地嵌入到
Vue 应用程序中。
```html
<template>
<div class="pdf
-viewer">
<!
-- 加载进度条
-->
<progress v
-if="loading" max="100">{{ progress }}</progress>
<!
-- 显示PDF
页面 -->
<pdf
v
-for="i in numPages"
:key="i"
:src="pdfSrc"
:page="i"
style="display: block;"
></pdf>
<!
-- 打印按钮
-->
<button @click="print()">Print</button>
</div>
</template>
<script>
import pdf from "
vue-pdf";
export default {
components: { pdf },
data() {
return {
loadingTask: null,
numPages: undefined,
pdfSrc: "/path/to/pdf
-file.pdf",
loading: false,
progress: 0
};
},
methods: {
loadPdf() {
this.loading = true;
this.loadingTask = pdf.createLoadingTask(this.pdfSrc);
this.loadingTask.onProgress = (progressData) => {
this.progress = Math.round((progressData.loaded / progressData.total) * 100);
};
this.loadingTask.promise.then(pdf => {
this.numPages = pdf.numPages;
this.loading = false;
}).catch(err => console.error('Error while loading the document:', err));
},
print() {
window.print();
}
},
mounted() {
this.loadPdf();
}
};
</script>
```
此方法利用了 `
vue-pdf` 提供的功能快速实现了基本的 PDF 查看器，并且添加了一个简单的打印按钮触发浏览器默认打印对话框[^2]。
#### 方案二：自定义实现
- 基于 PDF.js 和 Element UI Dialog
如果希望拥有更多控制权，则可以选择直接操作底层 API —— 即 PDF.js 来构建更复杂的交互逻辑。这里结合
前端框架中的模态窗口组件（如Element UI），创建一个多页PDF查看器实例：
```html
<!
-- template部分
-->
<el
-dialog ref="dialogPDF" title="" center :visible.sync="isPDFVisible" width="80%" top="5vh">
<div id="pdf
-container"></div>
</el
-dialog>
<button type="button" @click="openPDF">Open PDF</button>
<button type="button" @click="printPDF">Print PDF</button>
```
```javascript
// script部分
data () {
return {
isPDFVisible: false, // 控制弹窗显隐状态
pdfDoc: null, // 存储加载后的PDF对象
canvasList: [], //
页面Canvas列表
scale: 1.5 // 缩放比例，默认设置为1.5倍大小
}
},
methods: {
openPDF(url){
let self = this;
fetch(url).then(res=>res.arrayBuffer()).then(function(buffer){
PDFJS.getDocument({data: buffer}).promise.then(function(pdf){
self.pdfDoc = pdf;
for(let i=1;i<=self.pdfDoc.numPages;++i){
var canvas=document.createElement("CANVAS");
$("#pdf
-container").append(canvas);
renderPage(i);
}
function renderPage(num){
self.pdfDoc.getPage(num).then(page=>{
var viewport = page.getViewport({scale:self.scale});
$(canvas).attr({
height:viewport.height,
width:viewport.width
});
var context = canvas.getContext('2d');
var task = page.render({canvasContext:context, viewport:viewport});
if(self.canvasList.length<num
-1){
self.canvasList.push(task);
}else{
self.canvasList[num
-1]=task;
}
});
}
self.isPDFVisible=true;
})
})
},
printPDF(){
html2canvas(document.querySelector("#pdf
-container")).then(canvas => {
const imgData = canvas.toDataURL('image/png');
const link = document.createElement('a');
link.href = imgData;
link.download = 'output.png';
link.click();
setTimeout(() => {
window.print(); // 或者调用其他打印服务端接口上传图片流进行服务器侧打印
}, 1000);
});
}
}
```
上述代码片段展示了如何通过 JavaScript 创建 Canvas 元素并将每一页的内容绘制上去；同时也提供了
导出图像以及调起打印机选项的能力[^4]。
本文介绍了在Vue项目中使用html2canvas+jspdf实现HTML转PDF的方法，解决预览和导出隐藏DOM的问题。遇到的核心问题是core-js版本与jspdf的不兼容，以及如何导出不可见的DOM。解决方案包括引用服务器上的jspdf文件以避免版本冲突，以及通过CSS调整使预览DOM不可见以实现导出。
最低0.47元/天 解锁文章
扫一扫
681
到【灌水乐园】发言
