今天帮一个同学看了下他做的个项目,发现有个一键“导出excel”功能,然后陷入无限的回忆遐想,因为在上家公司也是见过的,只是那时候用的bootstrap别人都弄好的插件,平时用到的不多就没怎么关注,现在很多项目用vue开发,就特意去看了下。
1 | npm install --save xlsx file-saver |
1 2 | https://github.com/SheetJS/js-xlsx https://github.com/eligrey/FileSaver.js |
1 2 | import FileSaver from 'file-saver' import XLSX from 'xlsx' |
1 2 3 4 5 6 7 8 9 10 | exportExcel () { /* generate workbook object from table */ var wb = XLSX.utils.table_to_book(document.querySelector('#out-table')) /* get binary string as output */ var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' }) try { FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), 'sheetjs.xlsx') } catch (e) { if (typeof console !== 'undefined') console.log(e, wbout) } return wbout } |
1 2 3 4 5 6 7 | exportExcel() { var _data = [['序号', '性别', '年龄'], [1, '男', 17], [2, '女', 24]]; var worksheet = XLSX.utils.aoa_to_sheet(_data); var new_workbook = XLSX.utils.book_new(); XLSX.utils.book_append_sheet(new_workbook, worksheet, 'SheetJS'); XLSX.writeFile(new_workbook, '日志测试查询' + '.xlsx'); } |
1 2 3 4 5 6 7 8 9 10 11 12 13 | <!-- ECMAScript 5 兼容性 --> <script type="text/javascript" src="https://unpkg.com/xlsx/dist/shim.min.js"></script> <script type="text/vbscript" language="vbscript"> IE_GetProfileAndPath_Key = "HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Explorer\User Shell Folders" Function IE_GetProfileAndPath(key): Set wshell = CreateObject("WScript.Shell"): IE_GetProfileAndPath = wshell.RegRead(IE_GetProfileAndPath_Key & key): IE_GetProfileAndPath = wshell.ExpandEnvironmentStrings("%USERPROFILE%") & "!" & IE_GetProfileAndPath: End Function Function IE_SaveFile_Impl(FileName, payload): Dim data, plen, i, bit: data = CStr(payload): plen = Len(data): Set fso = CreateObject("Scripting.FileSystemObject"): fso.CreateTextFile FileName, True: Set f = fso.GetFile(FileName): Set stream = f.OpenAsTextStream(2, 0): For i = 1 To plen Step 3: bit = Mid(data, i, 2): stream.write Chr(CLng("&h" & bit)): Next: stream.Close: IE_SaveFile_Impl = True: End Function </script> <script type="text/vbscript" language="vbscript"> Function IE_LoadFile_Impl(FileName): Dim out(), plen, i, cc: Set fso = CreateObject("Scripting.FileSystemObject"): Set f = fso.GetFile(FileName): Set stream = f.OpenAsTextStream(1, 0): plen = f.Size: ReDim out(plen): For i = 1 To plen Step 1: cc = Hex(Asc(stream.read(1))): If Len(cc) < 2 Then: cc = "0" & cc: End If: out(i) = cc: Next: IE_LoadFile_Impl = Join(out,""): End Function </script> <script type="text/javascript" src="https://unpkg.com/xlsx/dist/xlsx.full.min.js"></script> <script type="text/javascript" src="https://unpkg.com/blob.js@1.0.1/Blob.js"></script> <script type="text/javascript" src="https://unpkg.com/file-saver@1.3.3/FileSaver.js"></script> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <div style="display: block"> <table id="js_table_xlsx"> <tbody> <tr> <td><span>This</span></td> <td><span>is</span></td> <td><span>a</span></td> <td><span>Test</span></td> </tr> <tr> <td><span>வணக்கம்</span></td> <td><span>สวัสดี</span></td> <td><span>你好</span></td> <td><span>가지마</span></td> </tr> <tr> <td><span>1233</span></td> <td><span>2333</span></td> <td><span>3333</span></td> <td><span>43333</span></td> </tr> </tbody> </table> </div> <!-- 导出excel --> <button class="js_exportExcel">导出excel</button> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | /* * 导出 excel 表格 ,利用隐藏的excel * */ $('.js_exportExcel').on('click', function () { exportExcel_Doit(); }); /* * 导出excel function * */ function exportExcel_Doit(type, fn, dl) { var elt = document.getElementById('js_table_xlsx'); var wb = XLSX.utils.table_to_book(elt, {sheet: "Sheet JS"}); return dl ? XLSX.write(wb, {bookType: type, bookSST: true, type: 'base64'}) : XLSX.writeFile(wb, fn || ('test.' + (type || 'xlsx'))); } |
支付宝扫一扫打赏
微信扫一扫打赏
共 0 条评论关于"vue2.0 + element UI 中 el-table 数据导出Excel"
最新评论