方案一：

  • JS代码 
    <script>
    $(function(){
        //使用outerHTML属性获取整个table元素的HTML代码（包括<table>标签），然后包装成一个完整的HTML文档，设置charset为urf-8以防止中文乱码
        var html = \'\<html\>\<head\>\<meta charset="utf-8" \/\>\<\/head\>\<body\>\'
                + document.getElementsByTagName(\'table\')[0].outerHTML
                + \'\<\/body\>\</html\>\';

        // 实例化一个Blob对象，其构造函数的第一个参数是包含文件内容的数组，第二个参数是包含文件类型属性的对象
        var blob = new Blob([html], { type: "application/vnd.ms-excel" });
        var a = document.getElementsByClassName(\'export\')[0];

        // 利用URL.createObjectURL()方法为a元素生成blob URL
        a.href = URL.createObjectURL(blob);
        // 设置文件名

        a.download = "导出测试表.xls";
    })
    </script>
  • 导出按钮 
    <a href="" class="export" style="text-decoration: none;display: inline-block;width: 100%;">导出详情表</a>

 方案二：使用SheetJS插件进行下载

  • 　github地址：https://github.com/SheetJS/sheetjs
  •     代码示例

　　

<script src="/web/res/jquery/jquery-1.10.2.min.js"></script>
<script src="/web/res/sheetjs/xlsx.core.min.js"></script>

<button type="button" class="btn btn-primary analysis-btn"onclick="toExcel();">导出</button>
<script>
            // 导出功能
            function toExcel(){
                var blob = sheet2blob(XLSX.utils.table_to_sheet($(\'#order-data-table\')[0]));
                // 设置链接
                var link = window.URL.createObjectURL(blob);
                var a = document.createElement("a");// 创建a标签

                var levelType = $("#level-type").val();
                var city = $("#city").find(\'option:selected\').text();
                var district = $("#district").find(\'option:selected\').text();
                var grid = $("#grid").find(\'option:selected\').text();

                var fileName = \'测试导出示例\';

                a.download = fileName;// 设置被下载的超链接目标（文件名）
                a.href = link;//设置a标签的链接
                document.body.appendChild(a);// a标签添加到页面
                a.click();// 设置a标签触发单击事件
                document.body.removeChild(a);// 移除a标签
            }


            // 将一个sheet转成最终的excel文件的blob对象，然后利用URL.createObjectURL下载
            function sheet2blob(sheet, sheetName) {
                sheetName = sheetName || \'sheet1\';
                var workbook = {
                    SheetNames: [sheetName],
                    Sheets: {}
                };
                workbook.Sheets[sheetName] = sheet;
                // 生成excel的配置项
                var wopts = {
                    bookType: \'xlsx\', // 要生成的文件类型
                    bookSST: false, // 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性
                    type: \'binary\'
                };
                var wbout = XLSX.write(workbook, wopts);
                var blob = new Blob([s2ab(wbout)], {type:"application/octet-stream"});
                // 字符串转ArrayBuffer
                function s2ab(s) {
                    var buf = new ArrayBuffer(s.length);
                    var view = new Uint8Array(buf);
                    for (var i=0; i!=s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
                    return buf;
                }
                return blob;
            }
        </script>

 

版权声明：本文为wxdblog原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/wxdblog/p/10331334.html