导出csv表格

最新推荐文章于 2024-05-18 22:08:03 发布

zayzy

最新推荐文章于 2024-05-18 22:08:03 发布

阅读量376

点赞数 10

文章标签：前端 javascript

本文链接：https://blog.csdn.net/weixin_45630345/article/details/135826084

版权

// 获取导出数据并导出
    async exportExcel() {
      const tableDatas = await this.getTableData(this.query, true);
      const props = [];
      this.tableColumns.forEach(item => {
        props.push(item.key);
      });
      const excelData = tableDatas.map(item => {
        const obj = {};
        props.forEach(prop => {
          obj[prop] = item[prop] ? item[prop] : '';
        });
        return obj;
      });
      // 列标题，逗号隔开，每一个逗号就是隔开一个单元格
      const labels = [];
      this.tableColumns.forEach((item) => {
        labels.push(item.title);
      });
      let str = '';
      labels.forEach((item) => {
        str += item + ',';
      });
      str = str.substring(0, str.length - 1) + '\n';
      // 增加\t为了不让表格显示科学计数法或者其他格式
      for (let i = 0; i < excelData.length; i++) {
        for (const key in excelData[i]) {
          str += `${excelData[i][key] + '\t'},`;
        }
        str += '\n';
      }
      // encodeURIComponent解决中文乱码
      const uri =
        'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str);
      // 通过创建a标签实现
      const link = document.createElement('a');
      link.href = uri;
      // 对下载的文件命名
      link.download = '盒子管理列表.csv';
      link.click();
      // 导出后回显页面
      this.getTableData(this.query)
    }