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

最新推荐文章于 2024-07-18 17:29:46 发布

放开那个桃子

最新推荐文章于 2024-07-18 17:29:46 发布

阅读量1.5k

点赞数 1

本文链接：https://blog.csdn.net/qq_33505051/article/details/78678540

版权

遇到问题

代码在谷歌浏览器上的导出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();

    }
})()