使用vue框架，在线打开 word、excel、pdf 这三种格式的文件的方式。

背景： 用户要求上传的word、excel、pdf 能够在线预览，要求不是很高，能打开查看一下大致内容就行。

准备工具：Vue、Nginx（没有它或者准备一个可以回传文件的后端接口就行，这个在这里用于代理本地文件）、对应的插件。

1、excel 的网页打开

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

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

1.  
   <el-dialog
2.  
   class="unit-dialog"
3.  
   v-if="excelShow"
4.  
   :visible.sync = 'excelShow'
5.  
   :title="dialogtitle"
6.  
   width="1000px"
7.  
   append-to-body
8.  
   :close-on-click-modal="false"
9.  
   top="10vh"
10.  
    >
11.  
    <el-table :data="excelData" style="width: 100%">
12.  
    <el-table-column
13.  
    v-for="(value, key, index) in excelData[2]"
14.  
    :key="index"
15.  
    :prop="key"
16.  
    :label="key"
17.  
    ></el-table-column>
18.  
    </el-table>
19.  
    </el-dialog>

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

1.  
   //图片巡检导出
2.  
   exportDeviceInspect: (params) => {
3.  
   return axios({
4.  
   url: `${baseUrl}/XXXXXXXXXXXXXXXXXXXXX/XXXXXXXXXXXXX`,
5.  
   method: 'post',
6.  
   data: params,
7.  
   responseType: 'arraybuffer',
8.  
   headers: {
9.  
   'Content-Type': 'application/json'
10.  
    }
11.  
    })
12.  
    },

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

1.  
    
2.  
   var XLSX = require("xlsx");//引入xlsx插件
3.  
   imageCheckApi.exportDeviceInspect(params).then((res) => {
4.  
    
5.  
    
6.  
   //excel 在网页打开
7.  
   this.excelShow = true;
8.  
   var data = new Uint8Array(res.data);
9.  
   var excelData = XLSX.read(data, { type: "array" });
10.  
    var sheetNames = excelData.SheetNames; // 工作表名称集合
11.  
    var worksheet = excelData.Sheets[sheetNames[0]];
12.  
    this.excelData = XLSX.utils.sheet_to_json(worksheet);
13.  
    })

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

2、word文档在网页打开

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

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

1.  
   <el-dialog
2.  
   class="unit-dialog"
3.  
   v-if="excelShow"
4.  
   :visible.sync = 'excelShow'
5.  
   :title="dialogtitle"
6.  
   width="1000px"
7.  
   append-to-body
8.  
   :close-on-click-modal="false"
9.  
   top="10vh"
10.  
    >
11.  
     
12.  
    <div v-html="vHtml" ref="file"></div>
13.  
    </el-dialog>

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

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

1.  
   let docx = require('docx-preview');//引入docx插件
2.  
   this.$axios({
3.  
   url: `/Ubuntu.docx`,
4.  
   method: 'get',
5.  
   data: params,
6.  
   responseType: 'blob',
7.  
   headers: {
8.  
   'Content-Type': 'application/json'
9.  
   }
10.  
    }).then((res) => {
11.  
    let that = this;
12.  
    that.excelShow = true;
13.  
    setTimeout(() => {
14.  
    this.$nextTick(() => {
15.  
    //带格式文本
16.  
    docx.renderAsync(res.data, this.$refs.file);
17.  
     
18.  
    })
19.  
    }, 200)
20.  
    })

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

 3、PDF 在网页的打开

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

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

b. 引入页面

import pdf from 'vue-pdf';

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

然后 页面使用组件

1.  
   <el-dialog
2.  
   class="unit-dialog"
3.  
   v-if="excelShow"
4.  
   :visible.sync = 'excelShow'
5.  
   :title="dialogtitle"
6.  
   width="1000px"
7.  
   append-to-body
8.  
   :close-on-click-modal="false"
9.  
   top="10vh"
10.  
    >
11.  
     
12.  
    <pdf src="/pdf.pdf"></pdf>
13.  
    </el-dialog>

效果（也是带格式的）： 

这个 pdf 一般加载的时候都是带有页码或者其他的回调方法，有需要的可以研究研究

本篇文章来至：学新通