资讯专栏INFORMATION COLUMN

json转换Excel

KnewOne / 3309人阅读

纯JS将json数据转成Excel并导出
采用JS-XLSX这个简单的Javascript库来读取和写入Excel表格文件,并且能够支持最新版本的XLSX文件
一、node 环境 安装XLSX库
1、with npm
    $ npm install xlsx
2、node 读取文件
    if(typeof require !== "undefuned")
    var XLSX = require("XLSX")
二、直接引入XLSX库
三、导入JSON数据


var dataSource = null;
var fileName = "";

//1、importDataSource() 方法用来获取json数据
function importDataSource(obj) {

    //2、obj.files[0]获得onchange文件,name获得文件名作为Excel的文件名
    fileName = obj.files[0].name.split(".")[0];
    
    //3、创建FileReader对象,将文件内容读入内存,通过一些api接口,可以在主线程中访问本地文件
    var reader = new FileReader();
    
    //4、readAsText(file) 异步按字符读取文件内容,结果用字符串形式表示
    reader.readAsText(obj.files[0]);
    
    var that = this
    
    //5、onload事件,当读取操作成功完成时调用
    reader.onload = function() {
    
        //读取完毕后输出结果 为字符串 此时需要转成json对象
        that.dataSource = JSON.parse(this.result)
    }
}
FileReader()对象
方法:
1、abort():void 终止文件读取操作
2、readAsArrayBuffer(file):void 异步按字节读取文件内容,结果用ArrayBuffer对象表示(二进制缓存区) 将二进制数据存放在其中,大小与源文件一样,通过此方式,可以直接在网络中传输二进制内容
3、readAsBinaryString(file):void 异步按字节读取文件内容,结果为文件的二进制串 与上个方法不同的是 readAsBinaryString读取后的内容被编码为字符,大小会受到影响,不适合直接传输,不推荐使用
4、readAsDataURL(file):void 异步读取文件内容并进行base64编码后输出,结果用data:url的字符串形式表示
事件:
1、onabort 当读取操作被中止时调用
2、onerror 当读取操作发生错误时调用
3、onload 当读取操作成功完成时调用
4、onloadend 当读取操作完成时调用,不管是成功还是失败
5、onloadstart 当读取操作将要开始之前调用
6、onprogress 在读取数据过程中周期性调用
四、将json数据 导出Excel
var wopts = {
        bookType: "xlsx",
        bookSST: false, 
        type: "binary"
    };
var workBook = {
        SheetNames: ["Sheet1"],
        Sheets: {},
        Props: {}
    };
    
function json2Excel() {

    //1、XLSX.utils.json_to_sheet(data) 接收一个对象数组并返回一个基于对象关键字自动生成的“标题”的工作表,默认的列顺序由使用Object.keys的字段的第一次出现确定
    //2、将数据放入对象workBook的Sheets中等待输出
    workBook.Sheets["Sheet1"] = XLSX.utils.json_to_sheet(dataSource)
    
    //3、XLSX.write() 开始编写Excel表格
    //4、changeData() 将数据处理成需要输出的格式
    saveAs(new Blob([changeData(XLSX.write(workBook, wopts))], {type: "application/octet-stream"}))
}

function changeData(s) {

    //如果存在ArrayBuffer对象(es6) 最好采用该对象
    if (typeof ArrayBuffer !== "undefined") {
        
        //1、创建一个字节长度为s.length的内存区域
        var buf = new ArrayBuffer(s.length);
        
        //2、创建一个指向buf的Unit8视图,开始于字节0,直到缓冲区的末尾
        var view = new Uint8Array(buf);
        
        //3、返回指定位置的字符的Unicode编码
        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;
    }
}
  
XLSX.utils 
1、XLSX.utils.table_to_sheet 我们常用的还有这个 将table数据转成Excel表格,需要一个表DOM元素并返回一个类似于输入表的工作表。 数字被解析。 所有其他数据将作为字符串存储。
2、Uint8Array 8位无符号整数,长度1个字节
3、ArrayBuffer是一块内存,比如var buf = new ArrayBuffer(1024), 就等于开辟了一块1kb大小的内存,但是不能通过buf[0]=12,来进行赋值,如果想操作内存块中的数据,需要通过var init8 = new Int8Array(buf)然后通过int8[0] = 12来操作
4、如果你从XHR、file API、canvas等读取到一大串字节流,采用ArrayBuffer比较好,会配合一些api来增强二进制的处理能力
5、ArrayBuffer作为内存区域,可以存放多种类型的数据,不同的数据有不同的存储方式,Uint8Array就是其中一种,8表示这种数据类型占据的字节数。这里使用8来转换是因为数据类型最小占1个字节,可以存储字母、数字、汉字、字符等
6、s.charCodeAt(i) & 0xFF:&0xff这个是考虑到计算机内的存储都是利用二进制的补码进行存储的。对于正数(00000001),原码来说,首位表示符号位,反码 补码都是本身。对于负数(10000001),原码来说,反码是对原码除了符号位之外做取反运算,即(11111110),补码是对反码作+1运算即(11111111),这样做其实就是想保持二进制的补码的一致性 (详解:https://www.cnblogs.com/think...
五、将文件输出并下载
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);

}
模拟下载 a标签添加download属性

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/94050.html

相关文章

  • 分享一个免费的在线表格转换工具 - TableConvert

    摘要:是一个可以在线转换表格的工具,支持表格表格和表格,并且还内嵌了一个表格编辑器,像微软的一样编辑,使用非常方便。拿到对应表格的后,可以直接在文档中使用该文本。 showImg(https://segmentfault.com/img/bVbwJCE?w=1200&h=674); TableConvert 是一个可以在线转换表格的工具,支持 Markdown 表格、CSV、JSON、XML...

    邹强 评论0 收藏0
  • python+requests+Excel+Jenkins接口自动化

    摘要:总结大部分人做接口自动化的流程后,发现基本上都是做接口请求用来存储用例生成测试报告完成定时任务。其实在完成这个流程的过程中,代码编写只占用了一小部分的时间,大部分的时间都浪费在搭建环境和用例编写上。可以通过这个方式去转换一些有问题的。 总结大部分人做接口自动化的流程后,发现基本上都是:python + requests做接口请求;Excel用来存储用例;HTMLTestRunner生成...

    ashe 评论0 收藏0
  • 如何将Excel文件解析为json格式

    摘要:最近工作中遇到一个需求,大致需求就是将文件在导入时解析为格式转换数据结构再传输给后台。先介绍几个基本概念对象,指的是整份文档。对象,指的是文档中的表。废话不多说直接上这里演示下网页中使用共有种读取方法将文件读取为。 最近工作中遇到一个需求,大致需求就是将Excel文件在导入时解析为json格式转换数据结构再传输给后台。这方面的库比较少,比较主流的是js-xlsx,官网地址为sheetj...

    andycall 评论0 收藏0
  • 前端实现Excel导入和导出功能

    摘要:介绍最近项目中让实现一个导入导出的功能,查找了一些插件后发现这个插件,所以就尝试使用了一下,这里将使用方法和遇到的问题简单记录一下。 介绍 最近项目中让实现一个导入导出Excel的功能,查找了一些插件后发现js-xlsx这个插件,所以就尝试使用了一下,这里将使用方法和遇到的问题简单记录一下。 SheetJS js-xlsx 是一款能够读写多种格式表格的插件,浏览器支持良好,并且能在多个...

    Amio 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<