使用table2excel+jquary实现页面表单导出为xls格式

最新推荐文章于 2023-02-22 10:41:57 发布

Amazing66

最新推荐文章于 2023-02-22 10:41:57 发布

阅读量450

点赞数

文章标签： html

本文链接：https://blog.csdn.net/Amazing66/article/details/121553245

版权

首先引入jquary和table2excel.js 的js插件

链接：https://pan.baidu.com/s/1fynlG7LT9aGxNGr3B_HRJw
提取码：1111

然后编辑一个简单的测试页面

<!DOCTYPE>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>TABLE转换EXCEL</title>
    <script src="static/js/jquery.js" ></script>
    <script src="static/table2excel.js"></script>
    <style type="text/css">
        .btn{
            margin:20px;
        }
    </style>
</head>
<body>
<center>
    <input class="btn" type="button" id="btn"  value="点击导出">
    <div class="table2excel">
        <table id = 'testTable' border="1">
            <tr>
                <th>标题一</th>
                <th>标题二</th>
                <th>标题三</th>
            </tr>
            <tr  class="noExl">
                <td>100 (不导出)</td>
                <td>200 (不导出)</td>
                <td>300 (不导出)</td>
            </tr>
            <tr>
                <td>400</td>
                <td>500</td>
                <td>600</td>
            </tr>
            <tr>
                <td><a href="http://www.baidu.com">baidu.com</a></td>
                <td><input tyle="text" value="input 数据"></td>
                <td>哈哈哈</td>
            </tr>
        </table>
    </div>
</center>
<script type="text/javascript">
    $(function(){
    //点击id为excelbtn的按钮
    $("#btn").click(function(){
        //testTablel是需要导出table的id
        $("#testTable").table2excel({
            //需要导出的列
            columns:[0],
            // 不被导出的表格行的CSS class类
            exclude: ".noExl",
            // 导出的Excel文档的名称
            name: "Excel",
            // Excel文件的名称
            filename: "Excel",
            // 是否导出图片
            exclude_img: true,
            // 是否导出超链接
            exclude_links: true,
            // 是否导出输入框中的内容
            exclude_inputs: true,
        });
    })})
</script>
</body>
</html>