如何在前端(TS、React)上将 CSV 转换并下载到 XLSX

Posted

技术标签:

【中文标题】如何在前端(TS、React)上将 CSV 转换并下载到 XLSX【英文标题】:How to convert and download CSV to XLSX on front end (TS, React) 【发布时间】:2021-06-29 05:58:45 【问题描述】:

在解析数据并通过单独的函数加入后,我已经能够将 JSON 响应转换为 CSV,以便通过下面的函数下载。下面的函数效果很好,可以以我需要的正确日语格式下载 CSV 文件,这就是“编码”对象。我似乎无法弄清楚如何将 JSON 数据转换为 xlsx 文件以在前端以类似的方式下载,或者在前端将以下 CSV 文件转换为 xlsx 以允许将同一文件下载为 xlsx 格式。当我在 excel 中打开 CSV 文件时,我可以简单地保存为 xlsx 文件,它工作得很好。有没有办法通过 JS/TS 在前端为基于 React 的 Web 应用程序创建此功能?我已经对此进行了研究,似乎网上的很多回复都是在 nodeJS 中转换它,但我希望纯粹在前端拥有这种转换和下载功能,因为我正在使用 create react app 并通过一个检索 JSON 数据用于制作 CSV 和 xlsx 文件的 axios 调用。

export const downloadCsv = async (data: string, fileName: string) => 
  const unicodeList = data.split('').map((x, i) => data.charCodeAt(i));
  const sjisArray = Encoding.convert(unicodeList, 
    to: 'SJIS', 
    from: 'UNICODE',
  );
  const blob = new Blob([new Uint8Array(sjisArray)],  type: 'text/csv');
  const url = window.URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.setAttribute('hidden', '');
  a.setAttribute('href', url);
  a.setAttribute('download', `$fileName.csv`);
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
;

【问题讨论】:

【参考方案1】:

您可以使用xlsx 包: 编辑:sandbox

import XLSX from 'xlsx';

  const downloadxls = (data)=>
    let ws = XLSX.utils.json_to_sheet(data);
    let wb = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(wb, ws, "sheet");
    let buf = XLSX.write(wb, bookType:'xlsx', type:'buffer'); // generate a nodejs buffer
    let str = XLSX.write(wb, bookType:'xlsx', type:'binary'); // generate a binary string in web browser
    XLSX.writeFile(wb, `myfilename.xlsx`);


【讨论】:

这个是直接取JSON数据吗?它将如何格式化? @AlexAkshajMody 我猜应该是对象数组 @AlexAkshajMody 我添加了一个代码框示例

以上是关于如何在前端(TS、React)上将 CSV 转换并下载到 XLSX的主要内容,如果未能解决你的问题,请参考以下文章

从0到1使用 Webpack5 + React + TS 构建标准化应用

如何在 Postgresql 上将表格导出为带有标题的 CSV?

如何在 Windows 上将 docker nginx 与 express 和 react 应用程序连接起来

在 iOS 上将数据导出到 XLS(不是通过 CSV)

如何在 iOS 上将文本转换为图像?

如何在 Mac 上将图像转换为文本?