演示地址：https://xibushijie.github.io/static/ExportToExcel.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>js实现一键导出Excel</title>

</head>

<body>

    <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>

</body>

<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>

</html>

js实现一键导出Excel的更多相关文章

  1. 多个浏览器下应用前端JS实现一键导出excel表

    自己试验了几种方法,找到一种较为全面的一种方式一键输出Excel表格,代码如下 <!DOCTYPE html> <html> <head lang="en&qu ...

  2. html table表格导出excel的方法 html5 table导出Excel HTML用JS导出Excel的五种方法 html中table导出Excel 前端开发 将table内容导出到excel HTML table导出到Excel中的解决办法 js实现table导出Excel，保留table样式

    先上代码   <script type="text/javascript" language="javascript">   var idTmr; ...

  3. 前端JS实现一键导入excel表格

    前面的文章中已经讲过关于js表格的导出,此文章主要说到的是excel文件如何导入到网页中,并在网页端显示. 代码部分: <!DOCTYPE html> <html> <h ...

  4. js实现table导出Excel，保留table样式

    浏览器环境:谷歌浏览器 1.在导出Excel的时候,保存table的样式,有2种方法,①是在table的行内写style样式,②是在模板里面添加样式 2.第一种方式:行内添加样式 <td sty ...

  5. js一键导出Excel

    HTML: 1 <div class="container"> 2 <table id="backViewTable" class=" ...

  6. js 前端 table 导出 excel

    园子,github,stackoverflow 关于前端下载的文章不少 园子里大部分都是 利用ActiveXObject对象来实现,可他有个缺点安全等级,还有必须安装excel…… github,st ...

  7. js导出excel：前端当前数据的导出

    网上找的库文件,同样做了修改.在导出的时候,有时候数据第一列和最后一列可能是复选框和操作按钮,这个是我们不需要的,加了这个的过滤 //table2excel.js /* * jQuery table2 ...

  8. ASP.NET MVC导出excel（数据量大，非常耗时的，异步导出）

    要在ASP.NET MVC站点上做excel导出功能,但是要导出的excel文件比较大,有几十M,所以导出比较费时,为了不影响对界面的其它操作,我就采用异步的方式,后台开辟一个线程将excel导出到指 ...

  9. .net解决数据导出excel时的格式问题

    在项目中一般都需要将报表数据导出到EXCEL中,但经常出现导出长串数据(如身份证)到EXCEL中后显示为科学计数法的格式,或者报表中显示为001的数据导出到Excel后成了1的格式. 下面简单介绍一下 ...

随机推荐

  1. 委托(3).net 2.0中的委托

    由于.net 2.0引入了匿名方法,所以创建委托的方式可以更简化了. .net 2.0中的委托 有了匿名方法,上一篇的例子可以简化为: namespace DelegateDemo { //声明委托 ...

  2. 开源介绍·新款简约、实用与大气的Hexo新主题：BMW

    这是一个简约.大气.实用的Hexo新主题:BMW

  3. iOS----------禁止输入汉字

    说明: ^.*[\u4e00-\u9fa5].*$ 是否包含中文^[\u4E00-\u9FA5]+$ 是否全中文 - (BOOL)textField:(UITextField *)textField ...

  4. mac 安装protobuf,并编译为java,c++,python

    1.下载地址:https://code.google.com/p/protobuf/downloads/list 另外,可以查看这个链接查看中文更多内容:http://www.cnblogs.com/ ...

  5. SQL Server 数据库调整表中列的顺序操作

    SQL Server 数据库中表一旦创建,我们不建议擅自调整列的顺序,特别是对应的应用系统已经上线,因为部分开发人员,不一定在代码中指明了列名.表是否可以调整列的顺序,其实可以自主设置,我们建议在安装 ...

  6. centos下Django+uwsgi+nginx

    本篇章主要讲解uwsgi和nginx的作用,并利用两者对django项目进行部署 一.概述 在开发过程中,我们一般是在该项目的虚拟环境中启用django自带的web服务:python manage.p ...

  7. Linux学习历程——Centos 7 uptime 、free命令

    一.命令介绍 uptime命令 uptime命令用于查看系统负载信息以及系统运行时间等. free命令 free命令用于查看当前系统中内存使用量信息. 二.实例 uptime命令实例 直接运行 upt ...

  8. Linux 文件权限管理

    1．文件权限的概述 在Linux系统下,使用权限来保护资源的安全将是一种不错的选择.系统中每个文件的权限都有可读(r).可写(w)和可执行(x)这三种权限,它们分别对应权限数值4.2 和1.系统为每个 ...

  9. 统计numpy数组中最频繁出现的值

    arr = np.array([[1,2,100,4,5,6],[1,1,100,3,5,5],[2,2,4,4,6,6]]) 方法一: count = np.bincount(arr[:,2]) # ...

  10. 在Windows 10中截取截图的6种方式 简介

    在Windows 10中截取截图的6种方式 简介 截图对于不同的目的很重要.它可以用于捕获笔记本电脑上的任何内容的截图.所以,如果你使用Windows 10,你可能不知道如何截图,因为它是比较新的.因 ...