Because excel export, involved in the project development way is to request before interface, the back-end returns a stream, the front-end currents into excel, and download, now is not the process, is pure front it yourself, realize the thinking is that if a total of 500 data, each request 50 times, in total request 10 times, 10 times after the request, Excel was generated and exported (the framework used for the front end was VUE, and the writing method was realized in accordance with the writing method of VUE), and the promise was added to realize it.

1. Install the plug-in

npm install XLSX

npm install FileSaver

Because many pages will be used to export Excel function, so encapsulate the method to achieve reuse

import XLSX from "xlsx";
import FileSaver from 'file-saver'
export function excelData (id,name) {
  let xlsxParam = { raw: true } 
  let wb = XLSX.utils.table_to_book(document.querySelector(` #${id}`), xlsxParam)
  let wbout = XLSX.write(wb, { bookType: 'xlsx'.bookSST: true.type: 'array' })
  try {
    FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), `${name}.xlsx`)}catch (e) {
    if (typeof console! = ='undefined') {
      console.log(e, wbout)
    }
  }
  return wbout
}
Copy the code

Import {excelData} from “@/excel.js”

In the template


<el-button type="primary"  @click="exportData" size="small"</el-button><el-table
      :data="tableDataAll"
      id="exportId"
      style="display:none;"
    >. Omit the contents of the table</el-table>
Copy the code

Data defines data in data

tableDataAll :[],// Table data
tableDateTotal: [].// Total number of entries in the table
queryData: {// Query conditions
    page:1.size:10
}
Copy the code

In this, el-table is not displayed on the page, but only used as an export excel. For details, you can check the specific implementation of FileSaver online

 exportData(){
    this.tableDataAll = [];
      let p = new Promise((resolve, reject) = > {
        resolve();
      });
    // The number of requests is 50 per request
    let { tableDateTotal } = this.$data;
      let num = 1;
      if (tableDateTotal % 50= =0) {
        num = parseInt(tableDateTotal / 50)}else{
        num = parseInt(tableDateTotal / 50) + 1;
      }
      for (let i = 1; i <= num; i++) {
        // I is the page number of each request
         p = p.then(this.get_request_sth_func(i));
      }
      p.then(() = > {
         // The first argument is to find the table by id, which is equivalent to moving the table contents to Excel, and the second argument is to export the excel name
         excelData("exportId"."Course Viewing data")
        setTimeout(() = >{
            // After exporting Excel, clear the table to avoid the page DOM structure is too large. After all, it is hundreds of data, thousands of data, which translates to a lot of DOM
            this.tableDataAll=[];
        },200)}); }get_request_sth_func(i) {
      return () = > {
        return new Promise((resolve, reject) = > {
          let { queryData } = this.$data;
          queryData.page = i;
          delete queryData.size;
          this.$axios.get("Request address", { ...queryData, size: 50 }).then(res= > {
            this.tableDataAll.push(... res.list); resolve(); }); }); }; },Copy the code

Note that XLSX and FileSaver export principle is to convert the table on the page into Excel, so the key is to use promise to complete all the data after rendering the page into a complete table, and then to implement export.