THML嵌套table導出Excel

1.支持表格嵌套的HTML導出到Excel。這種方式生成的文本文件是HTML代碼,不是真正的Excel文件。但是可以被Excel解析,並且還附帶有樣式。但是每次打開時會彈出提示“文件安全性有問題”對話框。源碼如下:

// 導出excel,支持表格嵌套
    $('body').on('click', '.exportExcel', function () {
        // 使用outerHTML屬性獲取整個table元素的HTML代碼(包括<table>標籤),然後包裝成一個完整的HTML文檔,設置charset爲urf-8以防止中文亂碼
        //獲取表格
        var tableHtml = $('#example');  // 所需導出table的id
        //不能顯示class的樣式,所以自己重新添加樣式 主要爲設置邊框 格子大小
        $(tableHtml).css({
            'border': '1px solid #d5d5d2',
            'text-align': 'center',
            'border-collapse': 'collapse'
        });
        $(tableHtml).find('tr th').css({
            'text-align': 'center',
            'border': '1px solid #d5d5d2',
            'line-height': '30px',
            'padding': '0px 10px',
            'min-width': '100px'
        });
        $(tableHtml).find('tr td').css({
            'text-align': 'center',
            'border': '1px solid #d5d5d2',
            'line-height': '30px',
            'padding': '0px 10px',
            'min-width': '100px'
        });

        var html = "<html><head><meta charset='utf-8' /></head><body>" + tableHtml[0].outerHTML + "</body></html>";
        // 實例化一個Blob對象,其構造函數的第一個參數是包含文件內容的數組,第二個參數是包含文件類型屬性的對象
        var blob = new Blob([html], {type: "application/vnd.ms-excel"});
        var urlA = document.createElement('a');
        // 利用URL.createObjectURL()方法爲a元素生成blob URL
        $('.table-btn-group').append(urlA);
        urlA.href = URL.createObjectURL(blob);
        // 設置文件名,目前只有Chrome和FireFox支持此屬性
        urlA.download = "導出文件名稱.xls";
        urlA.click();
    });

2.使用table2excel導出excel,不支持嵌套表格的導出

    //導出表格
    $('body').on('click', '.exportExcel', function () {
        $("#example").table2excel({   // 所需導出table的id
            exclude: ".operate",   // 不需要導出的欄位td
            name: "名稱",
            filename: "導出文件名稱",  
            fileext: ".xls",  //文件類型
            exclude_img: true,  //導出圖片
            exclude_links: true,  //導出鏈接
            exclude_inputs: true  //導出輸入框
        });
    });
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章