JS 导出 Excel 文件

JS 导出 Excel 文件

  大家在日常开发的过程中，尤其是B端的项目，很可能会碰到这个需求，将某个表格中的数据，或者是后端传输的数据，作为一个Excel文件进行导出保存。

  我们不可能为每次的突然出现的需求，都重写一次函数，所以我们可以写一个一直可用的公共方法来满足这个“导出”层面的需求，那么我们的函数大概需要注意以下几点：

• 允许兼容大部分Excel格式，例如xslx、xls、csv等
• 数据易于导入
• 自定义的文件名及后缀
• 低版本兼容

  对于以上几点，CSV是一个很好的缺省格式，当使用时未指定格式时，默认使用CSV进行导出，因为xslx、xls可能会有编码问题，它是二进制的文件，而CSV是文本文件，用记事本即可打开。数据导入我选择标题及内部数据拆开，使用数组导入，这样会更加灵活。对于低版本导入，这边选择的是JS中的Blob对象，这是一个二进制大对象，可以用于保存二进制数据并使用a标签模拟点击进行下载，在各大浏览器，Blob都是有很好的兼容性的，所以基本可以放心使用，这意味着不止React等框架，简单的H5C3页面也是可以使用Blob进行Excel导出的，这里把我的代码贴出，希望能对大家有帮助，必要的注释已经额外在其中补充了。

export const excelExport = ({ dataSource = [], titles = [], fileName = 'data', suffix = 'csv' }) => {

  var dataType = "\uFEFF"; //解决乱码问题
  dataType += titles.join(',');  //添加表格的头
  dataType += '\n'; // 以上是导出的Excel文件头部

  // 从dataSource中取出数据存入数据源（dataType）
  dataSource.map(item => dataType += `${item.join(',')}\n`); 

  // 使用Blob，获得二进制实例
  const csvData = new Blob([dataType], {
    type: 'text/csv'
  });

  // 创建a标签
  const _a = document.createElement('a');
  /**
  * URL.createObjectURL() 静态方法会创建一个 DOMString，其中包含一个表示参数中给出的对象的URL
  * 这里相当于为a标签添加了一个下载地址
  */
  _a.href = URL.createObjectURL(csvData);
  // 该a标签点击后会打开新的标签页，人机交互会更加舒适
  _a.target = '_blank';
  // 为a标签规定被下载的超链接目标
  _a.download = `${fileName}.${suffix}`;
  // 将这个制作好的a标签置入body，并在点击之后移除，降低外界感知
  document.body.appendChild(_a);
  _a.click();
  document.body.removeChild(_a);
}

  既然已经展示了我自己的一个导出函数，那么这里也举个例去使用这个函数。这里的情景是一个最简单的导出，需要导出所有的title、data为csv文件。（React代码）

// 这里一般的情况是可以用来保存Table中被选中的项
const [selectedRows, setSelectedRows] = useState<SelectedProps[]>([
  { name: '乔布斯', age: 18 },
  { name: '米卡', age: 21 },
  { name: '起飞', age: 24 },
]);

const column = [
  {
    title: '姓名',
    dataIndex: 'name',
    width: 200,
  }, {
    title: '年龄',
    dataIndex: 'age',
    width: 200,
  }];

// 值得注意的是，由于Excel是二维数据，所以我们的dataSource使用了二维数组去承载数据
excelExport({
  fileName: '表格数据',
  suffix: 'csv',
  titles: column.map(item => item.title),
  dataSource: selectedRows.map(({ name, age }) => [name, age])
})

  这里大家可以根据自己的具体业务逻辑去编写代码，希望对大家有所帮助～