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

时间：2020-07-07 12:50:05 阅读：94 评论：0 收藏：0 [点我收藏+]

标签：导出excel 相对路径资源下载文章移动 load 打开文件下载源文件

场景

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导出
         });