话不多说，上代码！

<!DOCTYPE>

<html>

    <head>

        <title>Excel Test</title>

    </head>

    <body>

        <div style="width:100%;padding:40px;">

            Excel Test

        </div>

        <table id="excel">

            <tr>

                <td>Name</td>

                <td>Age</td>

                <td>Gender</td>

            </tr>

            <tr>

                <td>Young</td>

                <td>24</td>

                <td>Male</td>

            </tr>

            <tr>

                <td>Even</td>

                <td>23</td>

                <td>Female</td>

            </tr>

            <tr>

                <td>Leon</td>

                <td>25</td>

                <td>Male</td>

            </tr>

        </table>

    </body>

    <div style="width:200px;margin:auto;text-align:center;">

        <button onclick="ok()">导出</button>

    </div>

    <script>

    var ok = (function () {

        var uri = 'data:application/vnd.ms-excel;base64,',

            template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>',

            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 (table, name) {

            var tables = document.getElementById('excel');

            var ctx = { worksheet: name || 'Worksheet', table: tables.innerHTML }

            window.location.href = uri + base64(format(template, ctx));

        }

    })();

    function ExportSupplierMonthlyData() {

        try {

            tableToExcel();

        } catch (err) {

            bootbox.alert('没有数据，导出失败');

        }

    }

    </script>

</html>

前端JS脚本将网页表格导出为Excel的更多相关文章

  1. 网站开发进阶(二十五)js如何将html表格导出为excel文件

    js如何将html表格导出为excel文件        赠人玫瑰,手留余香.若您感觉此篇博文对您有用,请花费2秒时间点个赞,您的鼓励是我不断前进的动力,共勉! jsp页面数据导出成excel的方法很 ...

  2. 网站开发进阶(三十一)js如何将html表格导出为excel文件(后记)

    js如何将html表格导出为excel文件(后记) 前言 项目前期做了个导出Excel表格的功能,但是经过测试发现只有在IE上才可以正确实现,在Chrome等浏览器中无法实现导出效果.经过上网搜索,尝 ...

  3. 纯JS 将table表格导出到excel

    html <div > <button type="button" onclick="getXlsFromTbl('tableExcel','myDiv ...

  4. 利用 JS 脚本实现网页全自动秒杀抢购

    利用 JS 脚本实现网页全自动秒杀抢购 倒计时页面: 倒计时未结束时,购买按钮还不能点击. 结束时,可以点击购买,点击后出现提示"付款成功" 展示效果 1.制作测试网页 首先我们来 ...

  5. JS 将页面上的表格导出为 Excel 文件

    如果在页面上展示了一个表格,想把这个表格导出为Excel文件,那么在要求不高的情况下,可以直接利用 JavaScript 的 Blob 和 Object URL 特性将表格导出.不过,这就是利用了 E ...

  6. vue将表格导出为excel

    vue将表格导出为excel 一:在项目中需要安装2个依赖项,如下命令: npm install --save file-saver xlsx 二:在vue文件中如下使用即可: <templat ...

  7. 使用JavaScript把页面上的表格导出为Excel文件

    如果在页面上展示了一个数据表格,而用户想把这个表格导出为Excel文件,那么在要求不高的情况下,可以不通过服务器生成表格,而是直接利用JavaScript的Blob和Object URL特性将表格导出 ...

  8. 使用js代码将HTML Table导出为Excel

    使用js代码将HTML Table导出为Excel的方法: 直接上源码 <html> <head> <meta http-equiv="Content-Type ...

  9. 表格导出到excel的样式消失该如何修改

    工作中遇到一需求,要将后台的表格导出到excel后的表格样式该如何修改呢? 其实表格导出首先需要了解两个插件:jquery.table2excel.js和tableExport.js 1.第一步,写一 ...

随机推荐

  1. [UOJ348]州区划分

    设$f_i$表示选状态为$i$的点的答案,$s_i$表示状态为$i$的点权和,$不存在欧拉回路g_i=[i\,不存在欧拉回路]s_i$ 那么$f_i=\sum\limits_{j\subset i}\ ...

  2. 【最小生成树】【kruscal】【贪心】CDOJ1636 梦后楼台高锁，酒醒帘幕低垂

    首先,考虑到,我们需要找到一条路径,使它的最小边尽量大,最大边尽量小 然后,考虑到m比较小,我们可以去寻找一个m^2或者m^2logm的算法 考虑枚举最小边,那么我们就需要在m或者mlogm的时间内找 ...

  3. 【贪心】【set】zoj3963 Heap Partition

    贪心地从前往后扫,每到一个元素,就查看之前的元素中小于等于其的最大的元素是否存在,如果存在,就将它置为其父亲.如果一个结点已经是两个儿子的父亲了,就不能在set中存在了,就将他删除.如果然后将当前元素 ...

  4. canvas之arcTo

    arc与arcTo,从名字都能看出来相似.arcTo也是画曲线的方法,而且他画出的曲线也是正圆的一段弧线.但他的参数和arc简直是不共戴天~ ctx.arcTo(x1,y1,x2,y2,radius) ...

  5. Linux下使用cut切割有规则的列文本

    data.txt NO Name Mark Percent 1 Sarath 45 90 2 Alex 49 98 3 Anu 45 90 分隔符(定界符)为Tab 制表符 如果我要取得第二列,所有人 ...

  6. hdu3401 Trade 单调队列优化dp

    Trade Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Subm ...

  7. C#开源框架整理

    Json.NET http://json.codeplex.com/ Json.Net 是一个读写Json效率比较高的.Net框架.Json.Net 使得在.Net环境下使用Json更加简单.通过Li ...

  8. 高手从零开始的全定制发行版-Linux from Scratch

    在制作Linux发行版中Linux from Scratch可谓是真正的大师级.Linux from Scratch是在线的社区创建的一本电子书,目的是帮助那些根深蒂固的想方设法提高计算机性能的人(t ...

  9. java jar包 log4j不能输出解决方法

    今天运行一个jar包,jar包中使用了springContext进行加载bean和log4j配置,但是发现不能正常输入日志. 代码中增加 Xxx.class.getResource("/&q ...

  10. 关于TagHelper的那些事情——自定义TagHelper（TagHelper的Attributes）

    接上 Attributes 在最新的VS2015RC版,开始支持了TagHelper的智能提示,主要体现在在写TagHelper有Attributes的提示,正确的Tag和Attribute会变成粗体 ...