如何使用JavaScript实现纯前端读取和导出excel文件 |
您所在的位置：网站首页 › 数字图片生成excel文档怎么做 › 如何使用JavaScript实现纯前端读取和导出excel文件 |
如何使用JavaScript实现纯前端读取和导出excel文件
|
js-xlsx 介绍
由SheetJS出品的js-xlsx是一款非常方便的只需要纯JS即可读取和导出excel的工具库，功能强大，支持格式众多，支持xls、xlsx、ods(一种OpenOffice专有表格文件格式)等十几种格式。本文全部都是以xlsx格式为例。 官方github：https://github.com/SheetJS/js-xlsx 本文配套demo在线演示地址：http://demo.haoji.me/2017/02/08-js-xlsx/ 本文同步首发于我的个人博客和博客园。 兼容性兼容性如下图：
dist目录下有很多个JS文件，一般情况下用xlsx.core.min.js就够了，xlsx.full.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下支持）； 获取workbook对象 读取本地文件直接上代码： // 读取本地excel文件 function readWorkbookFromLocalFile(file, callback) { var reader = new FileReader(); reader.onload = function(e) { var data = e.target.result; var workbook = XLSX.read(data, {type: 'binary'}); if(callback) callback(workbook); }; reader.readAsBinaryString(file); } 读取网络文件 // 从网络上读取某个excel文件，url必须同域，否则报错 function readWorkbookFromRemoteFile(url, callback) { var xhr = new XMLHttpRequest(); xhr.open('get', url, true); xhr.responseType = 'arraybuffer'; xhr.onload = function(e) { if(xhr.status == 200) { var data = new Uint8Array(xhr.response) var workbook = XLSX.read(data, {type: 'array'}); if(callback) callback(workbook); } }; xhr.send(); } 详解 workbook Workbook Objectworkbook里面有什么东西呢，我们打印出来看一下：
可以看到，SheetNames里面保存了所有的sheet名字，然后Sheets则保存了每个sheet的具体内容（我们称之为Sheet Object）。每一个sheet是通过类似A1这样的键值保存每个单元格的内容，我们称之为单元格对象（Cell Object）：
每一个Sheet Object表示一张表格，只要不是!开头的都表示普通cell，否则，表示一些特殊含义，具体如下： sheet['!ref']：表示所有单元格的范围，例如从A1到F8则记录为A1:F8； sheet[!merges]：存放一些单元格合并信息，是一个数组，每个数组由包含s和e构成的对象组成，s表示开始，e表示结束，r表示行，c表示列； 等等；关于单元格合并，看懂下面这张图基本上就没问题了：
结果如下：
每一个单元格是一个对象（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 等等 读取workbook普通方法： // 读取 excel文件 function outputWorkbook(workbook) { var sheetNames = workbook.SheetNames; // 工作表名称集合 sheetNames.forEach(name => { var worksheet = workbook.Sheets[name]; // 只能通过工作表名称来获取指定工作表 for(var key in worksheet) { // v是读取单元格的原始值 console.log(key, key[0] === '!' ? worksheet[key] : worksheet[key].v); } }); }根据!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的话会保留单元格合并，但是生成的是代码，而不是，需要对表格进行一些定制时不太方便，所以具体还是要视情况来采用合适的工具类。 这里写一个采用转csv方式输出结果的简单示例，可点击这里查看在线DEMO： function readWorkbook(workbook) { var sheetNames = workbook.SheetNames; // 工作表名称集合 var worksheet = workbook.Sheets[sheetNames[0]]; // 这里我们只读取第一张sheet var csv = XLSX.utils.sheet_to_csv(worksheet); document.getElementById('result').innerHTML = csv2table(csv); } // 将csv转换成简单的表格，会忽略单元格合并，在第一行和第一列追加类似excel的索引 function csv2table(csv) { var html = ''; var rows = csv.split('\n'); rows.pop(); // 最后一行没用的 rows.forEach(function(row, idx) { var columns = row.split(','); columns.unshift(idx+1); // 添加行索引 if(idx == 0) { // 添加列索引 html += ''; for(var i=0; i |
【本文地址】
今日新闻 |
推荐新闻 |