1、excel 的网页打开

a.首先? npm? 导入 excel? 处理的插件? ：??npm install --save xlsx

b.用了 elementui 的弹框组件与? 表格组件，来完成内容的展示部分

         <el-dialog 
                class="unit-dialog"
                v-if="excelShow"
                :visible.sync = 'excelShow'
                :title="dialogtitle"
                width="1000px"
                append-to-body
                :close-on-click-modal="false"
                top="10vh"
            >
            <el-table :data="excelData" style="width: 100%">
                <el-table-column
                    v-for="(value, key, index) in excelData[2]"
                    :key="index"
                    :prop="key"
                    :label="key"
                ></el-table-column>
            </el-table>
        </el-dialog>

c. 提交请求，获取后端返回的二进制文件流，请注意接口请求的response Type 类型为?arraybuffer，如代码：

//图片巡检导出
exportDeviceInspect: (params) => {
        return axios({
            url: `${baseUrl}/XXXXXXXXXXXXXXXXXXXXX/XXXXXXXXXXXXX`,
            method: 'post',
            data: params,
            responseType: 'arraybuffer',
            headers: {
                'Content-Type': 'application/json'
            }
        })
    },

然后调用接口，对返回参数进行解析与渲染

           
               var XLSX = require("xlsx");//引入xlsx插件
             imageCheckApi.exportDeviceInspect(params).then((res) => {
                

                //excel 在网页打开
                this.excelShow = true;
                var data = new Uint8Array(res.data);
                var excelData = XLSX.read(data, { type: "array" });
                var sheetNames = excelData.SheetNames; // 工作表名称集合
                var worksheet = excelData.Sheets[sheetNames[0]];
                this.excelData = XLSX.utils.sheet_to_json(worksheet);
            })

效果图（样式没精修，将就看看）：

2、word文档在网页打开

a.? 引入docx 插件??npm i docx-preview

b.在上面弹窗的基础上把表格换成普通的 div标签，然后绑定一个 ref? 叫 file?

        <el-dialog 
                class="unit-dialog"
                v-if="excelShow"
                :visible.sync = 'excelShow'
                :title="dialogtitle"
                width="1000px"
                append-to-body
                :close-on-click-modal="false"
                top="10vh"
            >
           
            <div v-html="vHtml" ref="file"></div>
        </el-dialog>

c.为了方便看，我把请求写到方法里面了，这里用的是type 是? blob? 二进制流，请注意哦！

备注：这里的地址跟? excel 的地址是有区别的，excel是我们后端正常的返回地址，这里用的是我自己定义的地址，用了nginx转发，拿到的是我本地的文档，具体转发有不懂的可以评论找我，这里不讲了，实际效果是一样的。

         let docx = require('docx-preview');//引入docx插件
         this.$axios({
                url: `/Ubuntu.docx`,
                method: 'get',
                data: params,
                responseType: 'blob',
                headers: {
                    'Content-Type': 'application/json'
                }
            }).then((res) => {
                let that = this;
                that.excelShow = true;
                setTimeout(() => {
                    this.$nextTick(() => {
                        //带格式文本
                        docx.renderAsync(res.data, this.$refs.file);
                        
                    })
                }, 200)
         })

?d.效果图（这个插件是带格式的，我觉得挺好的）：

?3、PDF 在网页的打开

这个更简单了，这个插件就是一个封装好的组件，你只需要传入对应参数就行

a. 导入组件? npm install --save vue-pdf

b. 引入页面

import pdf from 'vue-pdf';

components: { pdf}, // components? 记得加上组件哦

然后页面使用组件

        <el-dialog 
                class="unit-dialog"
                v-if="excelShow"
                :visible.sync = 'excelShow'
                :title="dialogtitle"
                width="1000px"
                append-to-body
                :close-on-click-modal="false"
                top="10vh"
            >
           
            <pdf src="/pdf.pdf"></pdf>
        </el-dialog>

效果（也是带格式的）：?