需求描述
要求批量导出数据，以excel的格式。
选择方式
前台 + 后台
之前在别的项目中也遇到过导出的问题，解决方式是直接在前台导出将表格导出。
这次没有选择前台导出的方式，是由于需要导出所有的数据，所以考虑直接在后台获取所有的数据，然后就直接导出，最后前台触发导出api。
后台实现
导出使用的是poi，在上一篇文章中，我已做了基本的介绍，这里就不做介绍配置了，参照：poi实现将导入excel文件
创建表格
首先先建立一张表，这里要建立.xlsx格式的表格，使用xssfworkbook：
我要评论
workbook workbook = new xssfworkbook();
sheet sheet = workbook.createsheet("new sheet");
接着创建表格的行和单元格：
row row = sheet.createrow(0); row.createcell(0);
然后设置表头：
row.createcell(0).setcellvalue("学号");
row.createcell(1).setcellvalue("姓名");
row.createcell(2).setcellvalue("手机号码");
最后获取所有的数据，对应的填写到单元格中：
int i = 1;
for (student student : studentlist) {
row = sheet.createrow(i);
row.createcell(0).setcellvalue(student.getstudentnumber());
row.createcell(1).setcellvalue(student.getname());
row.createcell(2).setcellvalue(student.getphonenumber());
i++;
}
输出
这部分是纠结比较久的，反复试了很多次。
一开始是直接以文件输出流的形式输出的：
fileoutputstream output = new fileoutputstream("test.xlsx");
workbook.write(output);
这样可以正确生成文件，但是问题是，它会生成在项目的根目录下。
而我们想要的效果是，下载在本地自己的文件夹中。
要解决这个问题，需要添加相应信息，返回给浏览器：
outputstream fos = response.getoutputstream();
response.reset();
string filename = "test";
filename = urlencoder.encode(filename, "utf8");
response.setheader("content-disposition", "attachment;filename="+ filename+".xlsx");
response.setcharacterencoding("utf-8");
response.setcontenttype("application/vnd.openxmlformats-officedocument.spreadsheetml.sheet");
workbook.write(fos);
fos.close();
后台完成代码：
public void batchexport(httpservletresponse response) {
logger.debug("创建工作表");
workbook workbook = new xssfworkbook();
sheet sheet = workbook.createsheet("new sheet");
logger.debug("获取所有学生");
list<student> studentlist = (list<student>) studentrepository.findall();
logger.debug("建立表头");
row row = sheet.createrow(0);
row.createcell(0).setcellvalue("学号");
row.createcell(1).setcellvalue("姓名");
row.createcell(2).setcellvalue("手机号码");
logger.debug("将学生信息写入对应单元格");
int i = 1;
for (student student : studentlist) {
row = sheet.createrow(i);
row.createcell(0).setcellvalue(student.getstudentnumber());
row.createcell(1).setcellvalue(student.getname());
row.createcell(2).setcellvalue(student.getphonenumber());
i++;
}
outputstream fos;
try {
fos = response.getoutputstream();
response.reset();
string filename = "test";
filename = urlencoder.encode(filename, "utf8");
response.setheader("content-disposition", "attachment;filename="+ filename+".xlsx");
response.setcharacterencoding("utf-8");
response.setcontenttype("application/vnd.openxmlformats-officedocument.spreadsheetml.sheet");// 设置contenttype为excel格式
workbook.write(fos);
fos.close();
} catch (exception e) {
e.printstacktrace();
}
}
前台实现
在前台调用的时候，也经历了多次失败，google了很多篇文章，各种各样的写法都有，自己也是试了试，前台后台都对照做了很多尝试，但基本都是有问题的。这里我值给出我最后选择配套后台的方法。
// 后台导出路由
const exporturl = '/api/student/batchexport';
// 创建a标签，并点击
let a = document.createelement('a');
document.body.appendchild(a);
a.setattribute('style', 'display:none');
a.setattribute('href', exporturl);
a.click();
url.revokeobjecturl(exporturl);
最后的实现还是一种比较简单的方法，创建了一个a标签，然后隐式点击。
注意到这里我没有使用http请求，主要是他并不能触发浏览器的下载，在发起请求后，并没有正确的生成文件，具体是什么还不清楚。后面弄明白后我会再更新这篇文章。
升级
上面的形式，在导出所有的数据的时候是没有问题的，但是如果我想带一些参数呢？
另外，我们的项目是建立在nginx同源的基础上，一旦出现跨域问题，前台向后台请求，浏览器是不会默认携带cookie的，每次请求都将会被看作是一个新的请求。
所以上面的解决办法有所限制。
那么，还可以怎么写呢？
file-saver
这里我将借助filesaver来帮助我在前台生成excel文件。
this.http.get('student/batchexport', { responsetype: 'blob'})
.subscribe(data => {
let blob = new blob([data], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'});
saveas(blob, 'test.xlsx');
});
用httpclient发起get请求，声明：响应类型为blob。
blob是一个用来存储二进制文件的对象。
然后创建一个blob对象，类型为excel格式。
最后，利用file-saver中的saveas函数，将blob对象生成文件名为'test.xlsx'的excel文件。
调整后台
这里后台大部分和前面的是一样的，但是明眼人会发现，前台使用后面的方法后，下面的代码就多余了：
string filename = "test";
filename = urlencoder.encode(filename, "utf8");
response.setheader("content-disposition", "attachment;filename="+ filename+".xlsx");
response.setcharacterencoding("utf-8");
response.setcontenttype("application/vnd.openxmlformats-officedocument.spreadsheetml.sheet");
是的，我们将这一部分交由前台负责，所以后台对应的这部分就可以删除了，只使用response获取输出流就可以了：
outputstream fos = response.getoutputstream(); workbook.write(fos); fos.close();
好了，使用这种方法，我们就可以在发起http请求的时候，添加我们想要的参数了。
总结
我们在google的时候，很多时候，我们并不能一下子就找到我们想要的东西，但是并不是说这在做无用功，因为我们往往会在一些类似的文章中找到灵感。
所以，当我们没有直接找到我们想要的结果的时候，不妨大胆的做一些尝试，因为我们会在一次又一次失败的尝试中，慢慢的了解问题的原理到底是怎么回事。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
如对本文有疑问， 点击进行留言回复！！
基于Angular 8和Bootstrap 4实现动态主题切换的示例代码
解决三元运算符 报错“SyntaxError: can''t assign to conditional expression”
解决angular 使用原生拖拽页面卡顿及表单控件输入延迟问题
使用 Angular RouteReuseStrategy 缓存（路由）组件的实例代码
分享Angular http interceptors 拦截器使用(推荐)
网友评论