不用第三方库,说说纯js怎么实现读取和导出excel?

纯 JavaScript 读取和导出 Excel,不使用第三方库,主要依赖浏览器提供的 File API 和 Blob API。 对于较简单的 Excel 文件(例如只有文本数据,没有样式、公式等),可以使用以下方法:

1. 读取 Excel 文件 (.csv.tsv 格式):

最简单的方法是处理 CSV(逗号分隔值)或 TSV(制表符分隔值)文件。 这些文件本质上是文本文件,可以用 JavaScript 轻松解析。

const input = document.createElement('input');
input.type = 'file';
input.accept = '.csv, .tsv'; // 可选,限制文件类型

input.onchange = (e) => {
  const file = e.target.files[0];
  const reader = new FileReader();

  reader.onload = (event) => {
    const data = event.target.result;
    const rows = data.split('\n'); // 按行分割
    const tableData = rows.map(row => row.split(file.name.endsWith('.csv') ? ',' : '\t')); // 按逗号或制表符分割

    // 处理 tableData,例如显示在表格中
    console.log(tableData);
  };

  reader.readAsText(file); // 以文本格式读取文件
};

document.body.appendChild(input); // 将 input 元素添加到页面

2. 导出 Excel 文件 (.csv.tsv 格式):

同样,最简单的方法是生成 CSV 或 TSV 格式的文本,然后将其作为文件下载。

function exportToCSV(data, filename = 'data.csv', delimiter = ',') {
  const csvString = data.map(row => row.join(delimiter)).join('\n');
  const blob = new Blob([csvString], { type: 'text/csv;charset=utf-8;' });
  const link = document.createElement('a');
  link.href = URL.createObjectURL(blob);
  link.download = filename;
  link.style.display = 'none'; // 隐藏链接
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}

// 示例数据
const data = [
  ['Name', 'Age', 'City'],
  ['John Doe', '30', 'New York'],
  ['Jane Doe', '25', 'London'],
];

exportToCSV(data); // 导出为 CSV 文件
exportToCSV(data, 'data.tsv', '\t'); // 导出为 TSV 文件

处理更复杂的 Excel 文件 (.xls.xlsx):

对于包含格式、公式、多个工作表等复杂功能的 .xls.xlsx 文件,纯 JavaScript 的处理会非常困难。 你需要解析二进制 Excel 文件格式(例如 BIFF 或 OpenXML),这需要大量的代码和专业知识。 在这种情况下,强烈建议使用第三方库,例如 SheetJS (xlsx.js) 或 Papa Parse,它们可以简化这个过程。

总结:

纯 JavaScript 可以处理简单的 CSV/TSV 文件,但对于复杂的 Excel 文件,使用第三方库是更有效和实用的方法。 以上代码片段提供了基本的读取和导出功能,可以根据实际需求进行修改和扩展。

希望这些信息对您有所帮助!

posted @   王铁柱6  阅读(526)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 终于写完轮子一部分:tcp代理 了,记录一下
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 单元测试从入门到精通
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
点击右上角即可分享
微信分享提示