关于纯前端excel上传、下载功能

工作项目中，表格的上传下载基本都是调取后端接口，把处理逻辑放在后端进行处理。那么纯前端js代码实现excel的上传下载是否可行？其实代码逻辑很简单，不过需要引用xlsx.js进行处理。下面是我自己写的一个关于国际化excel文件的上传下载功能。

HTML代码片段

<input type="file" onchange="dowmlodeExcel(this)">
<script type="text/javascript" src="https://unpkg.com/xlsx/dist/xlsx.core.min.js"></script>

获取本地excel表格，转化成数据，再进行数据整理

function dowmlodeExcel(source) {let file = source.files[0];let readExcelView = new FileReader();readExcelView.readAsBinaryString(file)  // 读取文件readExcelView.onload = (e) => {let data = e.target.result  // 获取传递的表格// 以二进制流方式读取到整份的excel 表格对象let workbook = XLSX.read(data, {type: 'binary'})let sheetData = []for (var sheet in workbook.Sheets) {  // 遍历每张表读取if (workbook.Sheets.hasOwnProperty(sheet)) {  // 判断文件是否是 excel 文件// 对表格的内容进行处理sheetData = sheetData.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]));break;}}// 补全未翻译的（重复中文）sheetData.map((item) => {const index = sheetData.findIndex((k) => (k.Chinese === item.Chinese) &&  k.English)if (index > 0) {item.English = sheetData[index].English}return item})// 下载数据变更后的文件到本地downLoadExcel(sheetData,'翻译')}}

把整理过后的数据生成新的excel，并下载在本地

function downLoadExcel(data, fileName){//定义表头let str = 'key,Chinese,English\n';//增加\t为了不让表格显示科学计数法或者其他格式for(let i = 0 ; i < data.length ; i++ ){for(let item in data[i]){str+=`${data[i][item] + '\t'},`;          }str+='\n';}//解决中文乱码问题let url = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str);//创建a标签let link = document.createElement("a");link.href = url;link.download = `${fileName || '表格数据'}.xls`;document.body.appendChild(link);link.click();// 移除a标签document.body.removeChild(link);
}

以上的代码就可以完成一个简单的excel表格上传、下载的功能。接下来就找一个本地excel表格试一试吧！

关于纯前端excel上传、下载功能相关推荐

纯前端实现上传下载（后端存取json）xlsx
后端存取json,通过 xlsx 依赖转换上传:前端通过上传模板文件将上传组件(upload)返回的文本流解析成json数据,传给后端下载:获取后端json转换成文件格式下载依赖 npm ins ...
shp文件纯前端的上传、解析、编辑、下载
本文主要讲述一种体量较小的shp文件纯前端的上传.解析.编辑.下载的技术流程,适用于要素量少的shp文件修改操作. 准备工作下载一下几个包,详细用法请见结尾参考. npm install file- ...
项目_功能模块_基于Spring Boot的文件上传下载功能的设计与实现
文章目录基于Spring Boot的文件上传下载功能模块的设计与实现 1.前言 2.技术栈 3.关键源码 4.实现效果 4.1.登录 4.2.文件列表 4.3.上传文件测试 4.3.1.测试图片 4 ...
教你如何实现c#文件上传下载功能
简单介绍一下c#文件上传下载功能实现. NuGet 安装SqlSugar Model文件下新建 DbContext 类 public class DbContext {public DbContext ...
JavaWeb实现文件上传下载功能实例解析
转:http://www.cnblogs.com/xdp-gacl/p/4200090.html JavaWeb实现文件上传下载功能实例解析在Web应用系统开发中,文件上传和下载功能是非常常用的功能 ...
文件的上传下载功能的实现（包括进度条）[telerik控件]
文件的上传下载功能的实现(包括进度条) 1.准备工作首先我们需要Telerik控件,数据库,上传文件文件夹. Telerik控件: RadUpload.RadProgressManager.RadP ...
ssm框架验证码图片加载不出_基于SSM框架的文件图片上传/下载功能实现
前一段时间很多做毕业设计的同学问:如何写图片和文件的上传下载功能,今天正好有时间,所以就做了一个案例,详细的讲解这个功能. 框架结构: 对于很多做过开发的而言,上传功能肯定都用过,而且用到的场景很多, ...
SpringBoot2.x集成mongoDB4.0实现音频文件的上传下载功能
最近项目要用到文件上传下载功能,但是这些音频文件都很大,放到关系型数据库就不太好了(其实是太不好了),占内存不说还慢的要死,所以考虑使用分布式文件系统或者非关系型数据库来实现.由于分布式文件系统没有用 ...
java歌曲上传下载功能实现,Java上传下载功能的实现详解
上传下载是很简单的功能,但是每次用的时候还是要查,这里整理一下前台: 提交主要注意: enctype="multipart/form-data" method="po ...

关于纯前端excel上传、下载功能

关于纯前端excel上传、下载功能相关推荐

最新文章

热门文章