Realize file download in vue, export Excel table

introduction

Recently, the project encountered a requirement. Every time, the data requested by the back-end needs to be dynamically generated and displayed in the front-end table according to the retrieval conditions, and the button can be clicked to realize the download function of the file and export it to an Excel table. The effect is as follows:

1. Table data display

Table display mainly uses the table form in element-ui to process the returned data into the format required by el-table.

<el-table
  :data="returnData"
  border
  tooltip-effect="dark"
  style="width: 100%;"
  :span-method="objectSpanMethod"
  :height="tableHeight"
  :row-style="{ height: '0px' }"
  :cell-style="{ padding: '1px' }"
  :header-row-style="{ height: '0px' }"
  :header-cell-style="{ padding: '1px' }"
>
  <el-table-column
    prop="name"
    label="要素"
    width="120px"
    fixed
  ></el-table-column>
  <el-table-column prop="level" label="高度" width="60px">
  </el-table-column>
  <el-table-column
    v-for="col in timeList"
    :show-overflow-tooltip="true"
    :prop="col"
    :label="col"
    :key="col"
    width="70px"
  >
  </el-table-column>
</el-table>

2. File download function

The file download function obtains the corresponding file by sending specific request parameters to the backend, and uses ResponseType Blob to realize file download.

2.1 Get the Blob object

In order to download an Excel file, the corresponding Blob object needs to be obtained first. Use axios to send a POST request to the server and get the returned Blob object. A Blob object represents a file-like object of immutable, primitive data. Its data can be read in text or binary format.

downloadFile(data) {
    
    
   axios({
    
    
     method: "post",
     url: `http://${
      
      globeInterfaceIp}/api02/getExcel`,
     data: data,//将数据发送给后端，后端根据数据返回相应文件
     headers: {
    
    
       "Content-Type": "application/json", //客户端告诉服务器请求体数据的格式是JSON
     },
     responseType: "blob", //服务器响应的数据类型为blob
   })
   .then((res) => {
    
    
     const blob = res.data;	//获取返回的Blob对象
     console.log(blob);
   })
   .catch((error) => {
    
    
     console.log(error);
   });
 }

The type here: 'application/vnd.ms-excel' means that the type of data contained in the Blob object is an excel file.

• The back-end code
  is mainly to generate the corresponding Excel file and set the output file type as an excel file.
  

2.2 Realize Excel file download

After the Blob object is obtained, the file can be downloaded. Specifically, create an a tag, set its href attribute to a URL containing a Blob object, and then simulate the behavior of the user clicking the link to trigger the file download function.

downloadFile(data) {
    
    
   axios({
    
    
     method: "post",
     url: `http://${
      
      globeInterfaceIp}/api02/getExcel`,
     data: data,//将数据发送给后端，后端根据数据返回相应文件
     headers: {
    
    
       "Content-Type": "application/json", //客户端告诉服务器请求体数据的格式是JSON
     },
     responseType: "blob", //服务器响应的数据类型为blob
   })
   .then((res) => {
    
    
     const blob = res.data;	//获取Blob对象
     const elink = document.createElement("a");// 创建一个超链接对象实例
     const fileName = this.store.getters.getDate + this.store.getters.getHour + ".xls";//Excel文件名
     elink.download = fileName;// 设置要下载的文件的名称
     elink.href = URL.createObjectURL(blob);//设置a标签的href属性为一个包含Blob对象的URL
     document.body.appendChild(elink);
     elink.click();// 触发超链接的点击事件
     URL.revokeObjectURL(elink.href); // 释放URL 对象
     document.body.removeChild(elink);// 移除超链接对象实例
   })
   .catch((error) => {
    
    
     console.log(error);
   });
 }