json转换Excel

纯JS将json数据转成Excel并导出

采用JS-XLSX这个简单的Javascript库来读取和写入Excel表格文件，而且可以支持最新版本的XLSX文件

1、node 环境 安装XLSX库

一、with npm
    $ npm install xlsx
二、node 读取文件
    if(typeof require !== 'undefuned')
    var XLSX = require('XLSX')

2、直接引入XLSX库

<script src="http://oss.sheetjs.com/js-xlsx/xlsx.full.min.js"></script>

3、导入JSON数据

<input type='type' onchange='importDataSource(this)'/>

var dataSource = null;
var fileName = '';

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

    //二、obj.files[0]得到onchange文件，name得到文件名做为Excel的文件名
    fileName = obj.files[0].name.split('.')[0];
    
    //三、建立FileReader对象，将文件内容读入内存，经过一些api接口，能够在主线程中访问本地文件
    var reader = new FileReader();
    
    //四、readAsText(file) 异步按字符读取文件内容，结果用字符串形式表示
    reader.readAsText(obj.files[0]);
    
    var that = this
    
    //五、onload事件，当读取操做成功完成时调用
    reader.onload = function() {
    
        //读取完毕后输出结果 为字符串 此时须要转成json对象
        that.dataSource = JSON.parse(this.result)
    }
}

FileReader()对象
方法：
一、abort():void 终止文件读取操做
二、readAsArrayBuffer(file):void 异步按字节读取文件内容，结果用ArrayBuffer对象表示(二进制缓存区) 将二进制数据存放在其中，大小与源文件同样，经过此方式，能够直接在网络中传输二进制内容
三、readAsBinaryString(file):void 异步按字节读取文件内容，结果为文件的二进制串 与上个方法不一样的是 readAsBinaryString读取后的内容被编码为字符，大小会受到影响，不适合直接传输，不推荐使用
四、readAsDataURL(file):void 异步读取文件内容并进行base64编码后输出，结果用data:url的字符串形式表示
事件：
一、onabort 当读取操做被停止时调用
二、onerror 当读取操做发生错误时调用
三、onload 当读取操做成功完成时调用
四、onloadend 当读取操做完成时调用,不论是成功仍是失败
五、onloadstart 当读取操做将要开始以前调用
六、onprogress 在读取数据过程当中周期性调用

4、将json数据 导出Excel

var wopts = {
        bookType: 'xlsx',
        bookSST: false, 
        type: 'binary'
    };
var workBook = {
        SheetNames: ['Sheet1'],
        Sheets: {},
        Props: {}
    };
    
function json2Excel() {

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

function changeData(s) {

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

5、将文件输出并下载

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属性