<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] || '';
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,
}
}
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;
})
}
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 单元测试从入门到精通