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

總結

以上是生活随笔為你收集整理的html js把json转化为excel,json转换Excel的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。