vue实现pdf
Vue 中实现 PDF 功能的方法
使用第三方库 vue-pdf
安装 vue-pdf 库：
npm install vue-pdf在组件中使用：
<template>
<pdf :src="pdfUrl"></pdf>
</template>
<script>
import pdf from 'vue-pdf'
export default {
components: { pdf },
data() {
return {
pdfUrl: '/path/to/document.pdf'
}
}
}
</script>使用 PDF.js 直接集成
引入 PDF.js 核心库：
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.min.js"></script>创建 PDF 渲染组件：
<template>
<div>
<canvas ref="pdfCanvas"></canvas>
</div>
</template>
<script>
export default {
props: ['pdfUrl'],
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
}
page.render(renderContext)
}
}
}
</script>生成 PDF 文档
使用 jsPDF 库创建 PDF：
npm install jspdf生成 PDF 示例：
import jsPDF from 'jspdf'
function generatePDF() {
const doc = new jsPDF()
doc.text('Hello Vue!', 10, 10)
doc.save('vue-generated.pdf')
}PDF 预览与下载
实现 PDF 预览功能：
<template>
<iframe :src="pdfUrl" width="100%" height="600px"></iframe>
</template>实现下载功能：
function downloadPDF(url, filename) {
const link = document.createElement('a')
link.href = url
link.download = filename || 'document.pdf'
link.click()
}注意事项
- 跨域问题：确保 PDF 文件与网站同源或服务器配置了正确的 CORS 头
- 性能优化：大型 PDF 文件应考虑分页加载
- 移动端适配：针对移动设备调整 PDF 显示尺寸
- 安全考虑：用户上传的 PDF 文件应进行安全扫描
以上方法可根据具体需求选择或组合使用，vue-pdf 适合快速集成，PDF.js 提供更多底层控制，jsPDF 适用于动态生成 PDF 内容。
