转自小茗同学博客：https://www.cnblogs.com/liuxianan/p/js-excel.html

js-xlsx 介绍

由SheetJS出品的js-xlsx是一款非常方便的只需要纯JS即可读取和导出excel的工具库，功能强大，支持格式众多，支持xls、xlsx、ods(一种OpenOffice专有表格文件格式)等十几种格式。本文全部都是以xlsx格式为例。

1.1. 兼容性

兼容性如下图：

1.2. 如何使用

dist目录下有很多个JS文件，一般情况下用xlsx.core.min.js就够了，xlsx.full.min.js则是包含了所有功能模块。

直接script标签引入即可：

  1. <script type="text/javascript" src="./js/xlsx.core.min.js"></script>

读取excel

读取excel主要是通过XLSX.read(data, {type: type});方法来实现，返回一个叫WorkBook的对象，type主要取值如下：

  • base64: 以base64方式读取；
  • binary: BinaryString格式(byte n is data.charCodeAt(n))
  • string: UTF8编码的字符串；
  • buffer: nodejs Buffer；
  • array: Uint8Array，8位无符号数组；
  • file: 文件的路径（仅nodejs下支持）；

2.1. 获取workbook对象

2.1.1. 读取本地文件

直接上代码：

  1. // 读取本地excel文件
  2. function readWorkbookFromLocalFile(file, callback) {
  3.     var reader = new FileReader();
  4.     reader.onload = function(e) {
  5.         var data = e.target.result;
  6.         var workbook = XLSX.read(data, {type: 'binary'});
  7.         if(callback) callback(workbook);
  8.     };
  9.     reader.readAsBinaryString(file);
  10. }

2.1.2. 读取网络文件

  1. // 从网络上读取某个excel文件，url必须同域，否则报错
  2. function readWorkbookFromRemoteFile(url, callback) {
  3.     var xhr = new XMLHttpRequest();
  4.     xhr.open('get', url, true);
  5.     xhr.responseType = 'arraybuffer';
  6.     xhr.onload = function(e) {
  7.         if(xhr.status == 200) {
  8.             var data = new Uint8Array(xhr.response)
  9.             var workbook = XLSX.read(data, {type: 'array'});
  10.             if(callback) callback(workbook);
  11.         }
  12.     };
  13.     xhr.send();
  14. }

2.2. 详解 workbook

2.2.1. Workbook Object

workbook里面有什么东西呢，我们打印出来看一下：

可以看到，SheetNames里面保存了所有的sheet名字，然后Sheets则保存了每个sheet的具体内容（我们称之为Sheet Object）。每一个sheet是通过类似A1这样的键值保存每个单元格的内容，我们称之为单元格对象（Cell Object）：

2.2.2. Sheet Object

每一个Sheet Object表示一张表格，只要不是!开头的都表示普通cell，否则，表示一些特殊含义，具体如下：

  • sheet['!ref']：表示所有单元格的范围，例如从A1到F8则记录为A1:F8；
  • sheet[!merges]：存放一些单元格合并信息，是一个数组，每个数组由包含s和e构成的对象组成，s表示开始，e表示结束，r表示行，c表示列；
  • 等等；

关于单元格合并，看懂下面这张图基本上就没问题了：

结果如下：

2.2.3. 单元格对象

每一个单元格是一个对象（Cell Object），主要有t、v、r、h、w等字段（详见这里）：

  • t：表示内容类型，s表示string类型，n表示number类型，b表示boolean类型，d表示date类型，等等
  • v：表示原始值；
  • f：表示公式，如B2+B3；
  • h：HTML内容
  • w：格式化后的内容
  • r：富文本内容rich text
  • 等等

2.2.4. 读取workbook

普通方法：

  1. // 读取 excel文件
  2. function outputWorkbook(workbook) {
  3.     var sheetNames = workbook.SheetNames; // 工作表名称集合
  4.     sheetNames.forEach(name => {
  5.         var worksheet = workbook.Sheets[name]; // 只能通过工作表名称来获取指定工作表
  6.         for(var key in worksheet) {
  7.             // v是读取单元格的原始值
  8.             console.log(key, key[0] === '!' ? worksheet[key] : worksheet[key].v);
  9.         }
  10.     });
  11. }

根据!ref确定excel的范围，再根据!merges确定单元格合并（如果有），最后输出整个table，比较麻烦，幸运的是，插件自身已经写好工具类XLSX.utils给我们直接使用，无需我们自己遍历，工具类输出主要包括如下：

有些不常用，常用的主要是：

  • XLSX.utils.sheet_to_csv：生成CSV格式
  • XLSX.utils.sheet_to_txt：生成纯文本格式
  • XLSX.utils.sheet_to_html：生成HTML格式
  • XLSX.utils.sheet_to_json：输出JSON格式

常用的主要是sheet_to_csv或者sheet_to_html，转csv的话会忽略格式、单元格合并等信息，所以复杂表格可能不适用。转html的话会保留单元格合并，但是生成的是<html></html>代码，而不是<table></table>，需要对表格进行一些定制时不太方便，所以具体还是要视情况来采用合适的工具类。

这里写一个采用转csv方式输出结果的简单示例，可点击这里查看在线DEMO：

  1. function readWorkbook(workbook)
  2. {
  3.     var sheetNames = workbook.SheetNames; // 工作表名称集合
  4.     var worksheet = workbook.Sheets[sheetNames[0]]; // 这里我们只读取第一张sheet
  5.     var csv = XLSX.utils.sheet_to_csv(worksheet);
  6.     document.getElementById('result').innerHTML = csv2table(csv);
  7. }
  9. // 将csv转换成简单的表格，会忽略单元格合并，在第一行和第一列追加类似excel的索引
  10. function csv2table(csv)
  11. {
  12.     var html = '<table>';
  13.     var rows = csv.split('\n');
  14.     rows.pop(); // 最后一行没用的
  15.     rows.forEach(function(row, idx) {
  16.         var columns = row.split(',');
  17.         columns.unshift(idx+1); // 添加行索引
  18.         if(idx == 0) { // 添加列索引
  19.             html += '<tr>';
  20.             for(var i=0; i<columns.length; i++) {
  21.                 html += '<th>' + (i==0?'':String.fromCharCode(65+i-1)) + '</th>';
  22.             }
  23.             html += '</tr>';
  24.         }
  25.         html += '<tr>';
  26.         columns.forEach(function(column) {
  27.             html += '<td>'+column+'</td>';
  28.         });
  29.         html += '</tr>';
  30.     });
  31.     html += '</table>';
  32.     return html;
  33. }

导出excel

导出分为2种，一种是基于现有excel修改，一种是全新生成，前者比较简单，我们这里着重讲后者。

3.1. 自己手写代码生成

导出excel文件，主要是如何生成一个sheet，我们这里写一个最简单的csv转excel示例：

  1. // csv转sheet对象
  2. function csv2sheet(csv) {
  3.     var sheet = {}; // 将要生成的sheet
  4.     csv = csv.split('\n');
  5.     csv.forEach(function(row, i) {
  6.         row = row.split(',');
  7.         if(i == 0) sheet['!ref'] = 'A1:'+String.fromCharCode(65+row.length-1)+(csv.length-1);
  8.         row.forEach(function(col, j) {
  9.             sheet[String.fromCharCode(65+j)+(i+1)] = {v: col};
  10.         });
  11.     });
  12.     return sheet;
  13. }
  15. // 将一个sheet转成最终的excel文件的blob对象，然后利用URL.createObjectURL下载
  16. function sheet2blob(sheet, sheetName) {
  17.     sheetName = sheetName || 'sheet1';
  18.     var workbook = {
  19.         SheetNames: [sheetName],
  20.         Sheets: {}
  21.     };
  22.     workbook.Sheets[sheetName] = sheet;
  23.     // 生成excel的配置项
  24.     var wopts = {
  25.         bookType: 'xlsx', // 要生成的文件类型
  26.         bookSST: false, // 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性
  27.         type: 'binary'
  28.     };
  29.     var wbout = XLSX.write(workbook, wopts);
  30.     var blob = new Blob([s2ab(wbout)], {type:"application/octet-stream"});
  31.     // 字符串转ArrayBuffer
  32.     function s2ab(s) {
  33.         var buf = new ArrayBuffer(s.length);
  34.         var view = new Uint8Array(buf);
  35.         for (var i=0; i!=s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
  36.         return buf;
  37.     }
  38.     return blob;
  39. }

拿到上面的blob对象就可以直接下载了，参考我之前在JS弹出下载对话框里面封装好的openDownloadDialog方法：

  1. /**
  2.  * 通用的打开下载对话框方法，没有测试过具体兼容性
  3.  * @param url 下载地址，也可以是一个blob对象，必选
  4.  * @param saveName 保存文件名，可选
  5.  */
  6. function openDownloadDialog(url, saveName)
  7. {
  8.     if(typeof url == 'object' && url instanceof Blob)
  9.     {
  10.         url = URL.createObjectURL(url); // 创建blob地址
  11.     }
  12.     var aLink = document.createElement('a');
  13.     aLink.href = url;
  14.     aLink.download = saveName || ''; // HTML5新增的属性，指定保存文件名，可以不要后缀，注意，file:///模式下不会生效
  15.     var event;
  16.     if(window.MouseEvent) event = new MouseEvent('click');
  17.     else
  18.     {
  19.         event = document.createEvent('MouseEvents');
  20.         event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
  21.     }
  22.     aLink.dispatchEvent(event);
  23. }

所以，最终下载实现如下：

  1. // 传入csv，执行后就会弹出下载框
  2. function exportExcel(csv) {
  3.     var sheet = csv2sheet(csv);
  4.     var blob = sheet2blob(sheet);
  5.     openDownloadDialog(blob, '导出.xlsx')；
  6. }

3.2. 利用官方工具类生成

其实上面这些代码都不需要我们手写，官方已经提供好了现成的工具类给我们使用，主要包括：

  • aoa_to_sheet: 这个工具类最强大也最实用了，将一个二维数组转成sheet，会自动处理number、string、boolean、date等类型数据；
  • table_to_sheet: 将一个table dom直接转成sheet，会自动识别colspan和rowspan并将其转成对应的单元格合并；
  • json_to_sheet: 将一个由对象组成的数组转成sheet；

aoa_to_sheet示例：

  1. var aoa = [
  2.     ['姓名', '性别', '年龄', '注册时间'],
  3.     ['张三', '男', 18, new Date()],
  4.     ['李四', '女', 22, new Date()]
  5. ];
  6. var sheet = XLSX.utils.aoa_to_sheet(aoa);
  7. openDownloadDialog(sheet2blob(sheet), '导出.xlsx');

table_to_sheet就更简单了，直接XLSX.utils.table_to_sheet($('table')[0])即可；

3.3. 处理单元格合并

一般来说，前端生成excel而不是csv最主要目的都是为了解决csv不能实现单元格合并的问题，要不然直接导出csv文件就好了，何必引入几百kb的插件。

假设我们要生成如下格式的excel文件，其中A1-C1进行单元格合并：

代码如下：

  1. var aoa = [
  2.     ['主要信息', null, null, '其它信息'], // 特别注意合并的地方后面预留2个null
  3.     ['姓名', '性别', '年龄', '注册时间'],
  4.     ['张三', '男', 18, new Date()],
  5.     ['李四', '女', 22, new Date()]
  6. ];
  7. var sheet = XLSX.utils.aoa_to_sheet(aoa);
  8. sheet['!merges'] = [
  9.     // 设置A1-C1的单元格合并
  10.     {s: {r: 0, c: 0}, e: {r: 0, c: 2}}
  11. ];
  12. openDownloadDialog(sheet2blob(sheet), '单元格合并示例.xlsx');

需要注意的地方就是被合并的单元格要用null预留出位置，否则后面的内容（本例中是第四列其它信息）会被覆盖。

3.4. 自定义样式

普通版本不支持定义字体、颜色、背景色等，有这个功能需要的可以使用pro版，好像是要收费的，因为官网没看到下载地址。

如何使用JavaScript实现纯前端读取和导出excel文件（转）的更多相关文章

  1. 如何使用JavaScript实现纯前端读取和导出excel文件

    js-xlsx 介绍 由SheetJS出品的js-xlsx是一款非常方便的只需要纯JS即可读取和导出excel的工具库,功能强大,支持格式众多,支持xls.xlsx.ods(一种OpenOffice专 ...

  2. 纯前端实现数据导出excel文件

    一  安装依赖 npm install -S file-saver xlsx npm install -D script-loader 二 新建文件夹 在网上百度引入即可 三 在main.js中引入 ...

  3. 如何使用JavaScript实现前端导入和导出excel文件

    一.SpreadJS 简介 SpreadJS 是一款基于 HTML5 的纯 JavaScript 电子表格和网格功能控件,以“高速低耗.纯前端.零依赖”为产品特色,可嵌入任何操作系统,同时满足 .NE ...

  4. 前端必读：如何在 JavaScript 中使用SpreadJS导入和导出 Excel 文件

    JavaScript在前端领域占据着绝对的统治地位,目前更是从浏览器到服务端,移动端,嵌入式,几乎所有的所有的应用领域都可以使用它.技术圈有一句很经典的话"凡是能用JavaScript实现的 ...

  5. php读取和导出Excel文件

    require 'vendor/PHPExcel/PHPExcel.php';require 'vendor/PHPExcel/PHPExcel/IOFactory.php'; public func ...

  6. js 实现纯前端将数据导出excel

    通过将json遍历进行字符串拼接,将字符串输出到csv文件,输出的文件不会再是html类型的文件而是真正的csv文件,代码如下 <html> <head> <p styl ...

  7. js 实现纯前端将数据导出excel两种方式，亲测有效

    由于项目需要,需要在不调用后台接口的情况下,将json数据导出到excel表格,兼容chrome没问题,其他还没有测试过 通过将json遍历进行字符串拼接,将字符串输出到csv文件,输出的文件不会再是 ...

  8. [NPOI2.0] 使用NPOI读取和导出Excel文件

    先来说下一直使用的 Microsoft.Office.Interop.Excel ,在系统正式使用时遇到的问题 1:Excel读取数据BUG 由于使用Microsoft.Office.Interop. ...

  9. 如何使用JavaScript导入和导出Excel文件

    本文由葡萄城技术团队于原创并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. JavaScript是一个涵盖多种框架.直译式.可以轻松自定义客户端的脚本 ...

随机推荐

  1. SSM整合小结

    基本环境搭建 pom依赖 <dependencies> <!--Junit--> <dependency> <groupId>junit</gro ...

  2. Java 面向对象（十四）

    反射 反射是框架设计的灵魂 一.类的加载时机 当程序要使用某个类时,如果该类还未被加载到内存中,系统会通过加载,连接,初始化三步来实现对这个类进行初始化. 加载 :就是指将class文件读入内存,并为 ...

  3. 小福bbs——项目需求分析

    # 一.简单了解 这个作业属于哪个课程 班级链接 这个作业要求在哪里 作业要求的链接 团队名称 小福bbs 这个作业的目标 第一个版本,根据项目预期情况形成 作业的正文 小福bbs--项目需求分析 其 ...

  4. Python自学笔记（九）

    #类 #类的创建 :class类名 + 冒号,后面语句要缩进 #类的属性创建:通过赋值语句(即定义“是怎样的”) #实例方法的创建:def + 方法名(self) #方法具体的执行过程,即定义“能做什 ...

  5. 利用XMl标签定义动画

    渐变透明度动画 <?xml version="1.0" encoding="utf-8"?> <alpha xmlns:android=&qu ...

  6. Time类

    public class Demo_Timer { /** * @param args * 计时器 * @throws InterruptedException */ public static vo ...

  7. 阶段5 3.微服务项目【学成在线】_day18 用户授权_14-细粒度授权-我的课程细粒度授权-需求分析

    3.3 我的课程细粒度授权 3.3.1 需求分析 1.我的课程查询,细粒度授权过程如下: 1)获取当前登录的用户Id 2)得到用户所属教育机构的Id 3)查询该教学机构下的课程信息 最终实现了用户只允 ...

  8. python之json处理

    JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.它基于JavaScript(Standard ECMA-262 3rd Edition - Decembe ...

  9. PPT做交互效果

    1 做交互效果(点击一个按钮,弹出某个框或者跳转到某个页面)其实就是若干个PPT页面,利用给按钮增加超链接或者动作 达到点击一个按钮 跳转到另外一个PPT的效果. 2 选择一个形状组件(或者其他组件) ...

  10. 个人总结2019 ASP.NET面试题

    1.什么是面向对象? 面向对象就是把一个人或事务的属性,比如名字,年龄这些定义在一个实体类里面.存和取的时候直接使用存取实体类就把这个人的名字,年龄这些全部存了,这个实体类就叫对象,这种思想就叫面向对 ...