vue利用pdfjs实现预览
使用 PDF.js 在 Vue 中实现 PDF 预览
安装依赖
确保项目中已安装 pdfjs-dist，可通过以下命令安装：
npm install pdfjs-dist引入 PDF.js 在 Vue 组件中引入 PDF.js 的核心库和 worker 文件：
import * as pdfjsLib from 'pdfjs-dist';
import pdfjsWorker from 'pdfjs-dist/build/pdf.worker.min';
pdfjsLib.GlobalWorkerOptions.workerSrc = pdfjsWorker;创建 PDF 渲染组件 在 Vue 模板中添加一个用于渲染 PDF 的容器：
<template>
<div>
<canvas ref="pdfCanvas"></canvas>
</div>
</template>加载并渲染 PDF
在 methods 中定义加载和渲染 PDF 的方法：
methods: {
async loadPDF(url) {
const loadingTask = pdfjsLib.getDocument(url);
const pdf = await loadingTask.promise;
const page = await pdf.getPage(1); // 渲染第一页
const viewport = page.getViewport({ scale: 1.0 });
const canvas = this.$refs.pdfCanvas;
const context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
const renderContext = {
canvasContext: context,
viewport: viewport
};
await page.render(renderContext).promise;
}
}调用方法
在 mounted 钩子或事件触发时调用 loadPDF：
mounted() {
this.loadPDF('https://example.com/document.pdf');
}优化与扩展功能
多页渲染
通过循环加载多页内容，动态创建多个 canvas 元素：
async loadAllPages(url) {
const pdf = await pdfjsLib.getDocument(url).promise;
for (let i = 1; i <= pdf.numPages; i++) {
const page = await pdf.getPage(i);
// 动态创建 canvas 并渲染
}
}缩放控制
添加缩放功能，调整 scale 参数：
const viewport = page.getViewport({ scale: 2.0 }); // 放大 2 倍错误处理 捕获加载过程中的异常：
try {
await this.loadPDF(url);
} catch (error) {
console.error('PDF加载失败:', error);
}注意事项
- PDF.js 的 worker 文件需正确配置路径，否则可能报错。
- 跨域 PDF 文件需确保服务器允许 CORS。
- 大文件加载时建议分页渲染，避免性能问题。
通过以上步骤，可在 Vue 中实现基础 PDF 预览功能，并根据需求扩展交互特性。
