vue 预览 pptx,xlsx,pdf,docx

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