使用tableExport 导出excel表

最新推荐文章于 2025-07-09 16:13:44 发布

原创最新推荐文章于 2025-07-09 16:13:44 发布 · 3.8k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#tableExport导出excel #bootstrap-table

web 专栏收录该内容

11 篇文章

订阅专栏

本文介绍如何利用tableExport.js快速实现网页表格数据导出为Excel文件的方法，包括前端页面配置、按钮事件绑定及导出限制说明。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

	之前也接触过使用POI导入导出excel表，今天就试试了tableExport.js导出excel表，还很好上手。

废话不多说，直接上码。

前端页面需要准备的材料：
常用的bootstrap css 和 js，这里需要导入tableExport.js针对excel导入导出，因为是框架目前只能导出单当页面的信息，如果有些特定的功能还是需要使用自己POI单独做导入导出！
在这里插入图片描述
网上搜一下相关的包，或者去官网下一个自己搜一下

  <link rel="stylesheet" type="text/css" href="${path}/cs/bootstrap-table.min.css"/>
  <link rel="stylesheet" type="text/css" href="${path}/cs/bootstrap.min.css"/>
  
  <script type="text/javascript" src="${path}/js/jquery-1.11.0.min.js"></script>
  <script type="text/javascript" src="${path}/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="${path}/js/bootstrap-table.min.js"></script>
  <script type="text/javascript" src="${path}/js/tableExport.js"></script>
  <script type="text/javascript" src="${path}/js/bootstrap-table-zh-CN.js"></script>

常规操作：弄一个button 数据导出

 <button type="button" class="btn btn c-theme-btn" id="btn_download">数据导出</button>

常规操作：定义一个点击事件

	$('body').on('click','#btn_download',function(){//添加按钮点击事件
			      $('#table_page').tableExport( { type: 'excel', escape: 'false' , fileName: name + '工资表导出数据' });
			  });

需要注意的是：1.该工具只能到当前页面显示的，如果页面有折叠，显示隐藏项的列就只能导出你操作后的结果（可能我用的还不是很熟练），2.如果搜索很多条，它也只导出当前页的信息，所有有必要修改下一个页面需要展示多少条（pageList）。

	                pageNumber: 1,    //如果设置了分页，首页页码
					pageSize: 10,                       //每页的记录行数（*）
				    pageList: [10,20，50，100],        //可供选择的每页的行数（*）