PDF预览组件

项目中需要使用pdf预览组件，因pdf无法跨域显示，所以使用文件流的形式加载。

关键点如下：

• 服务器处理跨域文件流重定向。
• 设置axios 或fetch请求responseType:"arraybuffer" 返回buffer。（nodejs可以是bolb 或 stream）
• new Bolb格式类型为"application/pdf"
• bolb转本地url路径， window.URL.createObjectURL(blob);
• 因pdf组件是老组件需要传入id，因此需要手动创建显示dom层

import Pdfh5 from "pdfh5";
import "pdfh5/css/pdfh5.css";
import axios from "axios";

export default {
  name: "pdfMode",
  data(){
    return {
      pdfUrl:"",
      loading:true,
      error:false,
      title:"预览",
      pdfh5: null,
      expand:false
    }
  },
   props:{
    src:{
      default:"",  //https://www.gjtool.cn/pdfh5/git.pdf
      required:true,
    },
    id:{
       default:"pdf"+Date.now()
    }
  },
  watch:{
    src:{
      immediate:true,
      handler(val){
       // debugger
        if(!val){this.$emit("PDFError","pdf为空");return }
        
         this.init(val)
      }
    }
  },
  methods:{
    PDFError(){
        Object.assign(this,{
            pdfUrl:"",error:true,loading:false
        })
        this.$emit("PDFError","pdf加载失败！")
    },
    init(_url){
      let target = `${usercg}/api/v1/user/cg/qr/upload2/fileToByte`
      axios.get(target,{
        params:{
          url:_url,
          t:Date.now()
        },
       responseType:"arraybuffer"
      }).then((da)=>{

        let blobType = "application/pdf"
        var blob = new Blob([da], {
                type: blobType
            });
           let blobUrl = window.URL.createObjectURL(blob);
         this.pdf(blobUrl);
      })

    },
     pdf(pdfurl){
       let self = this;
      import(/* webpackChunkName: "pdfh5" *//* webpackMode: "lazy" */"pdfh5").then((pdf)=>{
         const Pdfh5 = pdf.default;
         self.pdfh5 = new Pdfh5('#'+self.id.replace(/#/ig,""), {pdfurl,zoomEnable:true});
           
          //监听完成事件
          self.pdfh5.on("complete",function(status, msg, time){
            
            Object.assign(self,{
                loading:false,error:false
            })
            console.log("状态：" + status + "，信息：" + msg + "，耗时：" + time + "毫秒，总页数：" + this.totalNum)
          })
          self.pdfh5.on("error",function(){
            self.PDFError()
          })
      })
     
      
    }
  }
 };