div中的html表导出为ex​​cel

时间:2016-12-15 08:26:30

标签: javascript jquery excel export

  <script type="text/javascript">
        $(document).ready(function () {
            //getting values of current time for generating the file name
            $(".toExcelButton").click(function(){
            var dt = new Date();
            var day = dt.getDate();
            var month = dt.getMonth() + 1;
            var year = dt.getFullYear();
            var hour = dt.getHours();
            var mins = dt.getMinutes();
            var postfix = day + "." + month + "." + year + "_" + hour + "." + mins;
            //creating a temporary HTML link element (they support setting file names)
            var a = document.createElement('a');
            //getting data from our div that contains the HTML table
            var data_type = 'data:application/vnd.ms-excel';
            var table_div = document.getElementById('dvData');
            var table_html = table_div.outerHTML.replace(/ /g, '%20');
            a.href = data_type + ', ' + table_html;
            //setting the file name
            a.download = 'exported_table_' + postfix + '.xls';
            //triggering the function
            a.click();
            //just in case, prevent default behaviour
            e.preventDefault();
                })
        });
    </script>

需要将div表导出为ex​​cel。上面的代码在Chrome中运行良好,但在IE中无效。任何人都可以帮助我。

2 个答案:

答案 0 :(得分:3)

在IE中,需要将动态创建的锚标记添加到DOM以执行其click事件。此外,IE中不支持下载属性:

Download attribute on A tag not working in IE

编辑:

最近我发布了许多处理此问题的答案,其中有两个:

image does not download with it's own extension

JS Base64 string to downloadable pdf - Edge

基本上你必须在IE中使用msSaveOrOpenBlob():

var tF = 'Whatever.xls';
var tB = new Blob(..);

if(window.top.navigator.msSaveOrOpenBlob){
    //Store Blob in IE
    window.top.navigator.msSaveOrOpenBlob(tB, tF)
}
else{
    //Store Blob in others
    var tA = document.body.appendChild(document.createElement('a'));
    tA.href = URL.createObjectURL(tB);
    tA.download = tF;
    tA.style.display = 'none';
    tA.click();
    tA.parentNode.removeChild(tA)
}

在上面的案例中:

var tT = new XMLSerializer().serializeToString(document.querySelector('table')); //Serialised table
var tF = 'Whatever.xls'; //Filename
var tB = new Blob([tT]); //Blob

if(window.top.navigator.msSaveOrOpenBlob){
    //Store Blob in IE
    window.top.navigator.msSaveOrOpenBlob(tB, tF)
}
else{
    //Store Blob in others
    var tA = document.body.appendChild(document.createElement('a'));
    tA.href = URL.createObjectURL(tB);
    tA.download = tF;
    tA.style.display = 'none';
    tA.click();
    tA.parentNode.removeChild(tA)
}

https://jsfiddle.net/23ao1v0s/1/

答案 1 :(得分:0)

请查看以下给出的链接。我想你会得到一个问题的解决方案 https://github.com/rainabba/jquery-table2excel