表格导出功能实践

grdmanager,js,导出

写个程序换个饼 发布于

表格导出分为静态导出与动态导出。 - 静态导出是将当前已经渲染的表格项导出为指定的格式,可为.xls或.cvs。这种导出无需后端支撑,完全由前端实现。 - 动态导出是通过将参数传与后端接口,该接口负责生成Blob或物理文件,并在Blob或物理文件路径返回后,由前端进行导出。 ## 准备工作 无论用哪种方式进行导出,前端都需要准备一下触发器。 我们通常使用a标签的download标签来实现,十分简易。 ```javascript // 然后通过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格式字符串 ```javascript // 通过当前表格展示数据生成一组类似于下面的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版本中已经将该方式用 `以逗号分割的字符串` 方式替换。 ### 以逗号分割的字符串 ```javascript // 需要通过当前表格展示数据生成一组以逗号分割的字符串。 var exportStr = `姓名,性别,年龄 张三,男,22 李四,男,23 王五,女,24 赵六,女,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标签触发下载 注意: 以上两种方式都属于纯前端操作,所导出的文件并非真实文件,在打开时会要求进行来源确认。 ## 动态导出 动态导出需要后端提供接口,并根据接口返回不同的数据进行导出。 ### 文件路径 ```javascript var getHref = () => { // 我们假设现在有一个/download接口,该接口返回了文件地址 // http.get('/download'); // 假装调了下接口 return 'http://develop.lovejavascript.com/test.xlsx'; }; dispatchDownload('花名册', getHref()); ``` 这种方式对前端来言最为简易,只需调用接口并将接口返回的url通过a标签进行下载即可。 但是使用这种方式,后端需要在服务器上生成真实的文件。 前端是简单了,但后端不仅需要提供文件服务,还需要对生成的文件进行定期清理。 所以,后端小哥一般不会喜欢这种方式。 那么,后端小哥喜欢什么? 当然是文件流了。 ### 文件流 > 对于后端返回的文件流,前端使用Blob方式进行导出。在调用后端接口时,需要指定request headers: {responseType: 'blob'} ```javascript 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](https://github.com/baukh789/GridManager)。 以上导出的四种方式,可以到组件源码进行查看。