![cover](https://img-blog.csdnimg.cn/img_convert/31631d5b5b1e4dd09ff852ee37113c23.png)
vue 项目中实现pdf预览 pdf打印 pdf下载
前端可实现pdf 预览, 打印, 下载.
·
在Vue项目中实现PDF预览、打印和下载可以通过以下步骤来实现:
- 安装pdf.js
- pdf.js是一个JavaScript库,可以用于在Web上渲染PDF文件。
- 可以使用npm安装pdf.js,命令如下:
npm install pdfjs-dist --save
- 创建一个PDF组件
- 在Vue项目中,可以创建一个PDF组件,用于显示PDF文件。
- 可以使用pdf.js提供的API来渲染PDF文件。
- 在组件的模板中添加一个canvas元素,用于显示PDF页面。
<template>
<div>
<canvas ref="pdfCanvas"></canvas>
</div>
</template>
- 在组件的脚本中,通过pdf.js加载PDF文件,并将其渲染到canvas元素中。
<script>
import pdfjsLib from 'pdfjs-dist'
export default {
name: 'PdfViewer',
props: {
url: {
type: String,
required: true
}
},
mounted () {
pdfjsLib.getDocument(this.url).promise.then(pdf => {
pdf.getPage(1).then(page => {
const canvas = this.$refs.pdfCanvas
const context = canvas.getContext('2d')
const viewport = page.getViewport({ scale: 1 })
canvas.height = viewport.height
canvas.width = viewport.width
page.render({
canvasContext: context,
viewport: viewport
})
})
})
}
}
</script>
3. 实现PDF打印
1.在PDF组件中添加一个按钮,用于触发打印操作。
2.在按钮的点击事件中,调用浏览器的打印功能。
<template>
<div>
<canvas ref="pdfCanvas"></canvas>
<button @click="print">Print</button>
</div>
</template>
<script>
import pdfjsLib from 'pdfjs-dist'
export default {
name: 'PdfViewer',
props: {
url: {
type: String,
required: true
}
},
methods: {
print () {
const canvas = this.$refs.pdfCanvas
const url = canvas.toDataURL('image/png')
const win = window.open()
win.document.write('<img src="' + url + '">')
win.print()
win.close()
}
},
mounted () {
pdfjsLib.getDocument(this.url).promise.then(pdf => {
pdf.getPage(1).then(page => {
const canvas = this.$refs.pdfCanvas
const context = canvas.getContext('2d')
const viewport = page.getViewport({ scale: 1 })
canvas.height = viewport.height
canvas.width = viewport.width
page.render({
canvasContext: context,
viewport: viewport
})
})
})
}
}
</script>
4. 实现PDF下载
1.在PDF组件中添加一个按钮,用于触发下载操作
2. 在按钮的点击事件中,使用pdf.js提供的API将PDF文件转换为Blob对象,并使用 URL.createObjectURL()方法创建一个URL对象,然后将其赋值给一个a元素的href属性,最后触发a元素的点击事件
<template>
<div>
<canvas ref="pdfCanvas"></canvas>
<button @click="print">Print</button>
<button @click="download">Download</button>
</div>
</template>
<script>
import pdfjsLib from 'pdfjs-dist'
export default {
name: 'PdfViewer',
props: {
url: {
type: String,
required: true
}
},
methods: {
print () {
const canvas = this.$refs.pdfCanvas
const url = canvas.toDataURL('image/png')
const win = window.open()
win.document.write('<img src="' + url + '">')
win.print()
win.close()
},
download () {
pdfjsLib.getDocument(this.url).promise.then(pdf => {
pdf.getData().then(data => {
const blob = new Blob([data], { type: 'application/pdf' })
const url = URL.createObjectURL(blob)
const a = document.createElement('a')
a.href = url
a.download = 'document.pdf'
})
}
)
}
}
}
更多推荐
所有评论(0)