使用jquery.table2excel，将HTML的table标签数据导出成excel，包含导出图片到excel

news/2024/7/21 7:05:43 标签: excel

在web实际使用中，需要将页面的表格转换成为EXCEL表格，原想写个原生的，但是发现一个插件很好用——jquery.table2excel，在这写一个简单的demo。

参考来源

jQuery之家介绍
table2excel的github地址
table2excel的js文件下载地址

源代码

<!DOCTYPE>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>TABLE转换EXCEL</title>
        <script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js" ></script>
        <script src="js/jquery.table2excel.js"></script>
        <style type="text/css">
            .btn{
                margin:20px;
            }
        </style>
    </head>
    <body>
        <center>
            <input class="btn" type="button"  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><img src="http://yuyuan:8080/zzz/img/test.jpg" alt="image"></td>
                    </tr>
                </table>
            </div>
        </center>
        <script type="text/javascript">
            $(function() {
                $(".btn").click(function(){
                    $(".table2excel").table2excel({
                        // 不被导出的表格行的CSS class类
                        exclude: ".noExl",
                        // 导出的Excel文档的名称
                        name: "Excel Document Name",
                        // Excel文件的名称
                        filename: "test",
                        //文件后缀名
                        fileext: ".xls",
                        //是否排除导出图片
                        exclude_img: false,
                        //是否排除导出超链接
                        exclude_links: false,
                        //是否排除导出输入框中的内容
                        exclude_inputs: false
                    });
                }); 
            });
        </script>
    </body>
</html>

效果截图

1.页面运行效果图
这里写图片描述
2、office 2016（我只试了这个，其他的没装就没试了）打开截图

excel文件代码">EXCEL文件代码

test.xls

<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"><meta http-equiv="content-type" content="application/vnd.ms-excel; charset=UTF-8"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>Sheet0</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table><tr><td/>标题一</td><td/>标题二</td><td/>标题三</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/><img src="http://yuyuan:8080/zzz/img/test.jpg" alt="image"></td></tr></table></body></html>