简单的表格导出功能

需求 表格数据导出功能

实现方式：
1、导出为csv文件
2、导出为xlsx文件

前端代码如下：

<a href="#" onclick="tableToExcel()" id="" class="easyui-linkbutton" iconCls="icon-redo">导出</a>

JS代码如下：

//页面加载
var jdata = [];//获取json数据用于打导出表格
$(function() {

	//装载一个json数据用于导出Excel表格
	$.ajax({
		url:basePath+'/queryWorkingHoursMonthlyToD.json',
		type:'post',
		dataType:'json',
		success:function(data){
			jdata = data.rows;
		}
	})
})
//条件搜索
/**
 *  查询
 * @returns
 */
function searchWorkingHoursMonthly(){

	//获取搜索条件区域的各条件信息
	var obj ={
			"keyWord":$("#keyWord").val(),
			"startTime":$("#searchStartTime").datebox("getValue"),
			"endTime":$("#searchEndTime").datebox("getValue")
			};
	//获得搜索表单中的数据 查找缺陷表格
	$("#showTable").datagrid(
			Common.createDatagridOptionsParams(
					basePath, "/queryData.json", 135, obj
			)
	);
	//装载一个json数据用于导出Excel表格
	$.ajax({
		url:basePath+'/queryDataOut.json',
		type:'post',
		data: obj,
		dataType:'json',
		success:function(data){
			jdata = data.rows;
		}
	})
	//重置搜索条件表单
	$("#queryForm").form("reset");
}
主要方法：
/**
 * 开始导出Excel表格
 * @returns
 */
function tableToExcel(){
	
	//确认框
	$.messager.confirm('提示','您确认要导出吗？',function(r){
		if(r){
			//调用导出excel方法
			exportForm();
		}
	})
	
}

/**
 *  导出功能
 * @returns
 */
function exportForm(){
	
	//列标题，逗号隔开，每一个逗号就是隔开一个单元格
    let str = "登记时间,项目名称,缺陷名称,登记工时,登记人\n";
    
    //增加\t为了不让表格显示科学计数法或者其他格式
    for(let i = 0 ; i < jdata.length ; i++ ){
      for(let item in jdata[i]){
    	  if(jdata[i][item] != null && jdata[i][item] != 0){
    		  str += jdata[i][item] +'\t'+',';  
    	  }
      }
      str+='\n';
    }
    //encodeURIComponent解决中文乱码
    let uri = "data:text/csv;charset=utf-8,\ufeff" + encodeURIComponent(str);
    //通过创建a标签实现
    var link = document.createElement("a");
    link.href = uri;
    //对下载的文件命名
    link.download =  "统计报表.csv";
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
}

后端JAVA代码

控制层：
/**
	 * 	查询工作 导出功能用
	 * @param bo
	 * 	queryDataOut
	 * @return
	 * 	
	 */
	@RequestMapping("/queryDataOut")
	public Map<String, Object> queryDataOut(IssueWorkLogBo bo) {
		
		Map<String, Object> map = null;
		try {
			map = new HashMap<String, Object>();
			//调用服务层同名方法
			map = defectStatisticsService.queryDataOut(bo);
			
		} catch (Exception e) {
			e.printStackTrace();
		}
		return map;
	}
逻辑层：
/**
	 *  导出表格用 查询月报
	 * @param bo
	 * @return
	 */
	public Map<String, Object> queryDataOut(IssueWorkLogBo bo) {
		
		Map<String,Object> map = new HashMap<String,Object>();
		List<IssueWorkLogBo> list = new ArrayList<IssueWorkLogBo>();
		//调用接口中同名方法
		list = defectStatisticsDao.queryDataOut(bo);
		//循环遍历list中年份数据和月份数据 并添加进PO中
		for (IssueWorkLogBo boo : list) {
			boo.setLogDate(boo.getDateYear()+"年"+boo.getDateMonth()+"月");
			boo.setDateMonth("");
			boo.setDateYear("");
			if(boo.getLogName().equals("admin")) {
				boo.setLogName("系统管理员");
			}
		}
		//存数据
		map.put("rows", list);
		return map;
	}
接口：
/**
	 *  打印用 月报
	 * @param bo
	 * @return
	 */
	public List<IssueWorkLogBo> queryDataOut(IssueWorkLogBo bo);
XML：
<!-- queryDataOut-->
	<select id="queryDataOut" resultType="com.test.issue.bo.IssueWorkLogBo">
	SELECT
			p.PROJECT_NAME 			projectName ,
			info.ISSUE_NAME 		issueName ,
			log.CREATE_BY 			logName , 
			MONTH(log.LOG_DATE)		dateMonth ,
			YEAR(log.LOG_DATE)		dateYear ,
			SUM(log.WORK_HOURS)		totalWorkingHours
		FROM
			i_issue_work_log log
		LEFT JOIN
			i_issue_base_info info
		ON
			info.ISSUE_ID = log.ISSUE_ID
		LEFT JOIN
			info_issue_project p
		ON
			p.PROJECT_ID = info.PROJECT_ID
		where
			1 = 1
			<if test="keyWord != null and keyWord != ''">
			and
			(
				p.PROJECT_NAME like '%${keyWord}%'
				or info.ISSUE_NAME like '%${keyWord}%'
				or log.CREATE_BY like '%${keyWord}%'
			)
		</if>
			<if test="startTime != null and startTime != ''">
			and info.CREATE_TIME >= #{startTime}
			</if>
			<if test="endTime != null and endTime != ''">
				and info.CREATE_TIME &lt;= #{endTime}
			</if>
			<if test="projectId != null and projectId != ''">
				and info.PROJECT_ID = #{projectId}
			</if>
		GROUP BY
			p.PROJECT_ID , (SELECT MONTH(log.LOG_DATE))
	</select>

导出效果如下：