table导出excel--控制台操作

table导出excel的js方法：
利用html5的download属性，点击下载该文件

按F12 或者右键–检查调出控制台
ctrl+shif+c或者点击下图图标
然后将鼠标移动到表格外层（任意地方），如图：

点击之后，下面的调试控制台会选中当前元素，然后在当前元素右键选择 Edit as HTML

将下面两句代码插入选中的html最前面（后面也行）

<a id="dlink"  style="display:none;"></a>
<input type="button" onclick="tableToExcel('tables', 'name', 'myfile.xls')" value="Export to Excel">

如图：
加之前： before
加之后：
after
加完之后会多出一个 Export to Excel按钮，虽然长的不好看，凑合用。效果如图：
加完效果图

继续ctrl+shif+c或者点击下图图标

鼠标移动到table上，右键 Edit as HTML，添加id=‘tables’,如图：
点击Console
输入下面的代码：

var tableToExcel = (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, filename) {
                if (!table.nodeType) table = document.getElementById(table)
                var ctx = { worksheet: name || 'Worksheet', table: table.innerHTML }
    
                document.getElementById("dlink").href = uri + base64(format(template, ctx));
                document.getElementById("dlink").download = filename;
                document.getElementById("dlink").click();
            }
        })()

然后回车之后可以点击上一步加的 Export to Excel按钮就可以下载了

table导出excel--控制台操作

猜你喜欢