我们需要上传pdf文件时支持预览，因为文件尚未传到服务器，所以不存在取后台取文件了，但是我们前端的小哥也没有获取选择的文件的本地路径，只抛给我一个base64码，很尴尬。。。。。
去网上查阅了很多资料，很少有这方面的文章，遂记下来，以备以后用到。
我用的是pdf自带的viewer.html页面。
直接上代码：
首先pdf.js官网下载：官网下载地址
我下载的是es5兼容低版本的
2.直接从本地打开web/viewer.html文件，但是注意，pdf这类文件会跨域，所以必须放到服务器上才可以预览。
放到服务器上就是mozilla.github.io/pdf.js/web/…
像上图一样，直接在viewer.html文件，点击上面谷歌浏览器，直接开启本地服务
此时我们需要解决的是将base64如何传入这个插件中并在线展示
3.在web/viewer.html中添加代码
<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 = sessionStorage.getItem("_imgUrl"); //这里就是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.substring(base64Index).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>
注意：添加到pdf.js之前
这段代码的意思是从session中读取存入的base64编码，然后展示
4.将读取pdf文件的固定路径修改为传入的变量
打开viewer.js，搜索defaultUrl替换为变量
此时所要修改的插件内容全部修改完成，接下来我们把base64存入session中，并跳转到viewer.html中
5.新增主页面保存base64
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
<script>
var PDFData
= "data:application/pdf;base64,*************";
sessionStorage.setItem("_imgUrl", PDFData);
// pageToUrl("./pdfjs/web/viewer",true);
window.location.href = './web/viewer.html'
</script>
</html>
注意：你后台获取的base64字符，需要拼接一下前缀
var PDFData
= “data:application/pdf;base64,这是你获取的base64字符串”;
如图，在本地服务打开index.html
