vue-pdf插件实现base64格式的文件预览,pdf要实现翻页显示


<img :src="fileUrl" v-if="type === 'jpg'"/>
<Pdf v-for="i in numPage" :page="i" :key="i" :src="fileUrl" v-if="type === 'pdf'"/>

import Pdf from 'vue-pdf';
import CMapReaderFactory from 'vue-pdf/src/CMapReaderFactory';

data(){
  return {
    fileUrl: '',
    type: '',
    numPage: 0,
  }
},
components:{
  Pdf
}

const base64ToBlob(base64){
  const arr = base64.split(',');
  const type = arr[0].match(/:(.*?);/)[1];
  const fileType = type?.split('/')[1] || ''; //文件类型 - pdf
  const blob = atob(arr[1])
  let n = blob.length;
  const u8arr = new Unit8Array(n);
  while(n--){
    u8arr[n] = blob.charCodeAt(n);
  };
  return {
     fileBlob : new Blob([u8arr], { type: type }),
     fileType,
  }
}

//fileBase64为后端返回的base64格式的文件
cosnt {fileBlob, fileType} = base64ToBlob(fileBase64);
this.fileUrl = URL.createObjectURL(fileBlob);
this.type = fileType;
if(fileType === 'pdf'){
  let fileData = Pdf.createLoadingTask({url:fileBase64, CMapReaderFactory});
  fileData.promise.then(pdf=>{
    this.numPage = pdf.numPages;
  })
}
posted @ 2024-11-14 17:34  天官赐福·  阅读(17)  评论(0编辑  收藏  举报
返回顶端