1. 90前端首页
  2. 前端开发
  3. JavaScript

表格导出功能实践

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

  • 静态导出是将当前已经渲染的表格项导出为指定的格式,可为.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 = `
    <html xmlns:o=\"urn:schemas-microsoft-com:office:office\" xmlns:x=\"urn:schemas-microsoft-com:office:excel\" xmlns=\"http://www.w3.org/TR/REC-html40\">
    <head><meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\"></head>
    <body>
    <table>
        <thead>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody>
            <tr><td>张三</td><td>男</td><td>22</td></tr>
            <tr><td>李四</td><td>男</td><td>23</td></tr>
            <tr><td>王五</td><td>女</td><td>24</td></tr>
            <tr><td>赵六</td><td>女</td><td>22</td></tr>
        </tbody>
    </table>
    </body>
    </html>`;

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。以上导出的四种方式,可以到组件源码进行查看。

本文来自网络整理,转载请注明原出处:https://segmentfault.com/a/1190000021617468

展开阅读全文

发表评论

登录后才能评论