关于pdf.js在线预览base64格式的实现以及出现的问题

首先我接收到的是后台返回的标准格式的base64 编码流 有png格式的和pdf格式的编码流两种

可以使用base64在线转换工具来查看png和pdf需要加的格式

png : "data:image/png;base64," + 后台返回的数据流;
pdf:"data:application/pdf;base64," + 后台返回的数据流;

使用pdf.js实现base64编码流实现pdf文件的预览

pdf.js官网链接：pdf.js官网下载链接

• 下载下来后将会有一个build文件夹和web文件夹，然后将这两个文件放在vue的public下面 如下图：
  
• 在 viewer.js 文件中的 defaultUrl
• 修改为下图
  
• 然后还要在viewer.js.map文件下 搜索 compressed.tracemonkey-pldi-09.pdf 将其改为 DEFAULT_URL 字符串
  
• 修改为
  
• 然后在 viewer.html 中将下面代码放里面（记得要放在 viewer.js 之前~）

<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 = sessionStorage.getItem("_imgUrl");//这里就是pdf文件的base64码，我是通过session传递base64的
      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>

• 请求后端文件流的接口代码，仅供参考，可以根据自己的情况进行相应修改以及相关数据的定义

expressPrint(sheetId){
        this.$http({
        method:'get',
        responseType: 'blob',
        url:'/api' + this.$api.haiyunchukou.yibanshuju.searchBySheetId,
        data:{
          id:sheetId
        },
        success:(res)=>{
          console.log(res);
          if(res.datas.shipprdRemark == 'png'){
            const img = new Image();
            img.src = "data:image/png;base64," + res.datas.sheetFile;
            const newWin = window.open("", "_blank");
            newWin.document.write(img.outerHTML);
            newWin.document.title = "面单"
            newWin.document.close();
          }else if(res.datas.shipprdRemark =='pdf'){
            this.expressVisible = false;
            this.shipprdRemark = res.datas.shipprdRemark;
            sessionStorage.setItem('_imgUrl',"data:application/pdf;base64,"+res.datas.sheetFile);
            window.open("/static/pdf/web/viewer.html");
          }
        },
      })
    },

• 接下来即为PDF文件的预览方式有一下两种：
• 一：在需要的位置使用iframe标签引入
  
• 将后台传给你的base64格式的代码放在本地的sess中

sessionStorage.setItem('_imgUrl',"data:application/pdf;base64,"+res.datas.sheetFile);

• 二：使用开启新标签的方式进行预览

sessionStorage.setItem('_imgUrl',"data:application/pdf;base64,"+res.datas.sheetFile);
window.open("/static/pdf/web/viewer.html");   

png格式的base64编码流的预览以及导出方法

<div>
  <img :src="expressImg" alt="" style='height:100%;width:100%;'>
</div>

this.expressImg = "data:image/png;base64," + 后台返回的base64编码流;     

• 新窗口打开图片
• 获取base64编码流成功的回调函数中调用一下代码

    let hreLocal="";
  	hreLocal = "data:image/png;base64," + res.datas.sheetFile;
    this.downloadByBlob(hreLocal,"面单")    

• 在成功回调函数后定义一下方法

downloadByBlob(url,name) {
     let image = new Image()
     image.setAttribute('crossOrigin', 'anonymous')
     image.src = url
     image.onload = () => {
       let canvas = document.createElement('canvas')
       canvas.width = image.width
       canvas.height = image.height
       let ctx = canvas.getContext('2d')
      ctx.drawImage(image, 0, 0, image.width, image.height)
      canvas.toBlob((blob) => {
        let url = URL.createObjectURL(blob)
        this.download(url,name)
        // 用完释放URL对象
        URL.revokeObjectURL(url)
      })
    }
  },
 download(href, name) {
   let eleLink = document.createElement('a')
   eleLink.download = name
   eleLink.href = href
   eleLink.click()
   eleLink.remove()
 },

over~

• 好好工作，不仅仅是为了挣钱~