vue打印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_@我不认识你的博客-CSDN博客

③代码实现

// 打印按钮 <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>