vue页面实现pdf
在Vue中实现PDF功能
使用vue-pdf库
安装vue-pdf库：
npm install vue-pdf在Vue组件中使用：
<template>
<pdf :src="pdfSrc"></pdf>
</template>
<script>
import pdf from 'vue-pdf'
export default {
components: {
pdf
},
data() {
return {
pdfSrc: '/path/to/document.pdf'
}
}
}
</script>使用PDF.js直接集成
安装pdfjs-dist：
npm install pdfjs-dist实现代码：
<template>
<div>
<canvas ref="pdfCanvas"></canvas>
</div>
</template>
<script>
import * as pdfjsLib from 'pdfjs-dist'
export default {
mounted() {
this.renderPDF()
},
methods: {
async renderPDF() {
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文件
使用jsPDF库生成PDF：
npm install jspdf生成PDF示例：
<script>
import jsPDF from 'jspdf'
export default {
methods: {
generatePDF() {
const doc = new jsPDF()
doc.text('Hello world!', 10, 10)
doc.save('document.pdf')
}
}
}
</script>显示PDF下载链接
简单实现方式：
<template>
<a :href="pdfUrl" download>下载PDF</a>
</template>
<script>
export default {
data() {
return {
pdfUrl: '/path/to/document.pdf'
}
}
}
</script>高级功能实现
添加分页控制：
<template>
<div>
<pdf :src="pdfSrc" :page="currentPage"></pdf>
<button @click="prevPage">上一页</button>
<button @click="nextPage">下一页</button>
</div>
</template>
<script>
import pdf from 'vue-pdf'
export default {
components: { pdf },
data() {
return {
pdfSrc: '/path/to/document.pdf',
currentPage: 1,
pageCount: 0
}
},
mounted() {
this.getPageCount()
},
methods: {
async getPageCount() {
const loadingTask = pdf.createLoadingTask(this.pdfSrc)
const pdf = await loadingTask.promise
this.pageCount = pdf.numPages
},
prevPage() {
if (this.currentPage > 1) this.currentPage--
},
nextPage() {
if (this.currentPage < this.pageCount) this.currentPage++
}
}
}
</script>以上方法涵盖了从简单显示到高级控制的多种PDF实现方案，可以根据具体需求选择合适的实现方式。
