JS原生方式提交大参数导出文件Excel/PDF

---

前言

通常情况前端用GET方式提交一个id参数去实现导出功能，当提交的参数很大，GET方式不能满足，那第一反应是否可以用ajax的post方式提交呢？本文提供几种大参数提交导出文件的实现方式

---

一、JavaScript原生方式

1、需求如下：

可以复选多条数据进行导出

2、前端JS：

<!-- 导出按钮 -->
<input type="button" value="导出" onclick="export();"/> 					

<!-- 导出js -->
//导出
function export(){
     
	//动态获取上方表格的选中的主键值【方法在下方】
	var idx=getIdArrIn();
	//校验是否勾选
	if(!idx){
     
		top.$.jBox.tip("请进行勾选！！！");
		return;
	}
	//后端端口
	var url ="${xxx}/core/main/export" ;
	
	var xhr = new XMLHttpRequest();
	xhr.open('POST', url, true);
	xhr.responseType = "blob";  
	xhr.setRequestHeader("Content-Type", 
			"application/x-www-form-urlencoded;");
	xhr.onload = function () {
     
	     if (this.status === 200) {
     
	         var blob = this.response;
	         var reader = new FileReader();
	         reader.readAsDataURL(blob); 
	         reader.onload = function (e) {
     
	             var a = document.createElement('a');
	             a.download = '文件名.xlsx';
	             a.href = e.target.result;
	             $("body").append(a); 
	             a.click();
	             $(a).remove();
	         }
	     }
	 };
	 // 带参数发送请求
	 var content ="text=" +idx;
	 xhr.send(content);
} 	

//动态获取上方表格的选中的主键值
function getIdArrIn(){
     
	var idArr=new Array();
	$("table tr[name='data']").each(function(){
     
		var td_id_input=$(this).find("td>input[type='checkbox']:checked");
		if(td_id_input){
     
			if(td_id_input.val()){
     
				idArr.push(td_id_input.val());
			}
		}
	});
	return idArr.toString();
}				

3、后端java：

//导出 
@RequestMapping(value = "export")
public void exportToBeSettled(
		String text, Model model,HttpServletRequest request,HttpServletResponse response) {
     
	// 接收参数，根据逗号分割为数组（每个id为一个元素）
	String[] strArr= test.split(",");
	//创建集合接收根据id查询出的Entry
	ArrayList<Xxx> arrayList = new ArrayList<Xxx>();
	for(int i = 0;i<strArr.length;i++) {
     
		String id = strArr[i];
		Xxx xxx = xxxService.getExportEntryById(id);
		if(null!= xxx) {
     
			arrayList.add(xxx);
		}
	}
	// 获取模板
	String path = request.getSession().getServletContext()
					.getRealPath(File.separator+"template");
	//获取模板文件
	String tempXlsFile = path +File.separator+ "Export.xls";		
	// 初始化模板
	HSSFWorkbook wb = null;
	try {
     
		wb = new HSSFWorkbook(new FileInputStream(tempXlsFile));
	} catch (FileNotFoundException e) {
     
		e.printStackTrace();
	} catch (IOException e) {
     
		e.printStackTrace();
	}
	HSSFSheet sheet = wb.getSheetAt(0);	
	// 写入数据（从第二行开始写）
	int count = 2;
	if(arrayList!=null&arrayList.size()>0){
     
		for (Xxx xxx1 :arrayList) {
     
			HSSFRow createRow = sheet.createRow(count);
			createRow.createCell(0).setCellValue(...);
			//....
			count ++;
		}
	}
	
	//输出文件
	try {
     
		//生成流对象,将excel写入流
		ByteArrayOutputStream  baos = new ByteArrayOutputStream();			
		wb.write(baos);	
		
		//写入磁盘空间
		String fileName = Global.getDownFilePath()+"xx"+".xls";
		baos.writeTo(new FileOutputStream(new File(fileName)));
		baos.close();
		
		//下载文件
		File file = new File(fileName);
		InputStream is= new BufferedInputStream(new FileInputStream(file));
		byte[] buffer = new byte[is.available()];
		is.read(buffer);
		is.close();
		response.reset();
		
		// 先去掉文件名称中的空格,然后转换编码格式为utf-8,保证不出现乱码,这个文件名称用于浏览器的下载框中自动显示的文件名
		String userAgent = request.getHeader("user-agent").toLowerCase();
		String fileName2 = file.getName();
		if (userAgent.contains("msie") || userAgent.contains("like gecko")) {
     
			fileName2 = URLEncoder.encode(fileName2, "UTF-8");
		} else {
     
			fileName2 = new String(fileName2.getBytes("UTF-8"), "iso-8859-1");
		}
		response.addHeader("Content-Disposition", "attachment;filename=" + fileName2);
		response.addHeader("Content-Length", "" + file.length());
		OutputStream os = new BufferedOutputStream(response.getOutputStream());
		response.setContentType("application/octet-stream");
		os.write(buffer);// 输出文件
		os.flush();
		os.close();	
	} catch (IOException e) {
     
		e.printStackTrace();
	}
}