• Installation dependency

The first step is to install three dependencies.
FileSaver.js is a solution for saving files on the client side, which is very suitable for scenarios where files need to be generated or sensitive information that should not be sent to an external server. xlsx is the necessary library to generate excel.

    // npm
    cnpm install  file-saver xlsx

    cnpm install script-loader

• Download js

Second, we need to download two additional js Blob.js and Export2Excel.js，
Create a new Excel folder under the src directory and put two JS files Blob.js and Export2Excel.js in it.

• Introducing js

The third step is to introduce these two JS files. If there are more business scenarios to export excel, it can be mounted in main.js. Because the author's project has fewer such scenarios, it can be re-referenced in the corresponding components.

    //Export excel
    import Blob from '@/excel/Blob'
    const { export_json_to_excel } = require('@/excel/Export2Excel');

The path of introducing Blob in Export2Excel.js should also be modified accordingly.

require('script-loader!file-saver');
require('./Blob.js'); //Change to Relative Path
require('script-loader!xlsx/dist/xlsx.core.min');

• Usage method

The fourth step is to use the method of export_json_to_excel in the component. The datalist attribute is the data set, which corresponds to the attribute name in filterVal one by one.

//Derived method
  exportExcel() {
  
    require.ensure([], () => {
      // Set the title of the first line of Excel's table
      const tHeader = ['date','strut1 length', 'strut2 length'];
     //  Attributes of'date','struct 1','struct 2'objects
      const filterVal = [ 'date', 'strut1', 'strut2'];
      
      // data set
      const list = this.datalist;  
      const data = this.formatJson(filterVal, list);
      // excel name can be customized
      const excelName = "excel Name";
      export_json_to_excel(tHeader, data, excelName);
    });
  },
  //Formatting json
  formatJson(filterVal, jsonData) {
    return jsonData.map(v => filterVal.map(j => v[j]))
  }

• Adjust the layout

Fifth, if the export excel column width is too narrow, you can customize the column width and modify the properties of ws['!cols'] in the export_json_to_excel method in Export2Excel.js.

export function export_json_to_excel(th, jsonData, defaultTitle) {

    /* original data */

    var data = jsonData;
    data.unshift(th);
    var ws_name = "SheetJS";

    var wb = new Workbook(), ws = sheet_from_array_of_arrays(data);

    // Set the width of each column
    ws['!cols'] = [{wpx:100},{wpx:100},{wpx:100},{wpx:100},{wpx:100},{wpx:100},{wpx:100},{wpx:100}];
    /* add worksheet to workbook */
    wb.SheetNames.push(ws_name);
    wb.Sheets[ws_name] = ws;

    var wbout = XLSX.write(wb, {bookType: 'xlsx', bookSST: false, type: 'binary'});
    var title = defaultTitle || 'list'
    saveAs(new Blob([s2ab(wbout)], {type: "application/octet-stream"}), title + ".xlsx")
}

• summary

This article simply introduces how to realize the simple excle export function. If we want to achieve more complex excle layout or style, we need to study Export2Excel.js and xlsx related api, and then we will have time to add it later.