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

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/Haytham_Chou/article/details/81332836

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

代码

<!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. jQuery之家介绍
  2. table2excel的github地址
  3. table2excel的js文件下载地址

总结

  1. 传入的参数默认是true(排除),需要显示的话就设置为false就可以了。
  2. 然后图片需要注意的是:图片地址要写一个完整的可以访问的互联网路径,要不然的话excel打不开,会显示空白的,然后你的电脑必须可以访问互联网。
  3. 这个demo并没有设置图片和表格的样式,有需要的自己设置。
  4. 我打开的文件是用office2016打开的。office其他的版本,以及wps均没有实验,可能会有差异吧,请注意!
  5. office 的受保护的视图,打开也是无法看到图片的,请自行搜索如何取消。

猜你喜欢

转载自blog.csdn.net/Haytham_Chou/article/details/81332836
今日推荐