vue 将base64 的文件流转换成pdf 预览并下载

pdf显示布局，鼠标滑过pdf显示下载按钮

 
      

          下载
      
      

           
      
 

// pdf预览布局
 

      

        x
        
      
 

这里是预览以及下载代码的一部分，传的base64根据自己需求直接在方法里面传值

data(){
  return{
    photoIndex: "",
    showPdf
 }
}

PDF的下载功能，这里是通过js中a标签实现的

// 下载
 downFile(perfix64) {
      this.downloadFile( this.realName,perfix64);
  },
  // 这里的filename自己定义
  downloadFile(fileName, content) {
      let aLink = document.createElement("a");
      let blob = this.base64ToBlob(content);
      let evt = document.createEvent("HTMLEvents");
      console.log("点击下载", evt);
      evt.initEvent("click", true, true);
      aLink.download = fileName;
      aLink.href = URL.createObjectURL(blob);
      aLink.click();
    },
    // base64转blob
    base64ToBlob(code) {
      let parts = code.split(";base64,");
      let contentType = parts[0].split(":")[1];
      let raw = window.atob(parts[1]);
      let rawLength = raw.length;
      let uInt8Array = new Uint8Array(rawLength);
      for (let i = 0; i < rawLength; ++i) {
        uInt8Array[i] = raw.charCodeAt(i);
      }
      return new Blob([uInt8Array], { type: contentType });
    },
    // 预览显示pdf
     showPdfClick(index) {
      this.photoIndex = index;
      this.showPdf = true;
    },

pdf预览css

.largePhotoBox {
  width: 100%;
  height: 100%;
  overflow: auto;
  background: rgba(0, 0, 0, 0.6);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  &::-webkit-scrollbar {
    display: none;
  }
  img {
    width: 50%;
    margin-left: 25%;
    margin-top: 50px;
  }
  span {
    font-size: 30px;
    position: fixed;
    color: #fff;
    top: 30px;
    right: 50px;
  }
}

PDF的预览功能，这里单独写了个子组件，直接复制，很简单

注意

这个代码只适用于返回的base64只是pdf文件的base64码，如果返回的base64码的类型不确定，记得要加判断，传值的时候可以把想要传的base64码使用split切割传值