如何使用s-xlsx实现Excel 文件导入和导出（下）-js教程-PHP中文网

首页

web前端

js教程

如何使用s-xlsx实现Excel 文件导入和导出（下）

php中世界最好的语言

Mar 12, 2018 pm 02:37 PM

excel 实现

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

<!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>
        var rABS = false; //是否将文件读取为二进制字符串
        function importf(obj) {//导入
            if (!obj.files) { return; }            var f = obj.files[0];
            {                var reader = new FileReader();                var name = f.name;
                reader.onload = function (e) {                    var data = e.target.result;                    var wb;                    if (rABS) {
                        wb = XLSX.read(data, { type: &#39;binary&#39; });
                    } else {                        var arr = fixdata(data);
                        wb = XLSX.read(btoa(arr), { type: &#39;base64&#39; });
                    }                    document.getElementById("demo").innerHTML = JSON.stringify(XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]));
                };                if (rABS) reader.readAsBinaryString(f);                else reader.readAsArrayBuffer(f);
            }
        }        function fixdata(data) {            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.导出功能的实现

注意:导出其他格式文件可能会出现乱码问题,如有好的解决方案请留言

<!DOCTYPE html><html><head>
    <meta charset="UTF-8">
    <title></title></head><body>
    <button onclick="downloadExl(jsono)">导出</button>
    <script src="http://oss.sheetjs.com/js-xlsx/xlsx.full.min.js"></script>
    <!--调用FileSaver saveAs函数可以实现文件下载-->
    <!--<script src="http://sheetjs.com/demos/Blob.js"></script>
    <script src="http://sheetjs.com/demos/FileSaver.js"></script>-->
    <script>
        //如果使用 FileSaver.js 就不要同时使用以下函数
        function saveAs(obj, fileName) {//当然可以自定义简单的下载文件实现方式 
            var tmpa = document.createElement("a");
            tmpa.download = fileName || "下载";
            tmpa.href = URL.createObjectURL(obj); //绑定a标签
            tmpa.click(); //模拟点击实现下载
            setTimeout(function () { //延时释放
                URL.revokeObjectURL(obj); //用URL.revokeObjectURL()来释放这个object URL
            }, 100);
        }        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"
        }];        const wopts = { bookType: &#39;xlsx&#39;, bookSST: false, type: &#39;binary&#39; };//这里的数据是用来定义导出的格式类型
        // const wopts = { bookType: &#39;csv&#39;, bookSST: false, type: &#39;binary&#39; };//ods格式
        // const wopts = { bookType: &#39;ods&#39;, bookSST: false, type: &#39;binary&#39; };//ods格式
        // const wopts = { bookType: &#39;xlsb&#39;, bookSST: false, type: &#39;binary&#39; };//xlsb格式
        // const wopts = { bookType: &#39;fods&#39;, bookSST: false, type: &#39;binary&#39; };//fods格式
        // const wopts = { bookType: &#39;biff2&#39;, bookSST: false, type: &#39;binary&#39; };//xls格式
        function downloadExl(data, type) {            const wb = { SheetNames: [&#39;Sheet1&#39;], Sheets: {}, Props: {} };
            wb.Sheets[&#39;Sheet1&#39;] = XLSX.utils.json_to_sheet(data);//通过json_to_sheet转成单页(Sheet)数据
            saveAs(new Blob([s2ab(XLSX.write(wb, wopts))], { type: "application/octet-stream" }), "这里是下载的文件名" + &#39;.&#39; + (wopts.bookType=="biff2"?"xls":wopts.bookType));
        }        function s2ab(s) {            if (typeof ArrayBuffer !== &#39;undefined&#39;) {                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;
            } else {                var buf = new Array(s.length);                for (var i = 0; i != s.length; ++i) buf[i] = s.charCodeAt(i) & 0xFF;                return buf;
            }
        }    </script></body></html>

登录后复制

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

热AI工具

热工具

热门话题

Java教程

1659

CakePHP 教程

1415

Laravel 教程

1310

PHP教程

1258

C# 教程

1232

显示更多

Related knowledge

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

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

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

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

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

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

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

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

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阅读模式在哪里设置 Mar 21, 2024 am 08:40 AM

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

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

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