vue 实现pdf
在Vue中实现PDF功能
在Vue项目中实现PDF功能通常涉及PDF生成、预览或下载。以下是几种常见实现方式：
使用vue-pdf库预览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>使用jsPDF生成PDF
安装依赖：
npm install jspdf生成PDF示例：
import jsPDF from 'jspdf'
const doc = new jsPDF()
doc.text('Hello world!', 10, 10)
doc.save('document.pdf')使用PDF.js显示PDF
安装依赖：
npm install pdfjs-dist实现代码：
<template>
<canvas ref="pdfCanvas"></canvas>
</template>
<script>
import * as pdfjsLib from 'pdfjs-dist'
export default {
mounted() {
this.loadPdf()
},
methods: {
async loadPdf() {
const loadingTask = pdfjsLib.getDocument('/path/to/document.pdf')
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>服务器端生成PDF
对于复杂PDF，建议使用后端服务生成：
axios.post('/api/generate-pdf', { data })
.then(response => {
const blob = new Blob([response.data], { type: 'application/pdf' })
const link = document.createElement('a')
link.href = URL.createObjectURL(blob)
link.download = 'document.pdf'
link.click()
})注意事项
- 大型PDF文件考虑分页加载
- 跨域PDF文件需要正确配置CORS
- 移动端注意PDF查看兼容性问题
- 考虑添加加载状态和错误处理
以上方法可根据项目需求选择单独使用或组合使用，vue-pdf适合简单预览，jsPDF适合前端生成，PDF.js提供更底层控制，后端生成适合复杂报表。
