vue 实现pdf预览
实现PDF预览的方法
在Vue中实现PDF预览可以通过多种方式完成，以下是几种常见的方法：
使用PDF.js库
PDF.js是Mozilla开发的一个开源库，可以在浏览器中渲染PDF文件。
安装依赖：
npm install pdfjs-dist在Vue组件中使用：
<template>
<div>
<canvas ref="pdfCanvas"></canvas>
</div>
</template>
<script>
import * as pdfjsLib from 'pdfjs-dist';
export default {
props: {
pdfUrl: String
},
mounted() {
this.renderPDF();
},
methods: {
async renderPDF() {
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;
const renderContext = {
canvasContext: context,
viewport: viewport
};
await page.render(renderContext).promise;
}
}
};
</script>使用vue-pdf组件
vue-pdf是一个专门为Vue开发的PDF查看器组件。
安装依赖：
npm install vue-pdf使用示例：
<template>
<div>
<pdf :src="pdfUrl"></pdf>
</div>
</template>
<script>
import pdf from 'vue-pdf';
export default {
components: {
pdf
},
data() {
return {
pdfUrl: 'example.pdf'
};
}
};
</script>使用iframe嵌入
最简单的方法是使用iframe直接嵌入PDF文件：
<template>
<div>
<iframe
:src="pdfUrl"
width="100%"
height="600px"
style="border: none;">
</iframe>
</div>
</template>
<script>
export default {
data() {
return {
pdfUrl: 'example.pdf'
};
}
};
</script>使用第三方服务
可以使用Google文档查看器等第三方服务来预览PDF：
<template>
<div>
<iframe
:src="'https://docs.google.com/viewer?url=' + encodeURIComponent(pdfUrl) + '&embedded=true'"
width="100%"
height="600px"
style="border: none;">
</iframe>
</div>
</template>注意事项
- 跨域问题：如果PDF文件在不同域下，可能需要服务器配置CORS
- 性能考虑：大PDF文件可能导致性能问题，考虑分页加载
- 移动端适配：确保查看器在移动设备上正常工作
- 安全性：验证PDF来源，防止XSS攻击
选择哪种方法取决于项目需求，对于简单需求iframe足够，复杂需求可能需要PDF.js或专用组件。
