純JS導出文件爲excel格式-----1

代碼很簡單,希望可以幫助大家。但是此方法有一個小小的弊端,主要是利用a標籤來實現的,嘗試使用別的沒有實現,如果有朋友實現了可以分享下,

小弟萬分感謝。(小弟不才,大神勿噴。。。直接上代碼了)

覺得不好用的可以參考下我的另一篇文章(http://blog.csdn.net/ymm_0008/article/details/72771186)


<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--這種下載只能利用a標籤-->
<div id="content1">
    js純前端導出內容。js純前端導出內容。js純前端導出內容。js純前端導出內容。-----1
</div>
<div id="content2">
    js純前端導出內容。js純前端導出內容。js純前端導出內容。js純前端導出內容。-----2
</div>
<div id="content3">
    js純前端導出內容。js純前端導出內容。js純前端導出內容。js純前端導出內容。-----3
</div>
<button id="out_btn"><a id="out_put" href="###">導&nbsp;出</a></button>


<script src="../jquery-1.11.3.min.js"></script>
<script>
    function exportTableToCSV(filename) {


        var str =  $('#content1').text()+$('#content2').text()+$('#content3').text();


        str =  encodeURIComponent(str);
        csvData = "data:text/csv;charset=utf-8,\ufeff"+str;
        $(this).attr({
            'download': filename,
            'href': csvData,
            'target': '_blank'

        });

alert("素材導出成功!");

    }


    $("a[id='out_put']").on('click', function (event) {
        filename="example_導出示例EXCEL.csv";
        exportTableToCSV.apply(this, [filename]);
        
    });
</script>
</body>

</html>


PS:別忘記引入JQ!!!我這個功能是直接下載的,沒有提示,大家可以自己在寫幾行代碼,加個模態框提示下,點擊確定之後再去下載。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章