前言
通常情况前端用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();
}
}