关于对pdf.js（v2.1）在线预览base64格式所出现的问题

先从第一步开始说吧从官网下载 pdf.js文件附官网地址：http://mozilla.github.io/pdf.js/getting_started/#download

下载下来后将会有一个build文件夹和web文件夹，然后将这两个文件放在vue的public下面如下图：

在网上查了很多关于pdf.js在线预览base64格式的使用方式，虽然基本上说的都一样，注释掉 var DEFAULT_URL = “” 虽然是这么写的，但是我在这个2.1版本的pdf.js中并没有找到这个定义的方法

然后开始了一系列的查找，后来发现在 viewer.js 文件的第 5127 行的 defaultUrl 中自己设置一个DEFAULT_URL 如下图：

修改为下面的方式

然后还要在viewer.js.map文件下搜索 compressed.tracemonkey-pldi-09.pdf 将其改为 DEFAULT_URL 记得要是字符串的呦

修改为

然后在 viewer.html 中将下面这一大坨代码放里面（记得要放在 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("_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.html页面用iframe引入进来

然后将后台传给你的base64格式的代码放在本地的sess中就可以了，上面的一大坨代码就会直接执行啦,然后就可以看到效果啦

记得sess的命名一定要统一呦，上面获取的sess名字要和你存进去的名字统一，可别看错了；

然后就可以使用看到效果了，我这里就不展示出来了。

这里也说一下如果后台传给你的是一个url的话，直接将其拼接在iframe的src后面用file当参数传就好了，像下面一样

关于对pdf.js（v2.1）在线预览base64格式所出现的问题

猜你喜欢