pdf.js预览pdf文件流（base64）
1、前言：
新接手一个老项目，需要改造pdf文件的预览效果，接口直接返回的pdf文件的文件流base64字符串，前端只能拿到base64来进行预览。
pdf.js是一款非常优秀的pdf解析工具，但不支持直接预览文件流，这里需要对pdf.js稍微改造。
2、下载pdf.js
下载地址：https://mozilla.github.io/pdf.js/
下载稳定版本，下载后解压，把他放在静态资源目录下面，我这里的项目是老项目，前后端么有分离的java项目，放在webapp下面，我把下载以后的文件解压重新命名为pdfjs文件夹，如图
3、保存pdf文件流
我这里是一个接口返回包括内容详情，图片，pdf文件等所有内容，点击一条pdf记录，跳转打开新的标签页进行预览。因此把接口返回的pdf文件流base64编码先本地缓存.跳转到我们下载的pdf文件夹里面的【viewer.html】文件。
function getPdf(fileBase64) {
var href = serveUrl + '//pdfjs/web/viewer.html'
var sessionStorage.setItem('pdfBase', fileBase64)
window.open(href,'_blank')
}4、对viewer.html文件的处理
打开pdfjs/web下的viewer.html文件，添加js代码，对base64进行处理。这代码代码需要添加在
【viewer.js】引用之前。
<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("pdfBase");//这里就是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 base64 = dataURI.substring(base64Index).replace(/[\r\n]/g, '');
var raw = window.atob(base64);//这个方法在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>5、改造pdf.js源码
5.1 viewer.js更改
打开viewer.js，直接搜索“DEFAULT_URL”会找不到（因为网上有个别帖子的版本是在viewer.js里搜到“DEFAULT_UR”并且要求注释的），但是通过寻找，发现我这个版本的“DEFAULT_URL”已经放在“defaultOptions”对象里面，如下图：
把defaultUrl的value修改为DEFAULT_URL，原来的value值是本地的一个demo文件
{
defaultOptions.defaultUrl = {
// value: "compressed.tracemonkey-pldi-09.pdf",
value: DEFAULT_URL,
kind: OptionKind.VIEWER
};更改标签页标题：
打开“viewer.js”,搜索“document.title”
更改如下：
setTitle(title = this._title) {
this._title = title;
if (this.isViewerEmbedded) {
return;
}
// document.title = `${this._hasAnnotationEditors ? "* " : ""}${title}`;
document.title = this._title.split(" ")[0]
},5.2 修改viewer.js.map
打开viewer.js.map，搜索defaultUrl，把value更改为【DEFAULT_URL】，如图：
最后pdf预览如图(pdf内容打了马赛克)：
另外，更改以后的pdfjs文件夹，已经上传到csdn资源，有需要的可以下载，地址如下：