前端JS脚本将网页表格导出为Excel

话不多说,上代码!

<!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>
时间: 2024-12-28 09:32:56

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

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

如果在页面上展示了一个表格,想把这个表格导出为Excel文件,那么在要求不高的情况下,可以直接利用 JavaScript 的 Blob 和 Object URL 特性将表格导出.不过,这就是利用了 Excel 能打开 HTML 文档的特性,所以导出的表格实际上是一个 HTML 文档,并且其扩展名只能为 .xls,而不能是 .xlsx,否则Excel无法打开.(有使用JavaScript生成真正Excel文件的方案,以后再研究.) 实例: <!DOCTYPE html> <html>

html页面表格导出到excel

几种把html页面表格导出到excel的方法比较. 表格例子如下: <table id="tableExcel" width="100%" border="1" cellspacing="0" cellpadding="0"> <tr> <td colspan="5" align="center">html 表格导出道Exceltd

将HTML表格导出到EXCEL,兼容Firefox,支持中文

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <meta http-equiv="Content

MVC把表格导出到Excel

有关Model: namespace MvcApplication1.Models { public class Coach { public int Id { get; set; } public string Name { get; set; } } } HomeController中,借助GridView控件把内容导出到Excel: using System.Collections.Generic; using System.IO; using System.Linq; using Sys

前端js脚本与防止js脚本

前言 身为一名前端开发工程师,有时候业务场景是无法用手速模拟的,老司机也有翻车的时候[你懂得].因此我特意写这一篇文章,希望能够对大家有所帮助. 涉及到的内容: 1.chrome浏览器 2.js代码 3.函数节流 第一步 打开chrome浏览器,使用组合键Ctrl+shift+i打开开发者工具,接下来如图所示. 点击snippets 第二步 如图所示 点击new snippet -->输入脚本'名称'-->Ctrl+s保存. 第三步 如图所示 选择新创建的脚本'名称',在如图所示的第二步进行编

html页面表格导出到excel总结

转载:http://www.cnblogs.com/liuguanghai/archive/2012/12/31/2840262.html <table id="tableExcel" width="100%" border="1" cellspacing="0" cellpadding="0"> <tr> <td colspan="5" align=&qu

将表格导出为excel

1 <table id="tableExcel" border="1"> 2 <tr> 3 <th>零</th> 4 <th>一</th> 5 <th>二</th> 6 <th>三</th> 7 <th>四</th> 8 </tr> 9 <tr> 10 <td>万籁寂无声</td&g

mysql数据库表格导出为excel表格

在本地数据库中操作如下: 由于excel表格的编码是GBK,所以导出时要加一个设置字符编码: select * from 某个表 into outfile 'd:/文件名.xls' CHARACTER SET gbk;

ssh+jxl将表格导出为Excel

首先准备jxl.jar. 然后让我们了解了解这个jxl,Excel本来就有工作簿.工作表.单元格等属性,所以我们从数据库导出表格也必须先有工作簿(workbook).工作表(sheet).单元格(label).实现导出表格也是从三个入手. 首先创建一个writeworkbook对象 Writableworkbook  book=Workbook.createWorkbook(new File(path)): 然后创建工作表sheet对象 WritableSheet sheet=book.crea