后台返回pdf的base64字段，用pdf.js展示

本文章仅记录本人在项目中，处理后台传来base64字段的pdf，并实现预览，供大家参考。
本文参考：https://blog.csdn.net/Tastill/article/details/84572408

废话不多说，直接进入主题。

一、首先下载整个pdf.js，下载地址：https://mozilla.github.io/pdf.js/
下载后解压，并复制到项目静态文件下，如图（我把文件夹名称更改为“pdfjs”）：

WX20190103-183131@2x.png

二、请求后台数据，获取后台base64字段，并且保存到本地，然后跳转到刚刚添加的pdf.js项目里的viewer.html

WX20190103-184202@2x.png

三、打开pdfjs/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>
<!-- 添加在viewer.js引用之前 -->

<script src="viewer.js"></script>

四、首先说明一点，我下载的版本是“pdfjs-2.0.943-dist”。

打开viewer.js，我这个版本直接搜索“DEFAULT_URL”会找不到（因为网上有个别帖子的版本是在viewer.js里搜到“DEFAULT_UR”并且要求注释的），但是通过寻找，发现我这个版本的“DEFAULT_URL”已经放在“defaultOptions”对象里面，如下图：

image.png

找到这个参数后，修改“defaultUrl”的value为“DEFAULT_URL”成下图：

image.png

打开viewer.js.map，搜索defaultUrl，如图：

image.png

修改为下图：

image.png

五、在IE浏览器下，会报错，说什么对象不支持replace属性，这是什么原因呢？主要原因是：正常打开pdf是通过文件地址去获取文件，而我们现在是直接打开流，所以viewer.js对这一现象没有判断。看viewer源码：

validateFileURL = function validateFileURL(file) {
    try {
     var viewerOrigin = new URL(window.location.href).origin || 'null';
     /*if (HOSTED_VIEWER_ORIGINS.indexOf(viewerOrigin) >= 0) {
      return;
     }*/
     //var fileOrigin = new URL(file, window.location.href).origin;
     //跨域请求
     /*if (fileOrigin !== viewerOrigin) {
      throw new Error('file origin does not match viewer\'s');
     }*/
//当我们直接打开base64时，file是个对象，而不是string类型的url，所以此处我们需要判断
     if (file && typeof file =='string') {
         var fileOrigin = new URL(file, window.location.href).origin;
     }
    } catch (e) {
     var message = e && e.message;
     var loadingErrorMessage = mozL10n.get('loading_error', null, 'An error occurred while loading the PDF.');
     var moreInfo = { message: message };
     PDFViewerApplication.error(loadingErrorMessage, moreInfo);
     throw e;
    }
   };

webViewerOpenFileViaURL = function webViewerOpenFileViaURL(file) {
//此处也没有做判断
    if (file && typeof file=='string' && file.lastIndexOf('file:', 0) === 0) {
     PDFViewerApplication.setTitleUsingUrl(file);
     var xhr = new XMLHttpRequest();
     xhr.onload = function () {
      PDFViewerApplication.open(new Uint8Array(xhr.response));
     };
     try {
      xhr.open('GET', file);
      xhr.responseType = 'arraybuffer';
      xhr.send();
     } catch (e) {
      PDFViewerApplication.error(mozL10n.get('loading_error', null, 'An error occurred while loading the PDF.'), e);
     }
     return;
    }

六、有同学可能在项目跑起来后，标题可能自动添加“-”或者其他内容，我的效果，如图：

image.png

解决方法：
打开“viewer.js”,搜索“document.title”，如图：

image.png

修改成如下图：

image.png

修改后效果如下：

image.png

最后，以上是本人在项目中遇到的问题，仅供参考。