使用jquery-table2excel.js插件直接将html上的table表格导出为excel文件

日期：2017-11-07 浏览量： 分类：优秀文章 来源： CMS大学整理发布（帝国CMS大百科）

我们经常会需要将数据导出为excel文件，php开发者大多使用phpexcel组件，它很强大，但也有点臃肿，对于小型数据的导出来说有些杀猪却用牛刀的感觉，cms大学小编向大家推荐一个在前端基于jq的插件jquery-table2excel.js，它是一个开源项目，地址https://github.com/rainabba/jquery-table2excel

下面为演示代码，要注意引入的js文件路径

折叠XML/HTML 代码
  1. <!DOCTYPE html>    
  2. <html>    
  3. <head>    
  4.     <meta charset="UTF-8">    
  5.     <title>html 表格导出 - cmsdx.com</title>    
  6.     <script src="js/vendor/jquery-3.2.1.min.js"></script>    
  7.     <script src="jquery.table2excel.js"></script>    
  8.     <script language="JavaScript" type="text/javascript">    
  9.     
  10.         $(document).ready(function () {    
  11.             $("#btnExport").click(function () {    
  12.                 $("#tableExcel").table2excel({    
  13.                     exclude  : ".noExl", //过滤位置的 css 类名    
  14.                     filename : "导出文件名称" + new Date().getTime() + ".xls", //文件名称    
  15.                     name: "Excel Document Name.xlsx",    
  16.                     exclude_img: true,    
  17.                     exclude_links: true,    
  18.                     exclude_inputs: true    
  19.     
  20.                 });    
  21.             });    
  22.         });    
  23.     
  24.     </script>    
  25. </head>    
  26. <body>    
  27.     
  28. <div >    
  29.     
  30.     <button type="button" id="btnExport" onclick="method5('tableExcel')">导出Excel</button>    
  31. </div>    
  32. <div id="myDiv">    
  33.     <table id="tableExcel" width="100%" border="1" cellspacing="0" cellpadding="0">    
  34.         <tr>    
  35.             <td colspan="5" align="center">html 表格导出Excel</td>    
  36.         </tr>    
  37.         <tr>    
  38.             <td>列标题1</td>    
  39.             <td>列标题2</td>    
  40.             <td>类标题3</td>    
  41.             <td>列标题4</td>    
  42.             <td>列标题5</td>    
  43.         </tr>    
  44.         <tr>    
  45.             <td>aaa</td>    
  46.             <td>bbb</td>    
  47.             <td>ccc</td>    
  48.             <td>ddd</td>    
  49.             <td>eee</td>    
  50.         </tr>    
  51.         <tr>    
  52.             <td>AAA</td>    
  53.             <td>BBB</td>    
  54.             <td>CCC</td>    
  55.             <td>DDD</td>    
  56.             <td>EEE</td>    
  57.         </tr>    
  58.         <tr>    
  59.             <td>FFF</td>    
  60.             <td>GGG</td>    
  61.             <td>HHH</td>    
  62.             <td>III</td>    
  63.             <td>JJJ</td>    
  64.         </tr>    
  65.     </table>    
  66. </div>    
  67. </body>    
  68. </html>   

在页面dom结构加载完成后，我们可以通过下面的代码对插件进行初始化

折叠JavaScript 代码
  1. $("#table2excel").table2excel({  
  2.   // 不被导出的表格行的CSS class类  
  3.   exclude: ".noExl",  
  4.   // 导出的Excel文档的名称  
  5.   name: "Excel Document Name",  
  6.   // Excel文件的名称  
  7.   filename: "myExcelTable"  
  8. });    

table2excel插件的可用配置参数有：

exclude：不被导出的表格行的CSS class类。

name：导出的Excel文档的名称。

filename：Excel文件的名称。

exclude_img：是否导出图片。

exclude_links：是否导出超链接

exclude_inputs：是否导出输入框中的内容。

常见问题：

有些朋友在使用中遇到了数字型的值被输出成了科学记数法的问题，例如身份证号，导致数字不正确，我们可以给容器增加内联样式来解决这个问题，使用方式如下

折叠XML/HTML 代码
  1. <td style="mso-number-format:'\@';"> 数值 </td>  

 

Tags： 插件   导出

相关推荐

cms大学，为帝国cms用户提供动力
Copyright © 2016 CmsDX.com All Rights Reserved.