<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;
})
}
标签:插件,vue,const,翻页,CMapReaderFactory,fileType,pdf,type
From: https://www.cnblogs.com/domin520Jian/p/18542396