想法
工作中产品大小不一,产生的图纸量也不同,无法一次性贴上。于是想用一个二维码图片扫描,进行手机查看。
实现
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/pdfjs-dist@2.0.943/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 , 不知道系统自动给要那么多分!