SheetJS的使用（js-xlsx）

使用纯前端的方式实现对excel表格的读取和导出功能

github地址：https://github.com/SheetJS/js-xlsx

学习地址：https://www.jianshu.com/p/74d405940305

1.导入功能实现

下载js-xlsx到dist复制出xlsx.full.min.js引入到页面中
然后通过FileReader对象读取文件利用js-xlsx转成json数据

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script src="http://oss.sheetjs.com/js-xlsx/xlsx.full.min.js"></script></head><body><input type="file"onchange="importf(this)" /><div id="demo"></div><script>/*FileReader共有4种读取方法：1.readAsArrayBuffer(file)：将文件读取为ArrayBuffer。2.readAsBinaryString(file)：将文件读取为二进制字符串3.readAsDataURL(file)：将文件读取为Data URL4.readAsText(file, [encoding])：将文件读取为文本，encoding缺省值为'UTF-8'*/var wb;//读取完成的数据var rABS = false; //是否将文件读取为二进制字符串function importf(obj) {//导入if(!obj.files) {return;}var f = obj.files[0];var reader = new FileReader();reader.onload = function(e) {var data = e.target.result;if(rABS) {wb = XLSX.read(btoa(fixdata(data)), {//手动转化type: 'base64'});} else {wb = XLSX.read(data, {type: 'binary'});}//wb.SheetNames[0]是获取Sheets中第一个Sheet的名字//wb.Sheets[Sheet名]获取第一个Sheet的数据document.getElementById("demo").innerHTML= JSON.stringify( XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]) );};if(rABS) {reader.readAsArrayBuffer(f);} else {reader.readAsBinaryString(f);}}function fixdata(data) { //文件流转BinaryStringvar o = "",l = 0,w = 10240;for(; l < data.byteLength / w; ++l) o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w, l * w + w)));o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w)));return o;}</script></body></html>

2.导出功能的实现

同样引入js-xlsx

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script src="http://oss.sheetjs.com/js-xlsx/xlsx.full.min.js"></script>
</head><body><button onclick="downloadExl(jsono)">导出</button><!--以下a标签不需要内容--><a href="" download="这里是下载的文件名.xlsx" id="hf"></a><script>var jsono = [{ //测试数据"保质期临期预警(天)": "adventLifecycle","商品标题": "title","建议零售价": "defaultPrice","高(cm)": "height","商品描述": "Description","保质期禁售(天)": "lockupLifecycle","商品名称": "skuName","商品简介": "brief","宽(cm)": "width","阿达": "asdz","货号": "goodsNo","商品条码": "skuNo","商品品牌": "brand","净容积(cm^3)": "netVolume","是否保质期管理": "isShelfLifeMgmt","是否串号管理": "isSNMgmt","商品颜色": "color","尺码": "size","是否批次管理": "isBatchMgmt","商品编号": "skuCode","商品简称": "shortName","毛重(g)": "grossWeight","长(cm)": "length","英文名称": "englishName","净重(g)": "netWeight","商品分类": "categoryId","这里超过了": 1111.0,"保质期(天)": "expDate"}];var tmpDown; //导出的二进制对象function downloadExl(json, type) {var tmpdata = json[0];json.unshift({});var keyMap = []; //获取keys//keyMap =Object.keys(json[0]);for (var k in tmpdata) {keyMap.push(k);json[0][k] = k;}var tmpdata = [];//用来保存转换好的json json.map((v, i) => keyMap.map((k, j) => Object.assign({}, {v: v[k],position: (j > 25 ? getCharCol(j) : String.fromCharCode(65 + j)) + (i + 1)}))).reduce((prev, next) => prev.concat(next)).forEach((v, i) => tmpdata[v.position] = {v: v.v});var outputPos = Object.keys(tmpdata); //设置区域,比如表格从A1到D10var tmpWB = {SheetNames: ['mySheet'], //保存的表标题Sheets: {'mySheet': Object.assign({},tmpdata, //内容{'!ref': outputPos[0] + ':' + outputPos[outputPos.length - 1] //设置填充区域})}};tmpDown = new Blob([s2ab(XLSX.write(tmpWB, {bookType: (type == undefined ? 'xlsx':type),bookSST: false, type: 'binary'}//这里的数据是用来定义导出的格式类型))], {type: ""}); //创建二进制对象写入转换好的字节流var href = URL.createObjectURL(tmpDown); //创建对象超链接document.getElementById("hf").href = href; //绑定a标签document.getElementById("hf").click(); //模拟点击实现下载setTimeout(function() { //延时释放URL.revokeObjectURL(tmpDown); //用URL.revokeObjectURL()来释放这个object URL}, 100);}function s2ab(s) { //字符串转字符流var buf = new ArrayBuffer(s.length);var view = new Uint8Array(buf);for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;return buf;}// 将指定的自然数转换为26进制表示。映射关系：[0-25] -> [A-Z]。function getCharCol(n) {let temCol = '',s = '',m = 0while (n > 0) {m = n % 26 + 1s = String.fromCharCode(m + 64) + sn = (n - m) / 26}return s}</script>
</body></html>

SheetJS---(js-xlsx)相关推荐

vue 使用js XLSX读取 excel 转换日期格式
前言大家好! 今天遇到了vue 使用js XLSX读取 excel 转换日期格式的问题,做个记录问题今天写excel文件上传时,遇到了时间格式没有正确转换的问题解决方式借用了项目中读取 e ...
vue js xlsx 读取本地 excel
最近在写一个人力资源管理系统,主要目的是将本地的excel文件读取解析,将有效数据传到后台. 下文介绍流程,文末附有参考文章. 1.安装npm包xlsx yarn add xlsx 2.结合上传组件和 ...
js xlsx自定义样式导出
使用的技术 xlsx 用于解析和编写各种电子表格.比如excel.csv.html文件 xlsx-style 为xlsx库添加样式,比如字体颜色,大小,行宽等.但是只支持xlsx.xlsm.xlsb格 ...
JS+xlsx.js实现录入excel表格数据随机点名
娱乐小项目,做教学上课随机抽人用,因为班级较多,所以不想用数组的方式来进行存储,将excel表格的数据直接转换为JSON对象格式,再循环存入数组,通过数组下标随机数的方式,实现这样的一个效果. HTM ...
js xlsx获取表头
getHeaderRow(sheet) {const headers = []/* sheet['!ref']表示所有单元格的范围,例如从A1到F8则记录为 A1:F8*/const range = ...
大前端知识点和商业应用总结
参考:http://www.itcast.cn/subject/webzly/?jingjia-02-chuanzhi-qianduan-xin-pc-html5%2520canvasjiaochen ...
纯前端读取excel （SheetJS js-xlsx.js框架）
文章目录介绍兼容性使用方法实现思路文件引用代码示例及详解开发注意介绍应项目需求需要做一个纯前端读取excel文件的功能.各方面评估框架后选择了SheetJS的xlsx.js. She ...
xlsx.js 实现前端 table 数据导出并下载为 excel
目录需求 ① 加载 xlsx.js ② 引入 JS 代码 ③ 按钮绑定事件结果附源码需求在写一个 SSM 项目的时候需要添加 excel 数据导出的功能, 实质上也就是将从数据库中渲染到前端 ...
js导出的xlsx无法打开_js-xlsx 导出表格至excel
引入js文件下载地址:链接: https://pan.baidu.com/s/1gdOl1HnTrM5mZgPgd5qeDQ 提取码: c8js 导入4个js文件 'js/xlsx.extendsc ...
JS实现下载xlsx格式文件--js-xlsx
之前写过关于JS上传xlsx文件,这回是关于下载的.用的技术还是js-xlsx,blob. 部分内容转至纯前端利用 js-xlsx 实现 Excel 文件导入导出功能示例关于js-xlsx的下载,请 ...

SheetJS---(js-xlsx)

SheetJS的使用（js-xlsx）

1.导入功能实现

2.导出功能的实现

SheetJS---(js-xlsx)相关推荐

最新文章

热门文章