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