1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Document</title> 9 <script src="http://oss.sheetjs.com/js-xlsx/xlsx.full.min.js"></script> 10 </head> 11 12 <body> 13 <input type='file' onchange='importDataSource(this)' /> 14 <button onclick="json2Excel()">導出</button> 15 </body> 16 17 </html> 18 19 20 <script> 21 22 var dataSource = null; 23 var fileName = ''; 24 //1、importDataSource() 方法用來獲取json數據 25 function importDataSource(obj) { 26 27 //2、obj.files[0]獲得onchange文件，name獲得文件名作為Excel的文件名 28 fileName = obj.files[0].name.split('.')[0]; 29 30 //3、創建FileReader對象，將文件內容讀入內存，通過一些api接口，可以在主線程中訪問本地文件 31 var reader = new FileReader(); 32 33 //4、readAsText(file) 異步按字符讀取文件內容，結果用字符串形式表示 34 reader.readAsText(obj.files[0]); 35 36 var that = this 37 38 //5、onload事件，當讀取操作成功完成時調用 39 reader.onload = function () { 40 41 //讀取完畢后輸出結果 為字符串 此時需要轉成json對象 42 that.dataSource = JSON.parse(this.result); 43 console.log(that.dataSource) 44 } 45 } 46 function json2Excel() { 47 var wopts = { 48 bookType: 'xlsx', 49 bookSST: false, 50 type: 'binary' 51 }; 52 var workBook = { 53 SheetNames: ['Sheet1'], 54 Sheets: {}, 55 Props: {} 56 }; 57 //1、XLSX.utils.json_to_sheet(data) 接收一個對象數組並返回一個基於對象關鍵字自動生成的“標題”的工作表，默認的列順序由使用Object.keys的字段的第一次出現確定 58 //2、將數據放入對象workBook的Sheets中等待輸出 59 workBook.Sheets['Sheet1'] = XLSX.utils.json_to_sheet(dataSource) 60 61 //3、XLSX.write() 開始編寫Excel表格 62 //4、changeData() 將數據處理成需要輸出的格式 63 saveAs(new Blob([changeData(XLSX.write(workBook, wopts))], { type: 'application/octet-stream' })) 64 } 65 function changeData(s) { 66 //如果存在ArrayBuffer對象(es6) 最好采用該對象 67 if (typeof ArrayBuffer !== 'undefined') { 68 69 //1、創建一個字節長度為s.length的內存區域 70 var buf = new ArrayBuffer(s.length); 71 72 //2、創建一個指向buf的Unit8視圖，開始於字節0，直到緩沖區的末尾 73 var view = new Uint8Array(buf); 74 75 //3、返回指定位置的字符的Unicode編碼 76 for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF; 77 return buf; 78 79 } else { 80 var buf = new Array(s.length); 81 for (var i = 0; i != s.length; ++i) buf[i] = s.charCodeAt(i) & 0xFF; 82 return buf; 83 } 84 } 85 function saveAs(obj, fileName) {//當然可以自定義簡單的下載文件實現方式 86 var tmpa = document.createElement("a"); 87 tmpa.download = fileName ? fileName + '.xlsx' : new Date().getTime() + '.xlsx'; 88 tmpa.href = URL.createObjectURL(obj); //綁定a標簽 89 tmpa.click(); //模擬點擊實現下載 90 91 setTimeout(function () { //延時釋放 92 URL.revokeObjectURL(obj); //用URL.revokeObjectURL()來釋放這個object URL 93 }, 100); 94 95 } 96 </script>
文章抄自https://segmentfault.com/a/1190000014242385?utm_source=tag-newest，僅供個人學習筆記留存！