演示地址：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. C#面试分享：单例模式

    C#面试分享:单例模式 提问1:请给出单例模式的实现: 答: public class Animal { private static Animal _instance = null; private ...

  2. java框架之mybatis

    一.简介 1.基本概念 mybatis 是一个半自动轻量级的一个 orm 框架 将 java 与 sql 分离,解决了 jdbc 的硬编码问题: sql 由开发人员控制,更加方便 sql 的修改调优: ...

  3. 2018年终总结之AI领域开源框架汇总

    2018年终总结之AI领域开源框架汇总 [稍显活跃的第一季度] 2018.3.04——OpenAI公布 “后见之明经验复现(Hindsight Experience Reply, HER)”的开源算法 ...

  4. word中字体大小（pt）和网页中css设置font-size时用的px大小对应关系

    pt与px转换关系为 1px= 0.75pt. 所以word中五号字体(10.5pt)在网页中对应的大小为font-size:14px.(10.5 / 0.75 = 14) 初号44pt 小初36pt ...

  5. 加载loading对话框的功能(不退出沉浸式效果)

    上一篇基于修改系统源码的前提下,实现了完全的沉浸式体验效果.可参考这篇 戳这 一.自定义Dialog 在沉浸式效果下,当界面弹出对话框时,对话框将获取到焦点,这将导致界面退出沉浸式效果,那么是不是能通 ...

  6. 测者的测试技术笔记：揭开java method的一个秘密--巨型函数

    相信,很多人都不知道Java的Method的上限为64K.本文将超过这个上限的函数叫做巨型函数. 巨型函数的问题 1.如果代码超过了这个限制,Java编译器就报"Code too large ...

  7. MySQL新参数log_error_verbosity

      在介绍这个参数前,我们先聊聊参数log_warnings.我们知道MySQL中,其中log_error定义是否启用错误日志的功能和错误日志的存储位置,log_warnings定义是否将告警信息(w ...

  8. java.lang.NullPointerException一个低级的解决方法

    java.lang.NullPointerException 这次因为调用了类的方法的时候忘记了new对象了 导致该对象为空

  9. c/c++ llinux epoll系列5 解除epoll_wait状态

    linux epoll系列5 解除epoll_wait状态 有时候会有解除epoll_wait状态的需求. 实现方法: 1,给执行epoll_wait的程序发signal. 2,使用sockpair. ...

  10. Jenkins系统监测(转)

    Jenkins系统监测   Jenkins 是一个开源项目,提供了一种易于使用的持续集成系统,使开发者从繁杂的集成中解脱出来,专注于更为重要的业务逻辑实现上.同时 Jenkins 能实施监控集成中存在 ...