pdf.js后台读取base64流显示pdf的小坑记

想法

工作中产品大小不一，产生的图纸量也不同，无法一次性贴上。于是想用一个二维码图片扫描，进行手机查看。

实现

1.vue2.0+c# 6.0后台

2.liunx服务器

3.pdf.js插件

记录添加都已成，就是在扫描时读取后台数据，前面显示出现了错误，怎么也不能显示。后面说说具体情况。

不想去处理跨域，不会用转发，所以后台就是用文件流来实现。

错误问题

1、刚开始查了有vue-pdf封装了pdf.js插件，经过网上教程去学习，在下面红字的部分出现问题，没调试通过，后面就放弃了。

 getBase64Pdf() {
                // 引入pdf.js的字体
                let CMAP_URL = 'https://unpkg.com/[email protected]/cmaps/'
                // let CMAP_URL = `${window.location.origin}/cmaps/`;  可以使用本地的字体
                // base64pdf拼接
                let perfix64 = 'data:application/pdf;base64,' + this.pdfSrc 
                this.src = pdf.createLoadingTask({
                    url: perfix64,
                    withCredentials: false,
                    cMapUrl: CMAP_URL,
                    cMapPacked: true
                    });
                this.src.promise.then(pdf => {
                    this.numPages = pdf.numPages
                    console.log(this.numPages)
                }).catch(err => {
                    console.error('pdf 加载失败', err);
                })

 }

2、又重新搜pdf.js资料看，大部分都是简单采用其自带的封装页面，viewer.html来实现，推荐一篇文章大家可以参考

pdf.js预览pdf文件流（base64）_pdfjs预览pdf_五月呀的博客-CSDN博客

说说我遇到的问题：

1）传不过数据，显示默认pdf

2) 显示无法正确加载pdf

3)谷歌浏览器用F12查看有错误提示，但不影响使用（后来查资料是扩展插件问题）

解决方法

刚开始时是用npm install方法，结果是问题百出，后来就放弃了改用直接引入。从网上搜索了一个改好的包，包含了两个文件夹（web,build),然后放到vue的static目录下。

拿到后台的base64字符串，直接放js文件里，引入本地去测试，还是不行。一直以为是转换有问题，直接在线base64转文件（EC95，可以在线互转），测试成功证明后端转换没有问题。感觉是没有拿到对应的数据，再仔细研究前台，尝试删除了viewer.js 里的var DEFAULT_URL=""，再没测试就没有问题了。

尝试放到服务器上后，又是提示出现atob()不能为空啥的，查看了半天才发现是后台出错误了没有友好提示，导致回传的base64出现了空，查看错误记录，发现是未发现对应的文件（实际该文件是存在的），本地调试没问题，服务上有问题，固定是liunx服务与window服务的问题，想起了大小写问题，全改成小写。

在后台保存文件时，注意目录，如果用时间的话，最好是转换成字符串，我在本地windows系统里，出现了2023-04-03目录，而服务器上是04/03/2023,三个深度目录，所以导致文件找不到。

我把运行无问题的封装成一个压缩包，有需要的可以拿去测试。减少没用的文件（语言）。

测试demo  , 不知道系统自动给要那么多分！

https://download.csdn.net/download/nihongyuan/87647871