java导出表功能_表格导出功能实践

表格导出分为静态导出与动态导出。

静态导出是将当前已经渲染的表格项导出为指定的格式，可为.xls或.cvs。这种导出无需后端支撑，完全由前端实现。

动态导出是通过将参数传与后端接口，该接口负责生成Blob或物理文件，并在Blob或物理文件路径返回后，由前端进行导出。

准备工作

无论用哪种方式进行导出，前端都需要准备一下触发器。

我们通常使用a标签的download标签来实现，十分简易。

// 然后通过a标签的download进行下载

var dispatchDownload = (fileName, href) => {

var a = document.createElement('a');

a.addEventListener('click', () => {

a.download = fileName;

a.href = href;

});

var e = document.createEvent('MouseEvents');

e.initEvent('click', false, false);

a.dispatchEvent(e);

};

复制代码

静态导出

静态导出本质上是拼接字符串，只不过特别的是这些字符串符合了.xls, .cvs文件的解析规则。

什么格式的字符串会被解析为正确的文件？我在GridManager中先后尝试了两种方式。

html格式字符串

// 通过当前表格展示数据生成一组类似于下面的html string

var exportHTML = `

姓名性别年龄

张三男22李四男23王五女24赵六女22

`;

var href = `data:application/vnd.ms-excel;base64,${window.btoa(unescape(encodeURIComponent(exportHTML || '')))}`;

// 通过事先声明的dispatchDownload()函数进行下载

dispatchDownload('花名册.xls', href);

复制代码

执行原理

生成table html string

通过btoa转换为base64编码

拼接指定data类型的url

通过a标签触发下载

使用这种方式存在导出文件无单元格分割线的问题，所以在GridManager v2.10.5版本中已经将该方式用 以逗号分割的字符串 方式替换。

以逗号分割的字符串

// 需要通过当前表格展示数据生成一组以逗号分割的字符串。

var exportStr = `姓名,性别,年龄\r\n张三,男,22\r\n李四,男,23\r\n王五,女,24\r\n赵六,女,22`;

// .cvs: data:text/csv, .xls: application/vnd.ms-excel

var href = `data:application/vnd.ms-excel;charset=utf-8,\ufeff${encodeURIComponent(exportStr)}`;

// 通过事先声明的dispatchDownload()函数进行下载

dispatchDownload('花名册.xls', href);

复制代码

执行原理

生成以逗号分割的字符串

通过encodeURIComponent转义编码

拼接指定data类型的url

通过a标签触发下载

注意: 以上两种方式都属于纯前端操作，所导出的文件并非真实文件，在打开时会要求进行来源确认。

动态导出

动态导出需要后端提供接口，并根据接口返回不同的数据进行导出。

文件路径

var getHref = () => {

// 我们假设现在有一个/download接口，该接口返回了文件地址

// http.get('/download'); // 假装调了下接口

return 'http://develop.lovejavascript.com/test.xlsx';

};

dispatchDownload('花名册', getHref());

复制代码

这种方式对前端来言最为简易，只需调用接口并将接口返回的url通过a标签进行下载即可。

但是使用这种方式，后端需要在服务器上生成真实的文件。

前端是简单了，但后端不仅需要提供文件服务，还需要对生成的文件进行定期清理。

所以，后端小哥一般不会喜欢这种方式。

那么，后端小哥喜欢什么？

当然是文件流了。

文件流

对于后端返回的文件流，前端使用Blob方式进行导出。在调用后端接口时，需要指定request headers: {responseType: 'blob'}

var getBlog = () => {

// 我们假设现在有一个/download接口，该接口返回了文件流

// http.get('/download', headers: {responseType: 'blob'}); // 假装调了下接口

return blob;

}

// 为防止返回数据不可用，验证一下

var blog = getBlog();

if (Object.getPrototypeOf(blob) === Blob.prototype) {

// 通过URL.createObjectURL()将Blob转换为URL。这个新的URL对象表示指定的File对象或Blob对象。

var url = URL.createObjectURL(blob);

// 进行下载

dispatchDownload('花名册', url);

}

复制代码

使用这种方式，对于前端来说也没有什么工作量。

而且对于后端也无需创建物理文件，仅需生成文件流并将流返回。

在发送请求时所指定的headers: {responseType: 'blob'}，仅是告诉浏览器前端所期望获取到的返回格式，对于后端来说无需特殊处理。

最后，推荐一个表格组件GridManager。

以上导出的四种方式，可以到组件源码进行查看。

关于找一找教程网

本站文章仅代表作者观点，不代表本站立场，所有文章非营利性免费分享。

本站提供了软件编程、网站开发技术、服务器运维、人工智能等等IT技术文章，希望广大程序员努力学习，让我们用科技改变世界。

[表格导出功能实践]http://www.zyiz.net/tech/detail-100305.html