vxe-table在线查看PDF及图片

if (fileExt.toUpperCase()=='PDF'){
	alwayShowPdfRef.value.openDialog(fileID,fileName);
	}
//图片
if(fileExt.toUpperCase()=='PNG'||fileExt.toUpperCase()=='JPG'||fileExt.toUpperCase()=='BMP'||
fileExt.toUpperCase()=='JPEG'||fileExt.toUpperCase()=='GIF'){
	alwayShowImageRef.value.openDialog(fileID,fileName,fileExt);
};

一、在线查看PDF

<template #default>
	<iframe id="iframepdf" frameborder="0" width="100%" height="100%" type="application/pdf"></iframe>
</template>
//方法：
const ShowPdf=()=>{
	//根据文件ID下载，state.fileID
	state.loading=true;
	FileApi.DownLoadFile(state.fileID).then(rs=>{
	if (rs.status=="200" && rs.data){
		let url= window.URL.createObjectURL(new Blob([rs.data]));
		url=encodeURIComponent(url);
		state.pdfsrc='/web/viewer.html?file='+  url;
		document.getElementById("iframepdf").src=state.pdfsrc;
		state.realFileName=rs.headers.filename;
	} else {
		console.log('FileApi.DownLoadFile.ree',rs);
		VXETable.modal.message({ content: '下载失败，此文件可能已被删除！', status: 'error' });
	}
	state.loading=false; 
	}).catch(err=>{
	console.log('FileApi.DownLoadFile.catch',err);
     state.loading=false; 
	});
};

二、在线查看图片

<template #default>
	<div height="100%" width="100%">
		<img id="iframeimage"  >
	</div>
</template>

const ShowImage=()=>{
	//根据文件ID下载，state.fileID
	state.loading=true;
	FileApi.DownLoadFile(state.fileID).then(rs=>{
	if (rs.status=="200" && rs.data){
		var fileread=new FileReader();
        fileread.readAsDataURL(rs.data);
		fileread.onload=function(e){
			document.getElementById("iframeimage").src=this.result; 
		};
	} else {
		console.log('FileApi.DownLoadFile.err',rs);
		VXETable.modal.message({ content: '下载失败，此文件可能已被删除！', status: 'error' });
	}
	state.loading=false; 
	}).catch(err=>{
		console.log('FileApi.DownLoadFile.catch',err);
		state.loading=false; 
	});
};