pdf.js实现pdf内容图片展示

Love The Way You Lie 2022-12-20 03:27 341阅读 0赞

获取pdfViewerMaster文件  
链接：https://pan.baidu.com/s/1w7rKU1T22vGzr11efGiPZA  
提取码：FDGY

## 使用方法 ##

1.可将 PDFViewer 文件夹放到项目内  
2.在项目中可以通过iframe去进行展示

## 文件流数据解析 ##

**1、后端返回base64数据**

//pdfData为返回的base64数据
    var pdfAsArray = convertDataURIToBinary(pdfData);
    // 使用window.URL.createObjectURL方法，产生一个类似blob:d3958f5c-0777-0845-9dcf-2cb28783acaf 这样的URL字符串，可以像使用一个普通URL那样使用它，比如用在img.src上。
    var url =window.URL.createObjectURL(new Blob([pdfAsArray],{ type:"application/zip"}));
    //pdf渲染
    //encodeURIComponent：将文本字符串编码为一个有效的统一资源标识符 (URI)，可将一些特殊字符进行转义，解决如空格等特殊字符所造成的的错误
    <iframe src="服务器地址/web/index.html?file="+encodeURIComponent(url)></ifrmae>
    //返回pdf文件的base64码
    var convertDataURIToBinary = function (dataURI) {    
    	//编码转换
    	//window.atob(base64Str) 用于解码 base-64 编码的字符串
    	//window.btoa(str) 用于将字符串编码为base-64
        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++) { 
          //charCodeAt返回字符的 Unicode 编码
          array[i] = raw.charCodeAt(i) & 0xff;
        }
        return array;
    }

**2、后端返回blob流数据**

var binaryData = [];
    binaryData.push(pdfData);
    let url=window.URL.createObjectURL(new Blob(binaryData, { type:"application/zip"}));
    <iframe src="服务器地址/web/index.html?file="+encodeURIComponent(url)></ifrmae>

注意：  
因为返回的是流数据，需要在ajax请求的时候声明返回类型。另外jq封装的ajax无法直接使用responseType ，需要使用原生new XMLHttpRequest（）的方法

xhr.responseType = "arraybuffer";

## 效果展示 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk3MDk4Nw_size_16_color_FFFFFF_t_70_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk3MDk4Nw_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/98f20f237d9b444a8c5bab1c5bfd09f4.png