首页 > 代码库 > 前端导出数据到excl表格

前端导出数据到excl表格

2024-10-12 17:51:39   213人阅读

首先，导出的数据来源可能有两种：

1. 页面的HTML     table表格

2. json纯数据
第一种 页面的HTML内容导出
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
    <style>
        table {
            border-collapse: collapse;
            color: #555;
            font-weight: normal;
        }
    </style>
</head>
<body>
<table border="1" id="aa">
    <caption>水果列表</caption>
    <tr>
        <th>类别</th>
        <th>名称</th>
    </tr>
    <tr>
        <th>水果</th>
        <th>苹果</th>
    </tr>
    <tr>
        <th>水果</th>
        <th>香蕉</th>
    </tr>
    <tr>
        <th>水果</th>
        <th>梨子</th>
    </tr>
</table>

<div class="daochu" id="daochu">导出表格</div>
<script>
    var html = "<html><head><meta charset=‘utf-8‘ /></head><body>" + document.getElementById("aa").outerHTML + "</body></html>";
    var blob = new Blob([html], { type: "application/vnd.ms-excel" });
    var url_link=URL.createObjectURL(blob);
    var daochu=document.getElementById("daochu");
    daochu.onclick=function(){
        window.open(url_link);
    };
</script>
</body>
</html>

 

前端导出数据到excl表格


联系
我们