vue实现pdf预览
Vue 中实现 PDF 预览的方法
使用 pdf.js 库
pdf.js 是 Mozilla 开发的一个开源库，可以直接在浏览器中渲染 PDF 文件。适合需要高度自定义的场景。
安装依赖：
npm install pdfjs-dist在 Vue 组件中使用：
<template>
<div>
<canvas v-for="page in pages" :key="page" :ref="'canvas' + page"></canvas>
</div>
</template>
<script>
import * as pdfjsLib from 'pdfjs-dist';
export default {
data() {
return {
pages: [],
};
},
mounted() {
this.loadPDF('your-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.0 });
const canvas = this.$refs['canvas' + pageNum][0];
const context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
const renderContext = {
canvasContext: context,
viewport: viewport,
};
await page.render(renderContext).promise;
});
});
},
},
};
</script>使用 vue-pdf 插件
vue-pdf 是一个封装了 pdf.js 的 Vue 专用插件，简化了集成步骤。
安装依赖：
npm install vue-pdf在 Vue 组件中使用：
<template>
<div>
<pdf :src="pdfSrc" v-for="i in numPages" :key="i" :page="i"></pdf>
</div>
</template>
<script>
import pdf from 'vue-pdf';
export default {
components: { pdf },
data() {
return {
pdfSrc: 'your-file.pdf',
numPages: 0,
};
},
created() {
const loadingTask = pdf.createLoadingTask(this.pdfSrc);
loadingTask.promise.then(pdf => {
this.numPages = pdf.numPages;
});
},
};
</script>使用 iframe 嵌入
适用于简单的预览需求，无需额外依赖。
<template>
<iframe
:src="pdfUrl"
width="100%"
height="600px"
frameborder="0"
></iframe>
</template>
<script>
export default {
data() {
return {
pdfUrl: 'your-file.pdf',
};
},
};
</script>使用第三方服务（如 Google Docs Viewer）
适用于公开的 PDF 文件，通过 URL 直接嵌入。
<template>
<iframe
:src="'https://docs.google.com/viewer?url=' + encodeURIComponent(pdfUrl) + '&embedded=true'"
width="100%"
height="600px"
frameborder="0"
></iframe>
</template>
<script>
export default {
data() {
return {
pdfUrl: 'your-file.pdf',
};
},
};
</script>注意事项
- 跨域问题：如果 PDF 文件位于其他域名下，需确保服务器允许跨域访问。
- 性能优化：大文件可分页加载或使用缩略图预览。
- 移动端适配：针对移动设备调整缩放比例或使用响应式布局。
以上方法可根据项目需求灵活选择，pdf.js 适合深度定制，vue-pdf 简化集成，iframe 适合快速实现。
