使用vue导出表格数据至Excel表格中，自定义导出的excel表格数据

1.安装，导入

先安装script-loader，xlsx，file-saver；然后将主要的js导出文件加入

npm i script-loader -S
npm i xlsx -S
npm i file-saver -S

excel所需的js文件

2.自定义数据导出

我找到一些文章，但是上面有好多是直接导出当前已渲染的表格中的数据，并不能够自定义导出所有数据

exportExcel() {
  require.ensure([], () => {
    const { export_json_to_excel } = require('@/excel/Export2Excel');
    /* 设置Excel的表格第一行的标题 */
    const tHeader = ['ID','店铺名称','公司'];
    /* filterValue里的值是tableData里对象的属性 */
    const filterValue = ['id','shopname','companyname'];
    
    const list = this.exportList;
    /* 对要导出的数据进行加工，自定义，filterValue中的字段名就是导出到excel中对应的数据键值 */
    for(let i = 0; i < list.length; i++) {
        /* 如要导出名字，则自定义name属性 */
        list[i].name = list[i].lastname + '对的';
    }
    /* 把data里的list存到list */
    const data = this.formatJson(filterValue, list);
    /* 最后一个项为导出的excel名字，可以随便定义 */
    export_json_to_excel(tHeader, data, '列表');
  });
},
formatJson(filterVal, jsonData) {
  return jsonData.map(v => filterVal.map(j => v[j]))
},

单独的设置一个字段来实现导出，这样才不会对原本渲染在页面上的数据造成污染

对于需要进行处理后再进行导出的数据，最好应该重新定义一个字段，这样就不会改变原有的数据，可以直接导出的数据，就直接将字段放入filterValue数组里就可以了

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://fly63.com/article/detial/5893