Html - Json转excel文件
生活随笔
收集整理的這篇文章主要介紹了
Html - Json转excel文件
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
Html - Json轉(zhuǎn)excel文件
Max.Bai
2020-08
?
工作中常需要將json文件轉(zhuǎn)換成excel文件，下面的代碼復(fù)制保存為html后綴，直接就是一個(gè)轉(zhuǎn)換工具了。
?
<html> <header><script src="https://unpkg.com/xlsx@0.16.3/dist/xlsx.full.min.js"></script> </header><body><span>Step1: 上傳json文件，最外層是list</span><br /><br /><input type='file' onchange='importDataSource(this)' /><br /><p> 文件內(nèi)容Demo:[{"key_as_string":"2020-06-30T00:00:00.000Z","key":1593475200000,"doc_count":1},{"key_as_string":"2020-06-30T01:00:00.000Z","key":1593478800000,"doc_count":3}]</p><hr /><p>Step2: 下載文件</p><button type="button" onclick="json2Excel()">點(diǎn)擊下載</button><script>// Max.Bai// 2020-08var dataSource = null;var fileName = '';//1、importDataSource() 方法用來獲取json數(shù)據(jù)function importDataSource(obj) {//2、obj.files[0]獲得onchange文件，name獲得文件名作為Excel的文件名fileName = obj.files[0].name.split('.')[0];//3、創(chuàng)建FileReader對象，將文件內(nèi)容讀入內(nèi)存，通過一些api接口，可以在主線程中訪問本地文件var reader = new FileReader();//4、readAsText(file) 異步按字符讀取文件內(nèi)容，結(jié)果用字符串形式表示reader.readAsText(obj.files[0]);var that = this//5、onload事件，當(dāng)讀取操作成功完成時(shí)調(diào)用reader.onload = function () {//讀取完畢后輸出結(jié)果 為字符串 此時(shí)需要轉(zhuǎn)成json對象that.dataSource = JSON.parse(this.result)alert("上傳成功");}}var wopts = {bookType: 'xlsx',bookSST: false,type: 'binary'};var workBook = {SheetNames: ['Sheet1'],Sheets: {},Props: {}};function json2Excel() {//1、XLSX.utils.json_to_sheet(data) 接收一個(gè)對象數(shù)組并返回一個(gè)基于對象關(guān)鍵字自動(dòng)生成的“標(biāo)題”的工作表，默認(rèn)的列順序由使用Object.keys的字段的第一次出現(xiàn)確定//2、將數(shù)據(jù)放入對象workBook的Sheets中等待輸出workBook.Sheets['Sheet1'] = XLSX.utils.json_to_sheet(dataSource)//3、XLSX.write() 開始編寫Excel表格//4、changeData() 將數(shù)據(jù)處理成需要輸出的格式saveAs(new Blob([changeData(XLSX.write(workBook, wopts))], { type: 'application/octet-stream' }))}function changeData(s) {//如果存在ArrayBuffer對象(es6) 最好采用該對象if (typeof ArrayBuffer !== 'undefined') {//1、創(chuàng)建一個(gè)字節(jié)長度為s.length的內(nèi)存區(qū)域var buf = new ArrayBuffer(s.length);//2、創(chuàng)建一個(gè)指向buf的Unit8視圖，開始于字節(jié)0，直到緩沖區(qū)的末尾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;}}function saveAs(obj, fileName) {//當(dāng)然可以自定義簡單的下載文件實(shí)現(xiàn)方式 console.log("save")var tmpa = document.createElement("a");tmpa.download = fileName || "result.xlsx";tmpa.href = URL.createObjectURL(obj); //綁定a標(biāo)簽tmpa.click(); //模擬點(diǎn)擊實(shí)現(xiàn)下載setTimeout(function () { //延時(shí)釋放URL.revokeObjectURL(obj); //用URL.revokeObjectURL()來釋放這個(gè)object URL}, 100);}</script> </body></html>?
總結(jié)
以上是生活随笔為你收集整理的Html - Json转excel文件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： hive 语句总结_Hive常用命令总结
- 下一篇： 100条经典C笔试题