安装插件 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
