首页 web前端 js教程 如何使用s-xlsx实现Excel 文件导入和导出(上)

如何使用s-xlsx实现Excel 文件导入和导出(上)

Mar 12, 2018 pm 02:37 PM
excel 实现

这次给大家带来如何使用s-xlsx实现Excel文件导入和导出,使用s-xlsx实现Excel文件导入和导出的注意事项有哪些,下面就是实战案例,一起来看一下。

导入功能实现

下载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)" />
        <p id="demo"></p>
        <script>
            /*
            FileReader共有4种读取方法:
            1.readAsArrayBuffer(file):将文件读取为ArrayBuffer。
            2.readAsBinaryString(file):将文件读取为二进制字符串
            3.readAsDataURL(file):将文件读取为Data URL
            4.readAsText(file, [encoding]):将文件读取为文本,encoding缺省值为&#39;UTF-8&#39;
                         */
            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: &#39;base64&#39;
                        });
                    } else {
                        wb = XLSX.read(data, {                            type: &#39;binary&#39;
                        });
                    }                    //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) { //文件流转BinaryString
                var 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到D10
                var tmpWB = {                    SheetNames: [&#39;mySheet&#39;], //保存的表标题
                    Sheets: {                        &#39;mySheet&#39;: Object.assign({},
                            tmpdata, //内容
                            {                                &#39;!ref&#39;: outputPos[0] + &#39;:&#39; + outputPos[outputPos.length - 1] //设置填充区域
                            })
                    }
                };
                tmpDown = new Blob([s2ab(XLSX.write(tmpWB, 
                    {bookType: (type == undefined ? &#39;xlsx&#39;:type),bookSST: false, type: &#39;binary&#39;}//这里的数据是用来定义导出的格式类型
                    ))], {                    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 = &#39;&#39;,
            s = &#39;&#39;,
            m = 0
            while (n > 0) {
                m = n % 26 + 1
                s = String.fromCharCode(m + 64) + s
                n = (n - m) / 26
            }            return s
        }    </script></body></html>
登录后复制

3.使用Python将excel转成Json创建测试数据

代码

import sysimport xlrdimport json 
file =sys.argv[1] 
data = xlrd.open_workbook(file)
table=data.sheets()[0]def haveNoIndex(table):
    returnData=[]
    keyMap=table.row_values(0) 
    for i in range(table.nrows):#row
        tmpmp={}
        tmpInd=0
        for k in table.row_values(i): 
            tmpmp[keyMap[tmpInd]]=k
            tmpInd=tmpInd+1  
        returnData.append(tmpmp);    return json.dumps(returnData,ensure_ascii=False,indent=2)
returnJson= haveNoIndex(table) 
fp = open(file+".json","w",encoding=&#39;utf-8&#39;)
fp.write(returnJson)
fp.close()
登录后复制

导出示例的测试数据已经含有表头了如果没有表头可以直接将json中的遍历第一条数据的key创建一个value=key({key:key})插入到json第一条就可以了

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

相关阅读:

用nodejs做简介的网站

Vue如何添加element UI的组件

如何在移动端做出1px边框的效果

以上是如何使用s-xlsx实现Excel 文件导入和导出(上)的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解锁Myrise中的所有内容
4 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

excel打印表格框线消失怎么办 excel打印表格框线消失怎么办 Mar 21, 2024 am 09:50 AM

如果在打开一份需要打印的文件时,在打印预览里我们会发现表格框线不知为什么消失不见了,遇到这样的情况,我们就要及时进行处理,如果你的打印文件里也出现了此类的问题,那么就和小编一起来学习下边的课程吧:excel打印表格框线消失怎么办?1、打开一份需要打印的文件,如下图所示。  2、选中所有需要的内容区域,如下图所示。  3、单击鼠标右键,选择“设置单元格格式”选项,如下图所示。  4、点击窗口上方的“边框”选项,如下图所示。  5、在左侧的线条样式中选择细实线图样,如下图所示。  6、选择“外边框”

excel同时筛选3个以上关键词怎么操作 excel同时筛选3个以上关键词怎么操作 Mar 21, 2024 pm 03:16 PM

在日常办公中经常使用Excel来处理数据,时常遇到需要使用“筛选”功能。当我们在Excel中选择执行“筛选”时,对于同一列而言,最多只能筛选两个条件,那么,你知道excel同时筛选3个以上关键词该怎么操作吗?接下来,就让小编为大家演示一遍。第一种方法是将条件逐步添加到筛选器中。如果要同时筛选出三个符合条件的明细,首先需要逐步筛选出其中一个。开始时,可以先根据条件筛选出姓“王”的员工。然后单击【确定】,接着在筛选结果中勾选【将当前所选内容添加到筛选器】。操作步骤如下所示。  同样,再次分别执行筛选

excel表格兼容模式改正常模式的方法 excel表格兼容模式改正常模式的方法 Mar 20, 2024 pm 08:01 PM

在我们日常的工作学习中,从他人处拷贝了Excel文件,打开进行内容添加或重新编辑后,再保存的有时候,有时会提示出现兼容性检查的对话框,非常的麻烦,不知道Excel软件,可不可改为正常模式呢?那么下面就由小编为大家带来解决这个问题的详细步骤,让我们一起来学习吧。最后一定记得收藏保存。1、打开一个工作表,在工作表的名称中显示多出来一个兼容模式,如图所示。2、在这个工作表中,进行了内容的修改后保存,结果总是弹出兼容检查器的对话框,很麻烦看见这个页面,如图所示。  3、点击Office按钮,点另存为,然

excel上标应该如何设置 excel上标应该如何设置 Mar 20, 2024 pm 04:30 PM

在处理数据时,有时我们会遇到数据包含了倍数、温度等等各种符号的时候,你知道excel上标应该如何设置吗?我们在使用excel处理数据时,如果不会设置上标,这可是会让我们的很多数据在录入时就会比较麻烦。今天小编就为大家带来了excel上标的具体设置方法。1.首先,让我们打开桌面上的MicrosoftOfficeExcel文档,选择需要修改为上标的文字,具体如图所示。2.然后,点击右键,在点击后出现的菜单中,选择“设置单元格格式”选项,具体如图所示。3.接下来,在系统自动弹出来的“单元格格式”对话框

excel中iif函数的用法 excel中iif函数的用法 Mar 20, 2024 pm 06:10 PM

大部分用户使用Excel都是用来处理表格数据的,其实Excel还有vba程序编写,这个除了专人士应该没有多少用户用过此功能,在vba编写时常常会用到iif函数,它其实跟if函数的功能差不多,下面小编给大家介绍下iif函数的用法。Excel中SQL语句和VBA代码中都有iif函数。iif函数和excel工作表中的IF函数用法相似,执行真假值判断,根据逻辑计算的真假值,返回不同结果。IF函数用法是(条件,是,否)。VBA中的IF语句和IIF函数,前者IF语句是控制语句可以根据条件执行不同的语句,后者

excel阅读模式在哪里设置 excel阅读模式在哪里设置 Mar 21, 2024 am 08:40 AM

在软件的学习中,我们习惯用excel,不仅仅是因为需要方便,更因为它可以满足多种实际工作中需要的格式,而且excel运用起来非常的灵活,有种模式是方便阅读的,今天带给大家的就是:excel阅读模式在哪里设置。1、打开电脑,然后再打开Excel应用,找到目标数据。2、要想在Excel中,设置阅读模式,有两种方式。第一种:Excel中,有大量的便捷处理方式,分布在Excel中布局中。在Excel的右下角,有设置阅读模式的快捷方式,找到十字标志的图案,点击即可进入阅读模式,在十字标志的右边有一个小的三

PPT幻灯片插入excel图标的操作方法 PPT幻灯片插入excel图标的操作方法 Mar 26, 2024 pm 05:40 PM

1、打开PPT,翻页至需要插入excel图标的页面。点击插入选项卡。2、点击【对象】。3、跳出以下对话框。4、点击【由文件创建】,点击【浏览】。5、选择需要插入的excel表格。6、点击确定后跳出如下页面。7、勾选【显示为图标】。8、点击确定即可。

华为手机如何实现双微信登录? 华为手机如何实现双微信登录? Mar 24, 2024 am 11:27 AM

华为手机如何实现双微信登录?随着社交媒体的兴起,微信已经成为人们日常生活中不可或缺的沟通工具之一。然而,许多人可能会遇到一个问题:在同一部手机上同时登录多个微信账号。对于华为手机用户来说,实现双微信登录并不困难,本文将介绍华为手机如何实现双微信登录的方法。首先,华为手机自带的EMUI系统提供了一个很便利的功能——应用双开。通过应用双开功能,用户可以在手机上同

See all articles