pdf.js预览pdf文件流(base64)亲测可用

JS_基础 同时被 2 个专栏收录
74 篇文章 1 订阅
22 篇文章 0 订阅

上一篇降到通过file跳转路径,取后台读取pdf文件。

后来我们需要上传pdf文件时支持预览,因为文件尚未传到服务器,所以不存在取后台取文件了,但是我们前端的小哥也没有获取选择的文件的本地路径,只抛给我一个base64码,很尴尬。。。。。

去网上查阅了很多资料,很少有这方面的文章,遂记下来,以备以后用到。

我用的是pdf自带的viewer.html页面。

直接上代码:

1、打开viewer.js,注释掉:var DEFAULT_URL

2、打开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 = "";
            var pdfAsDataUri = sessionStorage.getItem("_imgUrl");//这里就是pdf文件的base64码,我是通过session传递base64的
            var pdfAsArray = convertDataURIToBinary(pdfAsDataUri);
            DEFAULT_URL = pdfAsArray;
            function convertDataURIToBinary(dataURI) {   //编码转换
                var raw = window.atob(dataURI);//这个方法在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="../../static/project/js/pdf/viewer.js"></script>
3、调用方法如下:

var PDFData =_imgUrl.replace("data:application/pdf;base64,","");
        sessionStorage.setItem("_imgUrl", PDFData);
        pageToUrl("page/pdf/viewer",true);
4、效果如下:

 

在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;
    }
 
--------------------- 
作者:Tastill 
来源:CSDN 
原文:https://blog.csdn.net/Tastill/article/details/84572408 
版权声明:本文为博主原创文章,转载请附上博文链接!

  • 1
    点赞
  • 3
    评论
  • 3
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 深蓝海洋 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值