首先说一下需求：
PC端实现文件盖章预览功能；后端返回的是base64的数据
环境说明：
pc是多页面系统，也就是最古老的html+js+css
PC端：
pc端因为是单页面系统，也不需要考虑打包，项目库跟随本地代码更新，pdfjs源码需要修改的地方修改一次，提交到代码库，其他开发者拉取之后无需二次修改。
具体实现：
1. 下载pdf.js包，可以在官方地址下载
mozilla.github.io/pdf.js/gett…
或者到我的网盘下载(已修改后的源码包--注释相关代码，以显示电子签章)：地址已设置永久有效，无法获取可私信或者留言
链接：pan.baidu.com/s/1l302vEar… 提取码：5pgj
2. 然后将pdf.js包放置在自己的项目中，我是先将文件夹名称统一改成了pdf（感觉清晰简洁，个人习惯），以下是我的目录：
3. 因为接口返回的数据是base64的缘故，我们需要对源码中的一些地方进行修改
打开web下面的viewer.html文件，我们可以看到如下代码（源码）：
添加如下代码（只是插入一段处理base64数据的js，我的pdf数据存放在localStorage里面，需要支持ie8以下的浏览器慎用）：
<script type="text/javascript"> var DEFAULT_URL = ""; var pdfUrl = document.location.search.substring(1); if(null == pdfUrl || "" == pdfUrl){ var BASE64_MARKER = ';base64,';//声明文件流编码格式 var preFileId = ""; var pdfAsDataUri = localStorage.getItem("_pdf");//这里就是pdf文件的base64码，我是通过session传递base64的 var pdfAsArray = convertDataURIToBinary(pdfAsDataUri); DEFAULT_URL = pdfAsArray; //编码转换 function convertDataURIToBinary(dataURI) { //[RFC2045]中有规定：Base64一行不能超过76字符，超过则添加回车换行符。因此需要把base64字段中的换行符，回车符给去掉。 // var base64Index = dataURI.indexOf(BASE64_MARKER) + BASE64_MARKER.length; var newUrl = dataURI.replace(/[\n\r]/g,''); var raw = window.atob(newUrl);//这个方法在ie内核下无法正常解析。 var rawLength = raw.length; //转换成pdf.js能直接解析的Uint8Array类型 var array = new Uint8Array(new ArrayBuffer(rawLength)); for (i = 0; i < rawLength; i++) { array[i] = raw.charCodeAt(i) & 0xff; } return array; } } </script>
结果如下：
这里配置好之后，那么我们就要来调用了
4. 使用pdfjs
// 先将base64数据存入缓存（根据自己需求来取）localStorage.setItem('_pdf',r.data.base64); // 可以直接打开viewer.html实现效果window.location.href="./pdf/web/viewer.html";// 以下是本人基于layui的弹窗需求pdfView('./pdf/web/viewer.html');pdfView: function(uul) { layui.use('layer', function () { var layer = layui.layer; layer.open({ type: 2, area: ['1000px', '750px'], fixed: false, //不固定 maxmin: true, content: uul }); });},
5.效果展示（因为内容涉及敏感信息，所以就打码了，但是所需要展示的功能点保留完整）（不知道为什么掘金里面这张图片显示不出来）
6. 下面就说一下电子签章的问题，因为pdfjs默认隐藏签章功能的，所以只需要找到源码包，build文件夹下面的pdf.worker.js文件，并找到如下代码：
if (data.fieldType === 'Sig') { data.fieldValue = null; _this3.setFlags(_util.AnnotationFlag.HIDDEN);}
将以上代码注释掉即可显示电子签章（亲测有效），但是需要说明的是如果你使用的是pdf-dest这个包，很有可能注释之后还是无法显示电子签章，目前未找到有效的解决办法。
感谢：
最后，感谢您的阅读，如果以上内容存在疑问或者错误，欢迎留言提供意见和建议
下一篇预告：vue框架中预览pdf（中文、水印、电子签章）
