使用pdf.js 预览pdf文件（BASE64格式）前端

一、下载 pdf.js 官方文档

二、解压后放到项目 public文件夹中，命名为pdfjs

目录结构：

三、修改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替换为变量

五、在config文件中 添加 window._imgUrl = ‘’ 接收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

标签：base64,BASE64,js,window,var,pdf,fileName,imgUrl
来源： https://blog.csdn.net/weixin_41668951/article/details/118547632