純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()對象四、將json數據 導出Excel
方法:
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 在讀取數據過程中周期性調用
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屬性
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/94050.html
摘要:是一個可以在線轉換表格的工具,支持表格表格和表格,并且還內嵌了一個表格編輯器,像微軟的一樣編輯,使用非常方便。拿到對應表格的后,可以直接在文檔中使用該文本。 showImg(https://segmentfault.com/img/bVbwJCE?w=1200&h=674); TableConvert 是一個可以在線轉換表格的工具,支持 Markdown 表格、CSV、JSON、XML...
摘要:總結大部分人做接口自動化的流程后,發現基本上都是做接口請求用來存儲用例生成測試報告完成定時任務。其實在完成這個流程的過程中,代碼編寫只占用了一小部分的時間,大部分的時間都浪費在搭建環境和用例編寫上。可以通過這個方式去轉換一些有問題的。 總結大部分人做接口自動化的流程后,發現基本上都是:python + requests做接口請求;Excel用來存儲用例;HTMLTestRunner生成...
摘要:最近工作中遇到一個需求,大致需求就是將文件在導入時解析為格式轉換數據結構再傳輸給后臺。先介紹幾個基本概念對象,指的是整份文檔。對象,指的是文檔中的表。廢話不多說直接上這里演示下網頁中使用共有種讀取方法將文件讀取為。 最近工作中遇到一個需求,大致需求就是將Excel文件在導入時解析為json格式轉換數據結構再傳輸給后臺。這方面的庫比較少,比較主流的是js-xlsx,官網地址為sheetj...
摘要:介紹最近項目中讓實現一個導入導出的功能,查找了一些插件后發現這個插件,所以就嘗試使用了一下,這里將使用方法和遇到的問題簡單記錄一下。 介紹 最近項目中讓實現一個導入導出Excel的功能,查找了一些插件后發現js-xlsx這個插件,所以就嘗試使用了一下,這里將使用方法和遇到的問題簡單記錄一下。 SheetJS js-xlsx 是一款能夠讀寫多種格式表格的插件,瀏覽器支持良好,并且能在多個...
閱讀 2249·2021-11-24 11:15
閱讀 3101·2021-11-24 10:46
閱讀 1401·2021-11-24 09:39
閱讀 3935·2021-08-18 10:21
閱讀 1489·2019-08-30 15:53
閱讀 1402·2019-08-30 11:19
閱讀 3336·2019-08-29 18:42
閱讀 2333·2019-08-29 16:58