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，仅供个人学习笔记留存！