vue3使用pdf.js进行pdf报告预览详细全流程

需求场景描述

项目中需求是对多个pdf进行合并后嵌套在页面预览（不可跳转其他页面或弹窗），需要支持自动缩放 页数切换 文档查找 切换侧栏 显示文档大纲 标注高亮  文本  绘图 添加或编辑图片  打印 保存....等等  调研中发现pdf.js除了合并均可满足

pdf合并实现过程

因为pdf.js使用条件是将文件路径拼接到地址栏中  所以需要将多个pdf地址合并为一个pdf地址  为了将多个pdf路径合并成一个使用pdf.js  使用了很多的方式和组件 例如：pdf-merge  pdf-merger-js  html2pdf.js  vue-pdf  pdfjs-dist  pdf_viewer....等等均未能实现  还踩了很多坑  类似1.pdf-merge合并出来的pdf下载下来是空白的(也有可能是我没有写对  但是网上也有人说偶现类似问题    

2.pdfjs-dist后续发现不满足我们的需求  他需要先将pdf转图片后借助canvas将pdf画上去  这样一来就无法使用pdf.js进行自动缩放等等一系列需求  自己去做的话成本太高了

3.后在网上看到多个文章建议不从前端进行合并文件这一操作 容易关键字丢失  排版错乱  失精等等，最后让后端使用pdfbox进行文件合并后返回一个文件地址

pdfjs使用

pdfjs官方下载地址PDF.js - Getting Started (mozilla.github.io)

左侧为现代浏览器支持依赖            右侧为旧版浏览器支持依赖

我下载的是左侧依赖

1.下载后是一个压缩包  需要解压以后放到项目中   我为了引入路径方便所以直接放到了public静态文件下面

2.因为我这边的需求是需要嵌套在项目的所以我就直接使用iframe标签进行嵌套  上图：

pdfjs预览主要是借助于依赖中的viewer.html文件拼接pdf地址进行预览

3.origin是项目前缀地址  中间为pdf.js文件地址(若你们也放到public下面的话即可照着上面这个写)  fileUrl是后端返回的pdf文件路径地址（因后续需要上线所以origin写为动态 ，若只有一个固定前缀即可写死）

4.

我这边直接将前缀地址放到了env配置文件中  例：env.development中VITE_FILE_REOPRT_URL=http://localhost:5173

5.成品

6.使用期间发现一个比较特殊的bug  本地正常预览 测试环境无法预览且报错Failed to load module script（若你也遇到的话可去看另一篇文章）