js实现表格导出功能

最新推荐文章于 2025-01-09 17:05:25 发布

原创最新推荐文章于 2025-01-09 17:05:25 发布 · 550 阅读

0 ·

CC 4.0 BY-SA版权

javascript 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了如何利用JavaScript实现网页中表格数据的导出功能，让读者能够将表格信息保存为方便查看和处理的文件格式。

js实现表格导出功能

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>
</head>

<body>
    <span class="a">333</span>
</body>
<script src="jquery.min.js"></script>
<script>
    var str = `
	    <tr>
	        <th colspan="4">张三</th>
	    </tr>
	    <tr>
	        <td colspan="2" align="center" valign="middle">李四</td>
	        <td colspan="2" align="center" valign="middle">$100</td>
	    </tr>
	    `

    $(".a").on("click", function () {
        let worksheet = 'Sheet1'
        let uri = 'data:application/vnd.ms-excel;base64,';

        //下载的表格模板数据
        let 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>${worksheet}</x:Name>
	        <x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet>
	        </x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]-->
            </head><meta http-equiv="content-type" content="application/vnd.ms-excel; charset=UTF-8"><body><table border="1">${str}</table></body></html>`;
            //通过创建a标签实现
            console.log(template)
            var link = document.createElement("a");
            uri = uri + window.btoa(unescape(encodeURIComponent(template)));
            link.href = uri;
            //对下载的文件命名
            link.download = "水厂运行报表.xls";
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
    })
</script>
</html>