纯前端js导出Excel文件

向右看齐 2023-01-13 05:44 133阅读 0赞

## 项目中有的时候需要咱们前端来导出Excel表格 ##

还是需要了解怎么做的，当然了最好还是让后端做导出

话不多说，上步骤

1.  安装插件 vue-json-excel
    
    `npm install vue-json-excel -S`
2.  引入 - - - 在需要导出功能的文件中引入
    
    `import ExportJsonExcel from "js-export-excel";`
3.  代码：
    
    template中 - - - 主要是exportExcel方法
    
        <a-button type="primary" icon="download" @click="exportExcel('导出的文件名')">文件导出</a-button>
    
    methods中
    
        // 纯前端导出方法
            exportExcel() { 
              var data = this.dataSource;//选中的数据
              let dataTable = [];
              if (data && data.length > 0) { 
                for (let i in data) { 
                  if (data[i]) { 
                    let obj = { 
                      ID: data[i].id,
                      企业信息: data[i].enterpriseId_dictText,
                      上报年份: data[i].yearNo,
                      上报状态: data[i].reportStatus_dictText,
                      上报时间: data[i].reportDateTime,
                      备注信息: data[i].bzbz,
                    };
                    dataTable.push(obj);
                  }
                }
                c0onsole.log(data,"222")
                this.exportToExcel(dataTable);
              }
            },
            exportToExcel(dataTable) { 
              var option = { };
              option.fileName = "年度定性指标基本信息";
              option.datas = [
                { 
                  sheetData: dataTable,
                  sheetName: "sheet",
                  // sheetFilter: [
                  // "名称11",
                  // "号码11",
                  // "班级11"
                  // ],
                  sheetHeader: [
                    "ID",
                    "企业信息",
                    "上报年份",
                    "上报状态",
                    "上报时间",
                    "备注信息",
                  ]
                }
              ];
              var toExcel = ExportJsonExcel(option);
              toExcel.saveExcel();
            },

这个插件的api文档没有找到，如果哪位找到了可以留个信息哦，学习一下