HTML/HTML5中的download属性

导出文件的配置有以下几种

后端配置

在api的http response 头部设置

1
2
header('Content-disposition: attachment; filename=fileName.json');
header('Content-type: application/json');

我们只需要通过 <a href='url'>下载文件</a>就可以下载json文件

前端配置

  • 如果api的http response 头部没有设置响应信息

    我们可以用html的download属性

    1
    <a href="url" download="fileName.json"> 导出</a>

    或者采用js的写法

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11

    var json = JSON.stringify(data); // data为api获取到的json数据
    var blob = new Blob([json], {type: "application/json"});
    var url  = URL.createObjectURL(blob);

    var a = document.createElement('a');
    a.download    = "backup.json";
    a.href        = url;
    a.textContent = "导出";
    document.getElementById('content').appendChild(a);

    两种写法都是采用了HTML5中的download属性,缺点不兼容safari兼容性;

  • 在实践中发现Firefox的href下载链接要加上data:application/json;charset=utf-8,
    才可以启动下载属性

  • data:application/json;charset是Data URI scheme的语法

结语

下次后端丢给你一个api就不用纠结为啥下载不了文件啦,直接看api返回的http response 有没有文件信息,
如果是单纯json信息又不考虑兼容性可以用download. 如果考虑兼容性就要后端改api response header啦