青海省住房与城乡建设厅网站洛阳霞光网络建站公司

实现效果图

解决方法(降版本)

npm uninstall pdfh5
npm install pdfh5@1.4.2

1、如果只想快速解决问题的，以下内容不看也可以。
2、如果降低版本还解决不了你的问题，那么耐心看一下，跟你遇到的问题是不是一致。

排查问题过程

发现问题

就在那么平静的一天，领导甩给一个项目并说到：“拉一下代码，跑起来，之后可能有新需求要在这个项目中加一下”。
我：“好的领导，我跑一下看看”
平静的一天生活就被打破了，拉代码，装依赖，npm i 哎嘿报错。yarn install 哎嘿又报错。cnpm install 依赖装好了。
npm run serve 我嘞个去报错。删依赖包，切换node版本…反正最终是装好了。

这可给我给我开心坏了，什么需求不就分分钟给他开发完了，敲bug，再改，再敲。直接一手npm run build，打包上线
美滋滋的生活就这样过了几个星期，某一天突然领导说开个会议：“看一下问题，生产环境的pdf怎么看不到了。”
我：“还真有人预览看协议去啊，那么多文字。”

查找问题根源

1、代码写错了？

pdf预览出问题了，肯定第一时间去找pdf展示的代码呗，打开页面一看八个月前提交。

这八个月前的代码谁也没动过啊，咋能突然不好使了，然后就排查pdf预览生成。
翻文档: pdfh5文档

2、预览文件流的问题？

仔细一看data：res，这是什么鬼，不应该是直接一个链接么？细看了一下，原来是两种方案啊，能拼接pdf地址，也能直接预览文件流。
领导说：“直接预览地址因为跨域，文件是放在另一个服务器的…(中间略过一万字)，为了解决跨域，代码逻辑就是把pdf的url传给后端，后端转成文件流返回，然后data:res展示。”
这也没毛病啊，返回去继续看业务代码

难道是后端生成的流太大了解析不了？然后就开始了我的狡辩：“领导，这块压根就没动过，git提交记录都在，是不是后端加什么逻辑这块修改过？不是前端的问题吧…”
继续狡辩：“要不然你把咱这个项目的服务器放个pdf？不用文件流，看看行不行，绝对不是前端的问题”
领导一顿噼里啪啦敲代码，升上去了，哎嘿，pdfurl: “http://…git.pdf” 直接url还是看不到。这代码有毒吧，好端端的为啥就不能用了。
就在疑惑之际，控制台一行代码引起了我的注意

3、pdfh5插件更新了，我的依赖包没更新？

版本号、这个项目很早之前的，是不是插件更新了版本自己的太老，需要更新一下呢，去对比官方看看

没错啊，最新版本号，再去我的package.json看看

我嘞个去，这块咋是1.4.2呢，那咋控制台能是1.4.9呢，这俩为啥不一样。看node包里的pdfh5

艹 ****************************************************************

4、真相大白

npm uninstall pdfh5
npm install pdfh5@1.4.2

彩蛋

领导：“我最烦听到的就是绝对、肯定、一定”
“好的，以后注意”

文档地址：
pdfh5文档: https://gitee.com/gjTool/pdfh5