table导出excel--控制台操作

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

  • 按F12 或者右键–检查调出控制台
  • ctrl+shif+c或者点击下图图标
    点击图标
  • 然后将鼠标移动到表格外层(任意地方),如图:
    table导出excel--控制台操作_第1张图片
    点击之后,下面的调试控制台会选中当前元素,然后在当前元素右键选择 Edit as HTML
    table导出excel--控制台操作_第2张图片
    将下面两句代码插入选中的html最前面(后面也行)


如图:
加之前:before
加之后:
after
加完之后会多出一个 Export to Excel按钮,虽然长的不好看,凑合用。效果如图:
table导出excel--控制台操作_第3张图片

  • 继续ctrl+shif+c或者点击下图图标
    点击图标
    鼠标移动到table上,右键 Edit as HTML,添加id=‘tables’,如图:
    table导出excel--控制台操作_第4张图片
  • 点击Console
    table导出excel--控制台操作_第5张图片
  • 输入下面的代码:
var tableToExcel = (function () {
            var uri = 'data:application/vnd.ms-excel;base64,',
                template = '{table}
', 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按钮就可以下载了

你可能感兴趣的:(web,html,js)