首页 > 其他分享 >不用第三方库,说说纯js怎么实现读取和导出excel?

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

时间:2024-11-24 18:14:03浏览次数:12  
标签:文件 const 读取 Excel excel js link input data

纯 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 文件,使用第三方库是更有效和实用的方法。 以上代码片段提供了基本的读取和导出功能,可以根据实际需求进行修改和扩展。

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

标签:文件,const,读取,Excel,excel,js,link,input,data
From: https://www.cnblogs.com/ai888/p/18566104

相关文章

  • 不依赖第三方库,说下如何使用js读取pdf?
    不依赖第三方库,纯前端JavaScript读取PDF文件内容比较困难,主要是因为JavaScript本身没有直接访问文件二进制数据的能力(除非用户主动选择文件并通过<inputtype="file">上传)。即使上传了文件,JavaScript也无法直接解析PDF的二进制格式。如果一定要在前端实现不依赖第三......
  • 要实现一个js的持续动画,你有什么比较好的方法?
    实现JS持续动画,有几种比较好的方法,各自优缺点不同,选择哪种取决于动画的复杂度和性能需求:1.requestAnimationFrame(推荐):这是实现高性能动画的首选方法。requestAnimationFrame会在浏览器下次重绘之前执行回调函数,从而与浏览器的渲染周期同步,避免掉帧和卡顿。functionanim......
  • 用js写出死循环的方法有哪些?
    在JavaScript中,创建死循环的方法有很多种,以下是几种常见的方式以及一些细微的差别:1.for循环:无限递增:for(leti=0;i>=0;i++){//这里的代码会一直执行//i会不断增加,直到超出JavaScript最大安全整数,然后变成Infinity,循环依然继续}无限递减(少用)......
  • js异步加载有哪些方案?
    JavaScript异步加载方案有很多,它们的目的都是为了防止JavaScript阻塞HTML解析和渲染,从而提高页面加载速度和用户体验。以下是一些常用的方案:1.<scriptasync>:作用:告诉浏览器立即下载脚本,并在下载完成后尽快执行,不会阻塞HTML解析器。多个async脚本的执行顺序不确定,哪个先下......
  • ssm179大学生创新创业平台项目管理子系统设计与实现+jsp(论文+源码)_kaic
      毕业设计(论文)题目:大学生创新创业平台项目管理子系统的设计与实现      摘 要互联网发展至今,无论是其理论还是技术都已经成熟,而且它广泛参与在社会中的方方面面。它让信息都可以通过网络传播,搭配信息管理工具可以很好地为人们提供服务。针对大学生创新创业......
  • ssm178高校工会提案管理信息系统的设计与开发+jsp(论文+源码)_kaic
     毕业设计(论文)题目:高校工会提案管理信息系统设计与实现摘 要现代经济快节奏发展以及不断完善升级的信息化技术,让传统数据信息的管理升级为软件存储,归纳,集中处理数据信息的管理方式。本高校工会提案管理信息系统就是在这样的大环境下诞生,其可以帮助管理者在短时间内......
  • js弹出层Lightbox图片画廊插件spotlight.js
    在线预览 下载spotlight.js是一款js弹出层Lightbox图片画廊插件。该插件在点击图片的缩略图时,以lightbox的方式弹出图片画廊,支持对图片进行放大、缩小、全屏、前后切换等操作。 使用方法在页面中引入下面的文件。<scripttype="text/javascript"src="spotlight.bu......
  • Fastadmin框架短视频知识付费系统存在任意文件读取漏洞
    免责声明:本文旨在提供有关特定漏洞的深入信息,帮助用户充分了解潜在的安全风险。发布此信息的目的在于提升网络安全意识和推动技术进步,未经授权访问系统、网络或应用程序,可能会导致法律责任或严重后果。因此,作者不对读者基于本文内容所采取的任何行为承担责任。读者在使用本......
  • js+jquery实现贪吃蛇经典小游戏
    项目只使用到了html,css,js,jquery技术点,没有使用游戏框架,下载本地直接双击index.html运行即可体验游戏效果。项目展示进入游戏游戏开始游戏暂停html文件<!DOCTYPEhtml><html><head><metacharset="UTF-8"><metaname="viewport"content="width=devic......
  • 645. 大学生HTML5毕业设计 ―【基于html汽车商城网站页面设计与实现】Bootsrap框架响
    目录一、网页概述二、网页文件三、网页效果四、代码展示1.html2.CSS3.JS五、总结1.简洁实用2.使用方便3.整体性好4.形象突出5.交互式强六、更多推荐欢迎光临仙女的网页世界!这里有各行各业的Web前端网页制作的案例,样式齐全新颖,并持续更新!感谢CSDN,提供了这么......