先从第一步开始说吧  从官网下载 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当参数传就好了,像下面一样

GitHub 加速计划 / pd / pdf.js
47.48 K
9.86 K
下载
PDF Reader in JavaScript
最近提交(Master分支:3 个月前 )
18284815 [Editor] Update the disclaimer string in the new alt-text dialog (bug 1911738) 3 个月前
fc602c65 And tweak the css in order to take into account that disclaimer can be on two (or more lines). 3 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐