0

0

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

php中世界最好的语言

php中世界最好的语言

发布时间:2018-03-12 14:37:29

|

3371人浏览过

|

来源于php中文网

原创

这次给大家带来如何使用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缺省值为'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) { //文件流转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: ['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 = 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='utf-8')
fp.write(returnJson)
fp.close()

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

维克企业管理系统全能.NET版2009
维克企业管理系统全能.NET版2009

采用.NET CLR2.0、VS2005及SQL2000,前台页面使用用DIV+CSS开发;可以使用动态化运行,也可以采用全部静态化动作,甚至自己定义模板;后台信息编辑器采用最新版FCKeditor;产品信息可导出为EXCEL、WORD、PDF等格式存储;产品信息可以通过EXCEL模板批量导入;产品分类采用无限级分类;产品图片上传支持图片水印和文字水印,同时支持自动生成缩略图功能;电子邮件发送支持

下载

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

相关阅读:

用nodejs做简介的网站

Vue如何添加element UI的组件

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

相关文章

WPS零基础入门到精通全套教程!
WPS零基础入门到精通全套教程!

全网最新最细最实用WPS零基础入门到精通全套教程!带你真正掌握WPS办公! 内含Excel基础操作、函数设计、数据透视表等

下载

相关标签:

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

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
pixiv网页版官网登录与阅读指南_pixiv官网直达入口与在线访问方法
pixiv网页版官网登录与阅读指南_pixiv官网直达入口与在线访问方法

本专题系统整理pixiv网页版官网入口及登录访问方式,涵盖官网登录页面直达路径、在线阅读入口及快速进入方法说明,帮助用户高效找到pixiv官方网站,实现便捷、安全的网页端浏览与账号登录体验。

797

2026.02.13

微博网页版主页入口与登录指南_官方网页端快速访问方法
微博网页版主页入口与登录指南_官方网页端快速访问方法

本专题系统整理微博网页版官方入口及网页端登录方式,涵盖首页直达地址、账号登录流程与常见访问问题说明,帮助用户快速找到微博官网主页,实现便捷、安全的网页端登录与内容浏览体验。

272

2026.02.13

Flutter跨平台开发与状态管理实战
Flutter跨平台开发与状态管理实战

本专题围绕Flutter框架展开,系统讲解跨平台UI构建原理与状态管理方案。内容涵盖Widget生命周期、路由管理、Provider与Bloc状态管理模式、网络请求封装及性能优化技巧。通过实战项目演示,帮助开发者构建流畅、可维护的跨平台移动应用。

144

2026.02.13

TypeScript工程化开发与Vite构建优化实践
TypeScript工程化开发与Vite构建优化实践

本专题面向前端开发者,深入讲解 TypeScript 类型系统与大型项目结构设计方法,并结合 Vite 构建工具优化前端工程化流程。内容包括模块化设计、类型声明管理、代码分割、热更新原理以及构建性能调优。通过完整项目示例,帮助开发者提升代码可维护性与开发效率。

25

2026.02.13

Redis高可用架构与分布式缓存实战
Redis高可用架构与分布式缓存实战

本专题围绕 Redis 在高并发系统中的应用展开,系统讲解主从复制、哨兵机制、Cluster 集群模式及数据分片原理。内容涵盖缓存穿透与雪崩解决方案、分布式锁实现、热点数据优化及持久化策略。通过真实业务场景演示,帮助开发者构建高可用、可扩展的分布式缓存系统。

92

2026.02.13

c语言 数据类型
c语言 数据类型

本专题整合了c语言数据类型相关内容,阅读专题下面的文章了解更多详细内容。

53

2026.02.12

雨课堂网页版登录入口与使用指南_官方在线教学平台访问方法
雨课堂网页版登录入口与使用指南_官方在线教学平台访问方法

本专题系统整理雨课堂网页版官方入口及在线登录方式,涵盖账号登录流程、官方直连入口及平台访问方法说明,帮助师生用户快速进入雨课堂在线教学平台,实现便捷、高效的课程学习与教学管理体验。

15

2026.02.12

豆包AI网页版入口与智能创作指南_官方在线写作与图片生成使用方法
豆包AI网页版入口与智能创作指南_官方在线写作与图片生成使用方法

本专题汇总豆包AI官方网页版入口及在线使用方式,涵盖智能写作工具、图片生成体验入口和官网登录方法,帮助用户快速直达豆包AI平台,高效完成文本创作与AI生图任务,实现便捷智能创作体验。

717

2026.02.12

PostgreSQL性能优化与索引调优实战
PostgreSQL性能优化与索引调优实战

本专题面向后端开发与数据库工程师,深入讲解 PostgreSQL 查询优化原理与索引机制。内容包括执行计划分析、常见索引类型对比、慢查询优化策略、事务隔离级别以及高并发场景下的性能调优技巧。通过实战案例解析,帮助开发者提升数据库响应速度与系统稳定性。

64

2026.02.12

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
CSS3 教程
CSS3 教程

共18课时 | 5.9万人学习

JavaScript ES5基础线上课程教学
JavaScript ES5基础线上课程教学

共6课时 | 11.3万人学习

帝国CMS企业仿站教程
帝国CMS企业仿站教程

共17课时 | 1.8万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号