vue项目,内网预览.xls .pptx .ppt .doc .docx .xlsx等格式的文件方法推荐

方式.常规预览：

图片，视频，pdf,页面等常规文件，直接用iframe标签就行了，但是word,ppt,exl等文件在iframe下直接下载下来，这个和预期的功能不符合，所以，我们需要对word,ppt,exl等文件进行处理,下面是获取文件后缀名的方法

      //后缀名判断  
        getFileExtendingName (filename) {
    
    
            // 文件扩展名匹配正则
            var reg = /\.[^\.]+$/;
            var matches = reg.exec(filename);
            if (matches) {
    
    
                return matches[0];
            }
            return '';
        },

方式2.kkFileView

kkFileView开源在线预览文件，这个方法是开源的，在文件较大的情况下，加载速度比价慢

kkFileView官网文档：https://kkfileview.keking.cn/zh-cn/docs/production.html

template中

<iframe  :src="previewUrl" class="iframe_left"  v-show="flieShow"  frameborder="0"></iframe>

js代码

//在main.js文件下配置全局文件地址，地址是调用的后端的本机地址，端口8012不需要改
Vue.prototype.$wordUrl="http://*******:8012"
//ressss 是要预览的文件地址
//this.previewUrl 是定义在iframe标签上的路径，
this.previewUrl=this.$wordUrl+'/onlinePreview?url='+encodeURIComponent(BASE64.encode(ressss))

方式3.docx-preview

此方法只针对word文档，相对于kkFileView的好处是，速度要比使用kkFileView快很多

安装依赖

npm i docx-preview --save

在组件中script最开始引入

// 引入docx-preview插件
let docx = require("docx-preview");

当文件后缀为.docx时，执行方法

//查看word文件
	//e为文件地址
       Checkdocx(e){
    
    
            this.$axios.post("*******",{
    
    location:e},{
    
    responseType: "blob"}).then(({
     
     data})=>{
    
    
                    docx.renderAsync(data, this.$refs.file); 
            })
       },

html代码

 <div class="iframe_left"  ref="file"></div>

方式4.文件转ptf

此方法的思路就是传文件路径给后端，后端转成ptf后返回pft路径，在预览之后调用删除接口在删除ptf,因为ptf在iframe标签中可以直接展示。