前端实现文件在线预览功能

1、依赖安装

npm install -save mammoth

2、引入使用

import mammoth from "mammoth"

data:return({
   previewContent:null,
   onlineViewVisible:false
}),
methods:{
    onlineView(){
        var url = "http://192.168.0.43:8089/evgis/writeRequest/downloadFileModel"; // 后端文件接口，可以直接在浏览器中下载
        var vm = this;
        var xhr = new XMLHttpRequest();
        xhr.responseType = "arraybuffer";
        xhr.open("get", url, true);
        xhr.onload = function () {
            if (xhr.status == 200) {
                mammoth.convertToHtml({ arrayBuffer: new Uint8Array(xhr.response) })
                .then(res => {
                    vm.$nextTick(() => {
                        vm.previewContent = res.value;
                        vm.onlineViewVisible = true;	// 显示dialog
                    });
                });
            }
        };
        xhr.send();
 	},
}

3、vue页面

<el-dialog
    title="查看行文请示"
    class="onlinePreviewClass"
    :visible.sync="onlineViewVisible"
    :modal="false"
    :modal-append-to-body="false"
>
    <!-- word查看详情 -->
    <div id="wordView" v-html="previewContent"></div>
</el-dialog>

4、less样式

#wordView{	
  /deep/ img{	// 这个样式一定要有，否则当要展示的word中有图片时，会显示异常
    width: 100%;
  } 
}
.onlinePreviewClass{	// 这个样式可以没有
  /deep/ .el-dialog{
    margin-left: 25%;
    width: 65%;
    margin-bottom: 5%;
  }
}

5、成果展示

参考文章 【Vue项目实践】实现在线预览word文件、excel文件