js实现一键导出Excel

Myth丶恋晨 2022-06-04 05:15 263阅读 0赞

想要如下页面，一键导出Excel：

![这里写图片描述][SouthEast]

html：

<div class="container">
            <table id="backViewTable" class="table table-hover table-sm table2excel">
                <tr>
                    <td>#</td>
                    <td>ID</td>
                    <td>姓名</td>
                    <td>座位号</td>
                    <td>操作</td>
                </tr>
                <tr>
                    <th scope="row">1</th>
                    <td>1234</td>
                    <td>李文斐</td>
                    <td>2楼 3排 34号 </td>
                    <td><input class="btn-primary" type="button" value="删除"/></td>
                </tr>
                <tr>
                    <th scope="row">2</th>
                    <td>2345</td>
                    <td>lwf</td>
                    <td>1楼 3排 34号</td>
                    <td><input class="btn-primary" type="button" value="删除"/></td>
                </tr>
                <tr>
                    <th scope="row">3</th>
                    <td>3456</td>
                    <td>Lee</td>
                    <td>1楼 3排 12号</td>
                    <td><input class="btn-primary" type="button" value="删除"/></td>
                </tr>
            </table>
            <button class="btn btn-primary btn-sm" onclick="tablesToExcel(['backViewTable'], ['ProductDay1'], 'TestBook.xls', 'Excel')">Export to Excel</button>
        </div>

js：

<script> var tablesToExcel = (function() { var uri = 'data:application/vnd.ms-excel;base64,' , tmplWorkbookXML = '<?xml version="1.0"?><?mso-application progid="Excel.Sheet"?><Workbook xmlns="urn:schemas-microsoft-com:office:spreadsheet" xmlns:ss="urn:schemas-microsoft-com:office:spreadsheet">' + '<DocumentProperties xmlns="urn:schemas-microsoft-com:office:office"><Author>Axel Richter</Author><Created>{created}</Created></DocumentProperties>' + '<Styles>' + '<Style ss:ID="Currency"><NumberFormat ss:Format="Currency"></NumberFormat></Style>' + '<Style ss:ID="Date"><NumberFormat ss:Format="Medium Date"></NumberFormat></Style>' + '</Styles>' + '{worksheets}</Workbook>' , tmplWorksheetXML = '<Worksheet ss:Name="{nameWS}"><Table>{rows}</Table></Worksheet>' , tmplCellXML = '<Cell{attributeStyleID}{attributeFormula}><Data ss:Type="{nameType}">{data}</Data></Cell>' , base64 = function(s) { return window.btoa(unescape(encodeURIComponent(s))) } , format = function(s, c) { return s.replace(/{(\w+)}/g, function(m, p) { return c[p]; }) } return function(tables, wsnames, wbname, appname) { var ctx = ""; var workbookXML = ""; var worksheetsXML = ""; var rowsXML = ""; for (var i = 0; i < tables.length; i++) { if (!tables[i].nodeType) tables[i] = document.getElementById(tables[i]); // 控制要导出的行数 for (var j = 0; j < tables[i].rows.length; j++) { rowsXML += '<Row>'; // 控制导出的列数（在本例中，最后一列为button,导出的文件会出错，所以导出到倒数第二列 for (var k = 0; k < tables[i].rows[j].cells.length-1; k++) { var dataType = tables[i].rows[j].cells[k].getAttribute("data-type"); var dataStyle = tables[i].rows[j].cells[k].getAttribute("data-style"); var dataValue = tables[i].rows[j].cells[k].getAttribute("data-value"); dataValue = (dataValue)?dataValue:tables[i].rows[j].cells[k].innerHTML; var dataFormula = tables[i].rows[j].cells[k].getAttribute("data-formula"); dataFormula = (dataFormula)?dataFormula:(appname=='Calc' && dataType=='DateTime')?dataValue:null; ctx = { attributeStyleID: (dataStyle=='Currency' || dataStyle=='Date')?' ss:StyleID="'+dataStyle+'"':'' , nameType: (dataType=='Number' || dataType=='DateTime' || dataType=='Boolean' || dataType=='Error')?dataType:'String' , data: (dataFormula)?'':dataValue , attributeFormula: (dataFormula)?' ss:Formula="'+dataFormula+'"':'' }; rowsXML += format(tmplCellXML, ctx); } rowsXML += '</Row>' } ctx = {rows: rowsXML, nameWS: wsnames[i] || 'Sheet' + i}; worksheetsXML += format(tmplWorksheetXML, ctx); rowsXML = ""; } ctx = {created: (new Date()).getTime(), worksheets: worksheetsXML}; workbookXML = format(tmplWorkbookXML, ctx); // 查看后台的打印输出 console.log(workbookXML); var link = document.createElement("A"); link.href = uri + base64(workbookXML); link.download = wbname || 'Workbook.xls'; link.target = '_blank'; document.body.appendChild(link); link.click(); document.body.removeChild(link); } })(); </script>

点击“export to Excel”，便开始下载导出的Excel，，打开如下：  
![这里写图片描述][SouthEast 1]

参考链接：[Here is Full Example][]

[SouthEast]: /images/20220604/54d8d0fc208c435bbb727e3f341f5981.png
[SouthEast 1]: /images/20220604/138c0eeeaaed4dbeb9621b29e6a97099.png
[Here is Full Example]: http://jsfiddle.net/qxLn3h86/48/

发表评论取消回复

表情：

评论列表（有 0 条评论，263人围观）

还没有评论，来说两句吧...

相关阅读

相关 js 导出 excel

文章目录简介一、js 文件 1、在线引入 js

叁歲伎倆/ 2023年09月27日 11:16/ 0 赞/ 116 阅读

相关 Export2Excel.js实现导出excel压缩包

首先在Export2Excel.js文件中引入：import JSZip from 'jszip' 将Export2Excel.js文件最下方的代码 saveAs(

快来打我*/ 2022年10月08日 14:27/ 0 赞/ 326 阅读

相关 js导出excel表格

1. 在html页面先写一个a标签 <a id="excel" title="导出" οnclick="toExcel()">导出excel</a> 2.再写js

╰+攻爆jí腚メ/ 2022年06月05日 07:58/ 0 赞/ 259 阅读

相关 js实现一键导出Excel

想要如下页面，一键导出Excel： ![这里写图片描述][SouthEast] html： <div class="container">

Myth丶恋晨/ 2022年06月04日 05:15/ 0 赞/ 264 阅读

相关 js导出Excel

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

一时失言乱红尘/ 2022年05月10日 04:06/ 0 赞/ 232 阅读

相关 Python2.7.13实现数据库一键导出为Excel表格

依赖 Python2711 xlwt MySQLdb 数据库相关连接获取字段信息获取数据 Excel基础 workbook she

- 日理万妓/ 2022年03月10日 15:14/ 0 赞/ 276 阅读

相关 JS导出excel

接口返回json数据 js生成excel此外需要这两个依赖 <script th:src="@{/js/xlsx.full.min.js}"></script>

电玩女神/ 2022年02月12日 15:43/ 0 赞/ 291 阅读

相关前端js实现打印（导出）excel表格

<div class="tools"> <button type="button" class="btn green" id="excell" onclick

╰半夏微凉°/ 2021年12月23日 14:34/ 0 赞/ 393 阅读

相关 js table 导出 Excel

function ExportExcel(tableid) { var curTbl = document.getElementById(tableid

梦里梦外;/ 2021年12月19日 14:43/ 0 赞/ 358 阅读

相关 js之导出Excel

项目基于--vue 做的一个导出 Excel 功能 code： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVp

逃离我推掉我的手/ 2021年08月04日 11:03/ 0 赞/ 457 阅读