vue实现pdf浏览
Vue 中实现 PDF 浏览的方法
使用 pdf.js 库
pdf.js 是 Mozilla 开发的开源库，可直接在浏览器中渲染 PDF 文件。安装依赖：
npm install pdfjs-dist示例代码：
<template>
<div>
<canvas ref="pdfCanvas"></canvas>
</div>
</template>
<script>
import * as pdfjsLib from 'pdfjs-dist';
export default {
props: {
pdfUrl: String,
},
mounted() {
this.loadPdf();
},
methods: {
async loadPdf() {
const loadingTask = pdfjsLib.getDocument(this.pdfUrl);
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;
await page.render({
canvasContext: context,
viewport: viewport,
}).promise;
},
},
};
</script>使用 vue-pdf 插件
vue-pdf 是对 pdf.js 的封装，简化了集成步骤。安装依赖：
npm install vue-pdf示例代码：
<template>
<pdf :src="pdfUrl" style="width: 100%;"></pdf>
</template>
<script>
import pdf from 'vue-pdf';
export default {
components: { pdf },
data() {
return {
pdfUrl: '/example.pdf',
};
},
};
</script>使用 iframe 嵌入
适用于简单的 PDF 展示，无需额外依赖：
<template>
<iframe :src="pdfUrl" width="100%" height="600px"></iframe>
</template>
<script>
export default {
data() {
return {
pdfUrl: '/example.pdf',
};
},
};
</script>使用第三方服务
通过 Google Docs 或其他在线服务嵌入：
<template>
<iframe
:src="'https://docs.google.com/viewer?url=' + encodeURIComponent(pdfUrl) + '&embedded=true'"
width="100%"
height="600px"
frameborder="0"
></iframe>
</template>注意事项
- 跨域问题：若 PDF 文件位于其他域名，需确保服务器配置 CORS。
- 性能优化：大文件可分页加载，避免一次性渲染所有页面。
- 移动端适配：根据屏幕尺寸动态调整
scale参数或容器大小。
以上方法可根据项目需求选择，pdf.js 适合高度定制化场景，vue-pdf 适合快速集成，iframe 适合简单嵌入。
