前端自己写导出表格

最新推荐文章于 2025-07-10 11:40:36 发布

原创最新推荐文章于 2025-07-10 11:40:36 发布 · 255 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #react.js

本文介绍了一种使用JavaScript生成CSV文件的方法，包括如何设置表格数据、防止科学计数法显示及解决中文乱码问题，并提供了完整的代码示例。

1，先将列标题写出来并用逗号隔开（注意：每一个逗号就是一个单元格）

2，换行使用 \ n , \ t 是为了不让表格显示科学计数法或者其他格式

例如：

  let str = ``;
      str += `姓名,性别,年龄`;
      str += '\n';
      const s = `${name},,${sex},${age}\t`;
      str += s;
      str += '\n';

3，如果直接是整理好的表格数据就更方便了

let jsonData = [
        {
          column1: '姓名',
          column2: '性别',
          column3: '年龄',
        },
      ];

      //excel表格标题对应的数据字段
      list.map(function (data, index) {
        jsonData.push({
          column1: data.name,
          column2: data.sex,
          column3: data.age,
        });
      });

再定义一个变量接收

  //增加\t为了不让表格显示科学计数法或者其他格式
       let str =``
      for (let i = 0; i < jsonData.length; i++) {
        for (let item in jsonData[i]) {
          str += `${jsonData[i][item]},`;
        }
        str += '\n';
      }

防止中文乱码转译后点击直接下载

     //encodeURIComponent解决中文乱码
      let uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str);
      //通过创建a标签实现
      let link = document.createElement('a');
      link.href = uri;
      //对下载的文件命名
      link.download = '小明体检报告.xlsx';
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);