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 the dataSource = null ; 23 is var fileName = '' ; 24 // . 1, importDataSource () method is used to obtain data json 25 function importDataSource (obj) { 26 is 27 // 2, obj.files [0] obtained onchange file, name get file name as the file name of the Excel 28 fileName = obj.files [ 0 ] .name.split ( ' . ' ) [ 0 ]; 29 30 // . 3, creating FileReader object, the contents of the file is read into memory, with some api interface to access local files in the main thread 31 is var Reader = new newThe FileReader (); 32 33 is // . 4, readAsText (File) according to an asynchronous character reading file content, results are expressed in the form of a string 34 is reader.readAsText (obj.files [ 0 ]); 35 36 var that = the this 37 [ 38 is / / . 5, the onload event, when the call completes successfully read operation 39 reader.onload = function () { 40 41 is // after completion of reading the required output is converted into a string json case the object 42 is that.dataSource = the jSON. the parse ( the this .Result); 43 is the console.log (that.dataSource) 44 is } 45 } 46 is 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, an array of objects XLSX.utils.json_to_sheet (data) and receives a worksheet returns automatically generated based on the object key "title", the default order of columns used by the first field appears once determined Object.keys 58 / / 2, the data objects workBook Sheets into the output waiting 59 workBook.Sheets [ ' Sheet1 ' ] = XLSX.utils.json_to_sheet (the dataSource) 60 61 is // . 3, XLSX.write () to start writing Excel spreadsheet 62 @ 4, changeData () processes the data into the required format of the output 63 is saveAs ( new new Blob ([changeData (XLSX.write (WorkBook, wopts))], {type: ' file application / OCTET-Stream ' })) 64 } 65 function changeData (S) { 66 //If the object exists ArrayBuffer (ES6) of the object is preferably used 67 IF ( typeof ArrayBuffer ! == ' undefined ' ) { 68 69 // . 1, to create a byte length of a memory area s.length 70 var buf = new new ArrayBuffer ( s.length); 71 is 72 // 2, create a link to view Unit8 buf, starting at byte 0 until the end of the buffer 73 is var view = new new Uint8Array (buf); 74 75 // . 3, returns the specified position Unicode character encoding 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) {// course can be a simple way to achieve a custom download file 86 var TMPA = document.createElement ( " A " ); 87 tmpa.download = fileName ? FileName + ' .xlsx ' : new new a Date () the getTime (). + ' . XLSX ' ; 88 tmpa.href = URL.createObjectURL (obj); // bind a label 89 tmpa.click (); // simulate a click Implementation 90 91 is the setTimeout ( function () { //Time release 92 URL.revokeObjectURL (obj); // with URL.revokeObjectURL () to release the URL that Object 93 }, 100 ); 94 95 } 96 </ Script >
Articles copied from https://segmentfault.com/a/1190000014242385?utm_source=tag-newest , for personal study notes retained!