演示地址：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. 前端入门13-JavaScript进阶之原型

    声明 本系列文章内容全部梳理自以下几个来源: <JavaScript权威指南> MDN web docs Github:smyhvae/web Github:goddyZhao/Trans ...

  2. 给zTree的treeNode添加class

    onNodeCreated 回调,捕获 DOM 创建完毕的回调,然后利用 zTree 的规则找到 treeNode.tId + "_a" 这样的 标签,自行添加 class 就是了 ...

  3. 参观微软Serbia开发中心和Office365 2019-01-31活动感悟

    这是<国外线下技术俱乐部建设>系列文章之一.   该活动网址是:https://www.meetup.com/ITPro-Serbia/events/258352104/ 活动内容是讲Of ...

  4. Android 反射获取一个方法（方法的参数不一样）

    private Method forget; private Method connect_netID; private Method connect_wifiConfig; private Meth ...

  5. 对国内AR产业的预言

    先丢预言,国内任何AR公司,包含几大块,医疗行业.手机制造商和自动驾驶,倘若没有能力进行系统设计,最后都要死,或者裁掉业务. AR本身不会演化为独立的业务,而是作为辅助性的工具进入传统已经存在的部门之 ...

  6. HTTP与HTTPS介绍

    文章大纲 一.HTTP和HTTPS的基本概念二.HTTP缺点三.HTTPS介绍四.免费HTTPS证书推荐   一.HTTP和HTTPS的基本概念 HTTP:是互联网上应用最为广泛的一种网络协议,是一个 ...

  7. 【English】一、专治各种英语不服

    一.前言 英语虽然不是使用人数最多的语言,但是...谁叫我是一名码农且英语垃圾呢. 二.开始 1. read sb sth = read sth for sb read sb sth 是双宾语结构. ...

  8. 如何解决夜神模拟器连不上adb的问题

    要搞一个安卓的项目.由于电脑系统是年前刚刚重装的,系统里啥都没有,于是临时安装了一下android studio 2.2,然后又装了一个夜神模拟器.工程打开后,编译通过了,于是打开夜神模拟器,想要通过 ...

  9. Vue一个案例引发「动画」的使用总结

    项目开发中动画有着很重要的作用,而且也是用到的地方非常多,例如:鼠标的进入离开,弹窗效果,组件的显示隐藏,列表的切换等等,可以说我们网页上的动画无处不在,也有人说了,这些东西也可以不使用动画. 对,你 ...

  10. IT java培训机构名单（不全）

    基本都是借着招聘的幌子来招生的 1 百影世纪(北京)文化传媒有限公司 2 北京博创智软科技有限公司 3 北京博达远创科技发展有限公司 4 北京春玉影视文化传媒有限公司 5 北京顶测科技有限公司 6 北 ...