使用JavaScript实现纯前端读取excel文件并与后台进行交互

下载SheetJS文件

GitHub下载地址：https://github.com/SheetJS/sheetjs

下载之后打开其中的dist文件目录，能看到其中有xlsx.core.min.js和xlsx.full.min.js两个JS文件，使用其中一个文件就行，一般情况下使用xlsx.core.min.js就可以了。

此处以xlsx.core.min.js为例

具体用法如下：

1.首先在HTML中定义如下

<input type="file" id="inputfilename">   <!--选择文件的input--><button onclick="readWorkbookFromLocalFile()">读取Excel表格</button> <!--读取文件的按钮--><div id="result"></div> <!--显示所读取excel的区域-->

2. 引入JS

<script src="../../js/xlsx.core.min.js"></script>

3. 使用XLSX.read方法读取本地excel文件

 function readWorkbookFromLocalFile() {var file = document.getElementById('inputfilename').files[0];if (file) {var reader = new FileReader();reader.onload = function (e) {var data = e.target.result;var workbook = XLSX.read(data, { //XLSX.read()方法会返回一个workbook 对象type: 'binary'});readWorkbook(workbook);};reader.readAsBinaryString(file);} else {alert('请先选择文件');}}

4. 得到exce文件的csv和json格式

得到csv格式是为了在网页中显示读取到的表格
得到json格式是为了与后台进行数据交互

var json = null;
var csv = '';function readWorkbook(workbook) {var sheetNames = workbook.SheetNames; // 工作表名称集合var worksheet = workbook.Sheets[sheetNames[0]]; // 这里我们只读取第一张sheet的内容csv = XLSX.utils.sheet_to_csv(worksheet); //这里便可以得到csv格式document.getElementById('result').innerHTML = csv2table(csv);  //使用csv2table()函数将其转换为简单的HTML表格，csv2table()函数定义在下一个代码块中json = XLSX.utils.sheet_to_json(worksheet); // 成功转换为json格式后，可能表格中的中文属性名并不是后台所需要的字段名// 那么，就可以使用如下方法，遍历这个json对象，然后对其中的字段名进行修改for (var i in json) {for (var key in json[i]) {if (key == '年龄') {json[i]['age'] = json[i][key] //修改属性名为“age”delete json[i]['年龄'] //删除“年龄”} else if (key == '性别') {if (json[i][key] == '男') {json[i][key] = '1';} else {json[i][key] = '0';}json[i]['sex'] = json[i][key] //修改属性名为“sex”delete json[i]['性别'] //删除“性别”} else if (key == '姓名') {json[i]['username'] = json[i][key] //修改属性名为“username”delete json[i]['姓名'] //删除“姓名”} else if (key == '工号') {json[i]['workId'] = json[i][key] + ''; //修改属性名为“workId”delete json[i]['工号'] //删除“工号”}}}}

5. 将csv转换成简单的表格，会忽略单元格合并，在第一行和第一列追加类似excel的索引

function csv2table(csv) {var html = '<table>';var rows = csv.split('\n');rows.pop(); // 最后一行没用的rows.forEach(function (row, idx) {var columns = row.split(',');columns.unshift(idx + 1); // 添加行索引if (idx == 0) { // 添加列索引html += '<tr>';for (var i = 0; i < columns.length; i++) {html += '<th>' + (i == 0 ? '' : String.fromCharCode(65 + i - 1)) + '</th>';}html += '</tr>';}html += '<tr>';columns.forEach(function (column) {html += '<td>' + column + '</td>';});html += '</tr>';});html += '</table>';return html;
}

到这里就能够实现通过SheetJS在页面中显示从本地读取到的excel文件了，也能够拿到想要与后台进行交互时的标准json数据格式，最后只需要发送Ajax与后台进行交互就OK拉！

参考文档 https://www.cnblogs.com/liuxianan/p/js-excel.html

使用JavaScript实现纯前端读取excel文件并与后台进行交互相关推荐

纯前端读取excel （SheetJS js-xlsx.js框架）
文章目录介绍兼容性使用方法实现思路文件引用代码示例及详解开发注意介绍应项目需求需要做一个纯前端读取excel文件的功能.各方面评估框架后选择了SheetJS的xlsx.js. She ...
如何使用JavaScript实现纯前端读取和导出excel文件（转）
转自小茗同学博客:https://www.cnblogs.com/liuxianan/p/js-excel.html js-xlsx 介绍由SheetJS出品的js-xlsx是一款非常方便的只需要纯 ...
如何使用JavaScript实现纯前端读取和导出excel文件
js-xlsx 介绍由SheetJS出品的js-xlsx是一款非常方便的只需要纯JS即可读取和导出excel的工具库,功能强大,支持格式众多,支持xls.xlsx.ods(一种OpenOffice专 ...
JavaScript纯前端解析Excel文件
最近在开发时候遇到了这样的一个需求:需要在前端通过解析Excel将Excel中的值进行回传填入.我想在实际的开发过程中,肯定大家也会遇到这样的需求,在这介绍一个比较不错的JS工具库:js-xlsx,及 ...
前端读取Excel文件（使用js-xls插件）
前言: 由于项目需要,现在要用户在上传文件之后,页面能实时.即不通过服务器就能读取到excel的表头关键字,就像上传图片实时预览一样,将关键字展示到页面上. 官方例子: 使用js-xls插件,亲测IE ...
前端读取Excel文件，回显页面表格（使用js-xls 插件）
序: 由于项目需求,不使用后台读取Excel数据回显表格,减少前后台交互,降低服务器的压力,使用前台进行操作. 需要用到的js 插件, xlsx.core.min.js 下载地址 demo <! ...
纯前端导出excel文件（包含设置样式）
javaScript读取excel文件中某几行的数据
一.介绍这份代码借鉴了YouTube上的这个视频:https://www.youtube.com/watch?v=OK60UdWyUdE代码,讲解得很棒,让我一个不太懂javasript的小白明白了 ...
C#读取excel文件数据丢失问题
最近在处理C#读取excel文件时碰到了个BT问题,有部分数据读取失败了,翻看了不少资料,终于找到了问题的所在,所以在这里跟大伙分享下: 简要问题分析: 用C#读取excel文件数据时,出现数据丢失现 ...
matlab显示服务器出现意外,Matlab 读取excel文件提示服务器出现意外情况或无法读取问题解决...
1.问题描述: 该错误通常发生在应用函数读取excel文件(后缀xls或xlsx)时. 应用xlsread函数读取提示服务器出现意外情况: 应用importdata读取时提示can't open fi ...