安裝插件 npm install ranui@0.1.9 --save
<r-preview :src="previewUrl"></r-preview>
import 'ranui';
export default{
data(){
return {
previewUrl:""
}
},
methods:{
down(fileUrl){
//fileUrl 預覽文件名稱，通過后綴判斷類型
if(fileUrl.toLowerCase().indexOf('.xlsx')>-1){
type = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
}else if(fileUrl.toLowerCase().indexOf('.docx')>-1){
type = "application/vnd.openxmlformats-officedocument.wordprocessingml.document";
}else if(fileUrl.toLowerCase().indexOf('.pdf')>-1){
type = "application/pdf";
let blob = new Blob([res], {
type: 'application/pdf'
});
const url = window.URL.createObjectURL(blob);
window.open(url);
return ;
}else if(fileUrl.toLowerCase().indexOf('.pptx')>-1){
type = "application/vnd.openxmlformats-officedocument.presentationml.presentation";
}
if(type){
let blob = new Blob([res],{
type: type
});
this.previewUrl = window.URL.createObjectURL(blob);
}else{
this.$message.warning("預覽只支持docx,pptx,pdf,xlsx");
}
}
}}
效果圖pptx,效果有點差
image.png
效果圖docx
image.png
效果圖xlsx
image.png
效果圖pdf
image.png
