演示地址：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. 注意，更改团队所属业务部门用Update消息无效！

    摘要: 本人微信公众号:微软动态CRM专家罗勇 ,回复297或者20190112可方便获取本文,同时可以在第一间得到我发布的最新博文信息,follow me!我的网站是 www.luoyong.me ...

  2. Linux 中使用 firewalld

    firewalld 是一种动态防火墙管理解决方案.Centos 7 默认使用 firewalld.firewalld 是对 iptables 的一个封装,可以让你更容易地管理 iptables 规则. ...

  3. MySQL 基础知识梳理学习（三）----InnoDB日志相关的几个要点

    1.InnoDB的特点 :(1)Fully ACID (InnoDB默认的Repeat Read隔离级别支持):(2)Row-level Locking(支持行锁):(3)Multi-version ...

  4. c/c++ 网络编程 UDP 主机网络信息取得

    网络编程 UDP 主机网络信息取得 1,if_nametoindex 通过网卡名字取得网卡编号 2,if_indextoname 通过网卡编号取得网卡名字 #include <stdio.h&g ...

  5. 【转载】DSP基础--定点小数运算

    在FPGA实现算法过程中,大多数情况是用占用资源较少,延迟较低的定点数代替浮点数参与运算.那么浮点与定点数之间的区别以及转换方式是怎么的?下边这篇博文详细说明了这一问题.虽然是针对DSP芯片的,但思想 ...

  6. Dijango学习_02_极简本地博客创建

    二. Python 自带SQLite3数据库,Django默认使用SQLite3数据库,如果使用其它数据库可以在settings.py文件中设置. DATABASES = { 'default': { ...

  7. Unix、Windows、Mac OS、Linux系统故事

    我们熟知的操作系统大概都是windows系列,近年来Apple的成功,让MacOS也逐渐走进普通用户.在服务器领域,恐怕Linux是无人不知无人不晓.他们都是操作系统,也在自己的领域里独领风骚.这都还 ...

  8. CentOS7.2重置root密码的处理方法

    第一个里程碑 --在启动GRUB菜单中选择编辑选项,按键 "e" 进入编辑; 第二个里程碑 -- 大约在第16行找到 "ro" 将 "ro" ...

  9. 【English】20190313

     indicators指针['ɪndɪkeɪtəz]  determine决定[dɪˈtɜ:rmɪn] Places null indicator bits at the front of each ...

  10. Linux systemtap定位系统IO资源使用情况（ok）

    一.systemtap介绍 SystemTap是一个强大的调试工具,是监控和跟踪运行中的Linux 内核的操作的动态方法,确切的说应该是一门调试语言,因为它有自己的语法,也有解析.编译.运行等过程(准 ...