js导出excel, 并解决文件名是随机的问题,兼容多个浏览器

来源：互联网发布：固定资产标签软件编辑：程序博客网时间：2024/06/05 12:40

遇到问题

代码在谷歌浏览器上的导出excel就是正常的,到火狐上就不好用了,之前的同事可能是用angluarJS 的自定义指令写出来的, 找了很久也没实质上解决浏览器兼容问题, 然后找到个js导出excel,火狐谷歌就都能用了,

但是在调试的过程中,下载的时候功能是没有问题的,就是导出的excel文件名在谷歌上是下载.xls, 火狐上下载名是随机的string,这就很奇怪,查了下资料, 谷歌下载的文件名在没有定义的时候, 默认为下载, 这就有新的问题了,怎么设置导出excel的文件名,这里是用了国外小哥的一种办法,用a标签解决了,下面是解决过程:

解决问题

国外小哥原文

I’m trying to use this script to save a html table to an Excel file, and it works fine, however it doesn’t come up in the proper name, but rather with a random string. And I can’t see why .
I call it with:

code

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) {if (!table.nodeType) table = document.getElementById(table)var ctx = {worksheet: name || 'Worksheet', table: table.innerHTML}window.location.href = uri + base64(format(template, ctx))}})()

涉及到一些HTML a标签的知识
这里写图片描述

我解决的代码

html页面的代码

<a id="dlink"  style="display:none;"></a><input  class="btn green search-button pull-right" style="margin-left: 6px;" type="button" onclick="tableToExcel('table001', '企业列表', ' 企业列表.xls')" value="导出当前页面表格为EXCEL">

其中tableToExcel方法中,第一个参数是html页面table的id, 第二个参数是excel解析成xml中的{worksheet}名字,也就是打开excel左下那个地方的名字,第三个参数就是文件名了.

js代码

/** * Created by liubin on 2017/11/30. */var idTmr;function  getExplorer() {    var explorer = window.navigator.userAgent ;    //ie    if (explorer.indexOf("MSIE") >= 0) {        return 'ie';    }    //firefox    else if (explorer.indexOf("Firefox") >= 0) {        return 'Firefox';    }    //Chrome    else if(explorer.indexOf("Chrome") >= 0){        return 'Chrome';    }    //Opera    else if(explorer.indexOf("Opera") >= 0){        return 'Opera';    }    //Safari    else if(explorer.indexOf("Safari") >= 0){        return 'Safari';    }}function method1(tableid) {//整个表格拷贝到EXCEL中    if(getExplorer()=='ie')    {        var curTbl = document.getElementById(tableid);        var oXL = new ActiveXObject("Excel.Application");        //创建AX对象excel        var oWB = oXL.Workbooks.Add();        //获取workbook对象        var xlsheet = oWB.Worksheets(1);        //激活当前sheet        var sel = document.body.createTextRange();        sel.moveToElementText(curTbl);        //把表格中的内容移到TextRange中        sel.select();        //全选TextRange中内容        sel.execCommand("Copy");        //复制TextRange中内容        xlsheet.Paste();        //粘贴到活动的EXCEL中        oXL.Visible = true;        //设置excel可见属性        try {            var fname = oXL.Application.GetSaveAsFilename("Excel.xls", "Excel Spreadsheets (*.xls), *.xls");        } catch (e) {            print("Nested catch caught " + e);        } finally {            oWB.SaveAs(fname);            oWB.Close(savechanges = false);            //xls.visible = false;            oXL.Quit();            oXL = null;            //结束excel进程，退出完成            //window.setInterval("Cleanup();",1);            idTmr = window.setInterval("Cleanup();", 1);        }    }    else    {        tableToExcel(tableid)    }}function Cleanup() {    window.clearInterval(idTmr);    CollectGarbage();}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;//这里是关键所在,当点击之后,设置a标签的属性,这样就可以更改标签的标题了        document.getElementById("dlink").click();    }})()

over

阅读全文

0 0