如何在按钮单击下在excel表中下载html表(不使用php)

时间:2016-05-31 06:28:28

标签: javascript jquery html css excel

我想在点击按钮时以excel格式下载这个html表。请不要使用php和所有。使用javscript / css。请提供完整的代码,并粘贴相同所需的js文件的链接。

<table id="tb1">
    <tr>
        <td>Product</td>
        <td>Price</td>
        <td>Available</td>
        <td>Count</td>
    </tr>
    <tr>
        <td>Bred</td>
        <td>1</td>
        <td>2</td>
         <td>3</td>
    </tr>
    <tr>
        <td>Butter</td>
        <td>4   </td>
        <td>5   </td>
        <td >6  </td>
    </tr>

1 个答案:

答案 0 :(得分:1)

有很多方法可以实现它,你只需要探索和学习。这是我的建议。请检查这些并更改代码以满足您的需要。

此方法适用于IE7 +,Firefox,Chrome和Safari。这是javascript:

function ToExcelReport(){
    var tab_text="<table border='2px'><tr bgcolor='#FFFFFF'>";
    var textRange; var j=0;
    tab = document.getElementById('tb1'); //id of table

    for(j = 0 ; j < tab.rows.length ; j++){     
        tab_text=tab_text+tab.rows[j].innerHTML+"</tr>";
    }

    tab_text=tab_text+"</table>";
    tab_text= tab_text.replace(/<A[^>]*>|<\/A>/g, "");//remove if u want links in your table
    tab_text= tab_text.replace(/<img[^>]*>/gi,""); //remove if u want images in your table
    tab_text= tab_text.replace(/<input[^>]*>|<\/input>/gi, ""); //remove input params

    var ua = window.navigator.userAgent;
    var msie = ua.indexOf("MSIE "); 

    if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)){
        //if Internet Explorer
        txtArea1.document.open("txt/html","replace");
        txtArea1.document.write(tab_text);
        txtArea1.document.close();
        txtArea1.focus(); 
        sa=txtArea1.document.execCommand("SaveAs",true,"Sample.xls");
    } else{
        //other browsers
        sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));  
    }

    return (sa);
}

现在创建一个空白的iframe:

<iframe id="sample" style="display:none"></iframe>

然后创建一个触发导出的按钮。 (这取决于你)

<button id="btnExport" onclick="ToExcelReport();"> EXPORT </button>

这是另一种方法。以jquery方式进行。 (Jquery DataTables Table Tools plugin)但缺点是,如果偶然你没有闪光灯,它将无法正常工作。

$(document).ready( function () {
    $('#tb1').dataTable( {
        "sDom": 'T<"clear">lfrtip',
        "oTableTools": {
            "sSwfPath": "/swf/copy_cvs_xls_pdf.swf"
        }
    } );
} );

最后,我所知道的最好的方法是使用服务器端语言(因为有时客户端语言在这种情况下会很痛苦)。如果你有时间思考并改变你对生活的看法......开玩笑!...使用PHPExcel:)