Jquery中使用table2excel插件实现将Html的table导出为Excel(附示例代码和资源下载)

场景

jquery-table2excel是一款可以将HTML表格的内容导出到微软Excel电子表格中的jQuery插件。

效果

在Html中有一个表格

 

点击导出按钮

 

将其导出后

 

注:

博客:
https://blog.csdn.net/badao_liumang_qizhi
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

首先下载jquery和jquery.table2excel的js文件,下载方式见文末。

 

新建一个文件夹table2excel,然后在此目录下新建js目录,然后将上面两个js文件复制到js目录下。

然后在table2excel目录库下新建badao.html,代码如下:

<!DOCTYPE html>
<html>
<head lang="en">
  <meta http-equiv="Content-Type" content="text/html; charset=gbk">
  <title>html 表格导出--table2excel</title>
  <script src="js/jquery-1.6.4.min.js"></script>
  <script src="js/jquery.table2excel.min.js"></script>
  <script language="JavaScript" type="text/javascript">
 
   function ExportToExcel() {     
         $("#tableExcel").table2excel({
           exclude : ".noExl", //过滤位置的 css 类名
           filename : "badao.xls", //文件名称
           name: "Excel Document Name.xlsx",
           exclude_img: false,//是否导出图片 false导出
           exclude_links: true,//是否导出链接 false导出
           exclude_inputs: true//是否导出输入框的值 true导出
         });           
    }
  </script>
</head>
<body>
<div >
  <button type="button" id="btnExport" onclick="ExportToExcel();">导出Excel</button>
</div>
<div id="myDiv">
  <table id="tableExcel" width="100%" border="1" cellspacing="0" cellpadding="0">
    <tr>
      <td colspan="5" align="center">html 表格导出Excel</td>
    </tr>
    <tr class="noExl">
      <td>公众号:</td>
      <td>列标题2</td>
      <td>类标题3</td>
      <td>列标题4</td>
      <td>列标题5</td>
    </tr>
    <tr>
      <td>aaa</td>
      <td colspan="2">霸道的程序猿</td>
      <td>ccc</td>
      <td>ddd</td>

    </tr>
    <tr>
      <td>AAA</td>
      <td>BBB</td>
      <td>CCC</td>
      <td>DDD</td>
      <td><img style="width:200px;height:200px;" src="img/badao.jpg" /></td>
    </tr>
    <tr>
      <td>FFF</td>
      <td>GGG</td>
      <td>HHH</td>
      <td>III</td>
      <td>JJJ</td>
    </tr>
  </table>
</div>
</body>
</html>

在页面中引入了一个相对路径的图片,所以在table2excel下新建img目录,然后将badao.jpg复制到此目录下。

使用浏览器打开badao.html文件即可。

在啥上面的代码中设置按钮的点击事件,在按钮的点击事件中执行以下方法:

         $("#tableExcel").table2excel({
           exclude : ".noExl", //过滤位置的 css 类名
           filename : "badao.xls", //文件名称
           name: "Excel Document Name.xlsx",
           exclude_img: false,//是否导出图片 false导出
           exclude_links: true,//是否导出链接 false导出
           exclude_inputs: true//是否导出输入框的值 true导出
         }); 

即可执行导出。

注意可以设置的一些参数。这里要到处的内容包括一张照片注意要设置exclude_img为false而不是true。

但是这里的图片的路径是相对路径,所在在导出的Excel中的照片的路径也是相对路径。

所以在导出的Excel中要显示照片的话需要将excel移动到和badao.html同目录下。

或者直接可以使用网络图片。

使用该插件导出的Excel会根据Table的跨行跨列进而跨行跨列显示。

但是此种方式导出的Excel在打开时会有警告提示。

 

点击是打开即可。

示例代码与js资源文件下载

见下面文章末:

https://mp.weixin.qq.com/s/fT5r25RQLo0yA4o4tYxXFg

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

霸道流氓气质

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值