Vue3项目中预览并打印PDF的两种方法
作者：种①个月亮
最近在项目开发中碰到一个需求是在页面中展示pdf预览功能,下面这篇文章主要给大家介绍了关于Vue3项目中预览并打印PDF的两种方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
项目场景：
后台接口请求数据，返回PDF文档的链接，在vue3页面可预览和打印该PDF。
在之前的Vue2项目中，预览并打印PDF用的是vue-pdf这个插件，但在vue3中是不支持的，只能换个插件了，于是经过测试，也踩了一些坑，总结了以下两种方法：
方法一：使用vue-pdf-embed + pdfjs-dist
①首先，安装这两个插件依赖
pnpm install vue-pdf-embed pnpm install pdfjs-dist2.0.943
当时我在安装pdfjs-dist时遇到了问题 ，我没有指定版本号，控制台报错，翻了一些文章，有博主建议安装2.0.943版本，于是又重新输入命令，安装了这个版本，就一切正常了
②页面中写相关代码
// 引入插件
import VuePdfEmbed from 'vue-pdf-embed'
import * as pdfjsLib from 'pdfjs-dist'
//定义
const state = reactive({
source: '', // 预览pdf文件地址
pageNum: 0, // 当前页面
scale: 1, // 缩放比例
numPages: 0 // 总页数
})
const scale = computed(() => `transform:scale(${state.scale})`)<div>
// 操作按钮
<div class="page-tool">
<div class="page-tool-item" @click="lastPage">上一页</div>
<div class="page-tool-item" @click="nextPage">下一页</div>
<div class="page-tool-item">{{ state.pageNum }}/{{ state.numPages }}</div>
<div class="page-tool-item" @click="pageZoomOut">放大</div>
<div class="page-tool-item" @click="pageZoomIn">缩小</div>
</div>
//pdf预览
<vue-pdf-embed ref='pdf' :source="state.source" :style="scale" :page="state.pageNum" class="vue-pdf-embed" />
</div><script setup>
onMounted(()=>{
getPdfUrl(pdfUrl) // pdfUrl即url地址链接
})
function getPdfUrl(data){
state.source = data
pdfjsLib.GlobalWorkerOptions.workerSrc = '/pdf.worker.js'
const loadingTask = pdfjsLib.getDocument(data)
loadingTask.promise.then(pdf => {
state.numPages = pdf.numPages
})
}
// 上一页
function lastPage() {
if (state.pageNum > 1) {
state.pageNum -= 1
}
}
// 下一页
function nextPage() {
if (state.pageNum < state.numPages) {
state.pageNum += 1
}
}
// 放大
function pageZoomOut() {
if (state.scale < 2) {
state.scale += 0.1
}
}
// 缩小
function pageZoomIn() {
if (state.scale > 1) {
state.scale -= 0.1
}
}
</script>为了好看一些，我给操作按钮写了样式
<style lang="scss" scoped>
.page-tool {
display: flex;
position: absolute;
top: 5px;
left: 50%;
z-index: 100;
transform: translateX(-50%);
align-items: center;
background: rgb(66 66 66);
color: white;
border-radius: 19px;
cursor: pointer;
justify-content: center;
font-size: 15px;
}
.page-tool-item {
padding: 4px 10px;
cursor: pointer;
}
</style>最终的实现效果：
打印：
const { proxy } = getCurrentInstance()
<div @click='print'>打印</div>
<script setup>
function print(){
proxy.$refs['pdf'].print()
}
</script>方法二：使用pdfjs-dist，canvas渲染，pdf.js打印
说明：pdf.js可以打印canvas数据，所以选择这个插件
①首先，安装依赖
pnpm install pdfjs-dist
安装之后，在项目的node_modules文件夹里，找到pdfjs-dist ->build->pdf.worker.js文件，拷贝出来放到public根目录下，接着找到pdfjs-dist ->cmaps文件夹，拷贝一下放到public->static文件夹里，如下图所示：
②下载print.js放入项目中，在需要使用的页面，引入方法，然后方法调用
具体我是参考的这篇博文：前端使用print.js实现打印_printjs
③代码实现
// 打印按钮
<div @click="print">打印</div>
//pdf预览显示
<div>
<div id="printDom" ref="printDom">
<div v-for="item in state.numPages" :key="item">
<canvas :id="`pdfCanvas-${item}`" :ref="`pdfCanvas-${item}`" />
</div>
</div>
</div>
<script setup>
import * as pdfjsLib from 'pdfjs-dist' //引入pdfjs-dist
import Print from '@/assets/js/print' //引入print.js
const { proxy } = getCurrentInstance()
const state = reactive({
source: '', // 预览pdf文件地址
pageNum: 0, // 当前页面
scale: 1, // 缩放比例
numPages: 0, // 总页数
pdfCtx: null // pdf对象
})
onMounted(()=>{
pdfjsLib.GlobalWorkerOptions.workerSrc = '/pdf.worker.js'
const loadingTask = pdfjsLib.getDocument({
url: pdfUrl, //这里的pdfUrl即pdf的链接地址
cMapUrl: '../../../../static/cmaps/',
cMapPacked: true
})
loadingTask.promise.then(pdf => {
// console.log('页数', pdf.numPages)
state.numPages = pdf.numPages
state.pdfCtx = pdf
nextTick(() => {
renderPdf()
})
})
})
const renderPdf = (num = 1) => {
state.pdfCtx.getPage(num).then(page => {
const canvas = document.getElementById(`pdfCanvas-${num}`)
const ctx = canvas.getContext('2d')
const viewport = page.getViewport(1.6)
canvas.height = viewport.height
canvas.width = viewport.width
page.render({
canvasContext: ctx,
viewport: viewport
})
if (num < state.numPages) {
renderPdf(num + 1)
}
})
}
//打印
function print(){
Print(proxy.$refs['printDom'])
}
</script>总结
到此这篇关于Vue3项目中预览并打印PDF的两种方法的文章就介绍到这了,更多相关Vue3预览打印PDF内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！