pdf预览

用pdf.js实现预览

1. pdfjs是什么 ？官网

   开源的pdf文档读取解析插件。 可定制功能，完全脱离浏览器的依赖，web渲染pdf引擎。兼容IE9+

   ---

   插件结构如下： build路径下是主程序； web路径下是查看器程序。

2. pdf使用方法

   • generic 放在有服务器环境的地方，访问目录下viewer.html;
   • web/viewer.js 中 HOSTED_VIEWER_ORIGINS配置generic预览地址，防止产生跨域问题造成预览报错。

    var HOSTED_VIEWER_ORIGINS = ['null','http://127.0.0.1:8080'];
   

   以下示例默认将插件放在vue static目录下：

   • 服务端返回文件urlData：

     //服务端返回bolb文件流
      var files = new File([urlData], file.name, {type: file.type})
     //服务端返回base64
     export function convertBase64UrlToBlob(urlData){  
          var bytes=window.atob(urlData.split(',')[1]); //去掉url的头，并转换为byte  
      
          //处理异常,将ascii码小于0的转换为大于0  
          var ab = new ArrayBuffer(bytes.length);  
          var ia = new Uint8Array(ab);  
          for (var i = 0; i < bytes.length; i++) {  
              ia[i] = bytes.charCodeAt(i);  
          }  
          return new Blob( [ab]);  
      }
      var flle = convertBase64UrlToBlob(urlData);
   
      var url = `../../static/generic/web/viewer.html?file=${window.URL.createObjectURL(flle)}`//本地环境
   

   • 服务端返回文件url：

      window.open(url)
      //本地环境pdf第三页预览
      url = '../../static/generic/web/compressed.tracemonkey-pldi-09.pdf#page=3'
   

iframe src直接展示：

缺点：工具栏由浏览器控制
优点：可兼容ie8展示，ie8需下载阅读器支持