vue实现pdf预览
Vue 实现 PDF 预览的方法
使用 pdf.js 库
pdf.js 是 Mozilla 提供的开源库，可直接在浏览器中渲染 PDF 文件。
安装依赖：
npm install pdfjs-dist组件实现：
<template>
<div>
<canvas v-for="page in pages" :key="page" ref="canvas"></canvas>
</div>
</template>
<script>
import * as pdfjsLib from 'pdfjs-dist/build/pdf';
import 'pdfjs-dist/build/pdf.worker.entry';
export default {
data() {
return {
pages: [],
};
},
mounted() {
this.loadPDF('/path/to/file.pdf');
},
methods: {
async loadPDF(url) {
const loadingTask = pdfjsLib.getDocument(url);
const pdf = await loadingTask.promise;
this.pages = Array.from({ length: pdf.numPages }, (_, i) => i + 1);
this.$nextTick(() => {
this.pages.forEach(async (pageNum) => {
const page = await pdf.getPage(pageNum);
const viewport = page.getViewport({ scale: 1.5 });
const canvas = this.$refs.canvas[pageNum - 1];
const context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
await page.render({
canvasContext: context,
viewport,
}).promise;
});
});
},
},
};
</script>使用 vue-pdf 插件
vue-pdf 是对 pdf.js 的 Vue 封装，简化了集成过程。
安装依赖：
npm install vue-pdf组件实现：
<template>
<pdf src="/path/to/file.pdf" :page="currentPage"></pdf>
</template>
<script>
import pdf from 'vue-pdf';
export default {
components: { pdf },
data() {
return {
currentPage: 1,
};
},
};
</script>使用 iframe 嵌入
适合需要简单预览且不依赖第三方库的场景。
<template>
<iframe src="/path/to/file.pdf" width="100%" height="600px"></iframe>
</template>注意事项
pdf.js需要处理跨域问题，确保 PDF 文件允许跨域访问。- 大文件需考虑分页加载优化性能。
- 移动端需调整视口缩放比例。
以上方法可根据项目需求选择，pdf.js 提供最灵活的定制能力，vue-pdf 适合快速集成，iframe 则适合简单场景。
