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资源，有需要的可以下载，地址如下：

https://download.csdn.net/download/xingmei_ok/86838446

我的博客即将同步至腾讯云开发者社区，邀请大家一同入驻：https://cloud.tencent.com/developer/support-plan?invite_code=22dx9kx3l3fo8