使用pdf.js 预览pdf文件(BASE64格式)前端

一、下载 pdf.js 官方文档
使用pdf.js 预览pdf文件(BASE64格式)前端

二、解压后放到项目 public文件夹中,命名为pdfjs
使用pdf.js 预览pdf文件(BASE64格式)前端
目录结构:
使用pdf.js 预览pdf文件(BASE64格式)前端

三、修改pdfjs/web/viewer.html中代码

1、在 pdfjs/web/viewer.html 中,将

<script type="text/javascript" language="javascript">
      var TITLE = window.fileName || localStorage.getItem("fileName");
</script>

替换为

<script type="text/javascript" language="javascript">
      var TITLE = window.top.fileName || localStorage.getItem("fileName");
</script>

2、在 pdfjs/web/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 = window.top._imgUrl || sessionStorage.getItem("_imgUrl"); //这里就是pdf文件的base64码,通过window对象,或session传递base64
        if(pdfAsDataUri) {
          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>

四、将读取pdf文件的固定路径修改为传入的变量

打开viewer.js,搜索defaultUrl替换为变量
使用pdf.js 预览pdf文件(BASE64格式)前端
五、在config文件中 添加 window._imgUrl = ‘’ 接收base64
使用pdf.js 预览pdf文件(BASE64格式)前端
六、通过window对象使用

async lotPrint() {
	window._imgUrl = 'data:application/pdf;base64,' + res.printHtml 
},

七、通过sessionStorage使用

async Print() {
	sessionStorage.setItem('_imgUrl', 'data:application/pdf;base64,' + res.printHtml)
},

注意:后台获取的base64字符,需要拼接一下前缀
var printHtml = ‘data:application/pdf;base64,’ ( 这是需要展示的base64字符串)



参考文章:
https://blog.csdn.net/qq_43058760/article/details/108680907

上一篇:C# 保存网络图片至本地项目中


下一篇:promise.all使用