前端：导出表格

时间：2024-04-10 07:06:43

核心代码：

function handleExport(HTML,title){
var uri = 'data:application/vnd.ms-excel;base64,';
        var 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>Sheet1</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets>'
          + '</x:ExcelWorkbook></xml><![endif]-->' +
          '</head><body>' + HTML + '</body></html>';
        var a = document.createElement("a");
        a.href = uri + window.btoa(unescape(encodeURIComponent(template)));
        a.download = title+".xls";
        a.target = "";
        document.body.appendChild(a).click();
        document.body.removeChild(a);
}

代码解析：HTML为表格部分的html代码,title为要导出表格的名称

HTML实例:(基本的表格结构要有)

<table>

        <thead><tr><th>表头名称</th></tr></thead>

        <tbody><tr><td>表格内容</td></tr></tbody>

</table>

细节解析：

①导出表格要调整样式，直接在HTML中增加css代码就可以了

②若要导出数值以文本形式呈现，不展示为科学计数法的形式，可以在HTML中使用

<table style="vnd.ms-excel.numberformat:@"></table>

③导出为excel形式会有最大列数限制，这个受excel版本的影响

相关文章