前端vue实现pdf预览
前端 Vue 实现 PDF 预览的方法
使用 PDF.js 库
PDF.js 是 Mozilla 提供的开源库，可直接在浏览器中渲染 PDF 文件。安装依赖后，通过 pdfjs-dist 实现核心功能。
安装依赖：
npm install pdfjs-dist示例代码：
<template>
<div>
<canvas ref="pdfCanvas"></canvas>
</div>
</template>
<script>
import * as pdfjsLib from 'pdfjs-dist';
export default {
data() {
return {
pdfDoc: null,
pageNum: 1,
pageRendering: false
};
},
methods: {
async loadPDF(url) {
const loadingTask = pdfjsLib.getDocument(url);
this.pdfDoc = await loadingTask.promise;
this.renderPage(this.pageNum);
},
async renderPage(num) {
const page = await this.pdfDoc.getPage(num);
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() {
this.loadPDF('your-file.pdf');
}
};
</script>使用 vue-pdf 组件
vue-pdf 是基于 PDF.js 的 Vue 封装组件，简化了集成流程。
安装依赖：
npm install vue-pdf示例代码：
<template>
<pdf :src="pdfSrc" @num-pages="pageCount = $event" @page-loaded="currentPage = $event"></pdf>
</template>
<script>
import pdf from 'vue-pdf';
export default {
components: { pdf },
data() {
return {
pdfSrc: 'your-file.pdf',
pageCount: 0,
currentPage: 0
};
}
};
</script>使用 iframe 嵌入
直接通过 <iframe> 标签嵌入 PDF 文件，适合简单场景。
示例代码：
<template>
<iframe
src="your-file.pdf"
width="100%"
height="600px"
style="border: none;"
></iframe>
</template>使用第三方服务（如 Google Docs Viewer）
通过在线服务实现预览，无需本地处理 PDF 文件。
示例代码：
<template>
<iframe
:src="`https://docs.google.com/viewer?url=${encodeURIComponent(pdfUrl)}&embedded=true`"
width="100%"
height="600px"
></iframe>
</template>
<script>
export default {
data() {
return {
pdfUrl: 'your-file.pdf'
};
}
};
</script>注意事项
- PDF.js 需处理跨域问题，若文件在远程服务器需配置 CORS。
- 大文件加载时建议分页渲染，避免性能问题。
- 移动端需测试兼容性，部分浏览器可能限制 iframe 使用。
以上方法可根据项目需求选择，复杂场景推荐 PDF.js 或 vue-pdf，轻量需求可使用 iframe 或在线服务。
