前端导出数据到excl表格

最新推荐文章于 2024-09-28 19:02:04 发布

anan24728

最新推荐文章于 2024-09-28 19:02:04 发布

阅读量81

点赞数

文章标签：前端 json ViewUI

原文链接：http://www.cnblogs.com/zjy1017/p/7083445.html

版权

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

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>