使用PDF.js实现前端和手机端网页预览PDF文件（可定制，支持本地文件、Base64编码和远程URL跨域方式）

1.插件下载地址：https://mozilla.github.io/pdf.js/

下载后解压pdfjs-1.10.88-dist.zip文件后得到：

2.把pdfjs-1.10.88-dist放到项目静态资源中，在自己的页面中通过iframe链接到pdfjs-1.10.88-dist/web/viewer.html文件中。

3.访问自己的页面，默认就是本地文件的方式打开PDF文件，可自行指定viewer.js文件中

DEFAULT_URL的值为需要预览的文件路径，可以把下图的代码行注释掉，到viewer.html中嵌入<script>标签在里面重新定义该变量为需要预览的本地文件。

4.Base64方式预览

（1）界面定制：默认的viewer.html页面功能太强大了，在手机端项目不需要，这里会提供快速的裁剪代码。

先给出效果图：

（2）你需要copy的代码（完全不用修改，但是一定要把步骤3中的代码行注释掉！！）

在viewer.html文件中：

<script src="../build/pdf.js"></script>和<script src="viewer.js"></script>之间插入下面的代码

<script src="../build/pdf.js"></script>

<script type="text/javascript">
    function getBase64Data() {
      // 优先从Session中获取
      let key = "_base64DataStr";
      let result = sessionStorage.getItem(key);
      if (result)
        return result;

      return localStorage.getItem(key);

      // console.log(window.parent.name.length);
      // return window.parent.name;
    }

    // console.log(document.location.search);
    var BASE64_MARKER = ';base64,'; //声明文件流编码格式
    var preFileId = "";
    var pdfAsDataUri = getBase64Data(); //pdf文件的base64码，通过session/local传递base64
    if (!pdfAsDataUri) {
      console.error("SessionStorage中没有_base64DataStr对象");
    }
    // console.log(pdfAsDataUri);
    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;
      newUrl = dataURI.substring(base64Index).replace(/[\n\r]/g, '');
      var raw = newUrl;
      try {
        raw = window.atob(newUrl); //这个方法在ie内核下无法正常解析。
      } catch (e) {
        console.error(e);
      }
      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>

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

（3）裁剪代码（直接copy即可）

不要试图去删掉viewer.html中多余功能的html元素，因为在js文件中会根据这些元素绑定功能！！

在viewer.html中最下面的</body>前添加如下代码：

<!--隐藏多余的交互元素-->
<script type="text/javascript">
  let ids = ["sidebarToggle", "toolbarButtonSpacer", "toolbarViewerRight"];
  ids.forEach(value => {
    let dom = document.getElementById(value);
    if (dom) {
      dom.style.display = "none";
    }
  })
  let scales = document.getElementsByClassName("splitToolbarButton");
  if (scales && scales.length >= 4) {
    scales[3].style.marginLeft = "-80px";
  }
</script>

（4）你需要准备的就是在预览前，往你的sessionStorage或者localStorage中存入PDF文件的base64编码，键为代码中的_base64DataStr，如：data:application/pdf;base64,JVBERi0xLjcKJcKzx9gNCjEgMCBvYmoNPDwv......

 

5.远程URL跨域方式

5.1 先说本地pdf文件访问的另一种比较方便的访问形式：url传参

假设你的插件存放在assets目录中，则也可通过url的方式浏览本地PDF文件（前面所有改动撤销，功能隐藏的裁剪代码随意）
支持相对路劲，如果路径有中文或特殊字符需要转码，推荐使用encodeURIComponent()方法。
iframe的src="assets/pdfjs-1.10.88-dist/web/viewer.html?file=compressed.tracemonkey-pldi-09.pdf"
不使用iframe方式也可以直接通过浏览器地址栏访问，前面带上域名，支持相对路径！！

5.2 如果服务端支持访问pdf文件返回文件流的，上面的file参数可指向文件流接口，如：

http://hocalhost:8100/assets/pdfjs-1.10.88-dist/web/viewer.html?file=encodeURIComponent(文件流接口访问URL)

tip1：文件流是普通的输出流，并非文件的base64编码！！

tip2：如果viewer.html跟访问文件接口url不在同一个服务器上会出现跨域问题，按下图所示修改viewer.js来解决跨域问题（注释掉红色框部分的代码即可）：

 

END：陆陆续续参考了很多博客，就不一一列举了，Thanks a lot!