使用JavaScript把页面上的表格导出为Excel文件

最新推荐文章于 2023-05-19 11:19:48 发布

你好龙卷风！！！

最新推荐文章于 2023-05-19 11:19:48 发布

阅读量316

点赞数

分类专栏：前台javaScript，jquery

本文链接：https://blog.csdn.net/zhaofuqiangmycomm/article/details/101533717

版权

前台javaScript，jquery 专栏收录该内容

72 篇文章 1 订阅

订阅专栏

jsp:

 <li>&nbsp;&nbsp;&nbsp;
                        <a id="exportId" >  <input   class="btn btn-primary  "    type="button" value="导出统计结果"/></a>
                    </li>


<table class="table-worksheetReport data-table" border="1" id="table2excel">
    <tbody>
    <tr  >
        <td class="td-HeadEmpty"></td>
        <td colspan="9" class="td-HeadTitle"> <p  class="td-HeadTitle-p">统计结果</p></td>
        <td class="td-HeadEmpty"></td>
    </tr>
    <tr >
        <td class="td-BodyEmpty"></td>
        <td  class="td-body-title"><p class="td-body-p"> 分档 </p></td>
        <td  class="td-body-small-title"><p class="td-body-p">10+	</p></td>
        
        <td ></td>

    </tr>
    <td class="td-HeadEmpty"></td>
    <td   class="td-body-column-title"><p class="td-body-p">激励比例 </p></td>
    <td  class="td-body-column-title"><p class="td-body-p">2	</p></td>
    <td ></td>
    </tr>
    <tr  >
        <td class="td-HeadEmpty"></td>
        <td   class="td-body-column-title"><p class="td-body-p">人数 </p></td>

        <td  class="td-body-content"><p class="td-body-p">${gradingMap.grading20}	            </p></td>

        <td class="td-BodyEmpty"></td>
    </tr>
    </tbody>
</table>

js：

<script>
    $(function(){
        // 使用outerHTML属性获取整个table元素的HTML代码（包括<table>标签），然后包装成一个完整的HTML文档，设置charset为urf-8以防止中文乱码
        var html = "<html><head><meta charset='utf-8' /></head><body>" + document.getElementsByTagName("table")[1].outerHTML + "</body></html>";

        // 实例化一个Blob对象，其构造函数的第一个参数是包含文件内容的数组，第二个参数是包含文件类型属性的对象
        var blob = new Blob([html], { type: "application/vnd.ms-excel" });
        var a =  $("#exportId");
        console.log(blob);
        console.log("===============");

        // 利用URL.createObjectURL()方法为a元素生成blob URL
        //a.href = URL.createObjectURL(blob);
        $("#exportId").attr('href',  URL.createObjectURL(blob));
        $("#exportId").attr('download', "回访统计结果.xls");
        // 设置文件名
        console.log(a);
    });

</script>

参考：https://www.cnblogs.com/zhuxinghan/p/6063193.html （这个是html的写法，忘了jsp是动态页面，不能直接对页面元素操作，要通过页面初始化事件或其它事件进行操作，）

此导出在复杂布局的时候就不带边框了，

原样导出 https://blog.csdn.net/zhaofuqiangmycomm/article/details/112479603