vue 中使用 axios 下载pdf

axios 是个轻量级的 http 客户端，vue项目中使用非常普遍，现在需要对接一个 pdf 报表接口，发现 axios 无法直接直接下载下来，也就是说用 axios 请求，返回的结果是二进制文件，但是浏览器没有直接下载下来，下面是解决的方案的代码片段。当然也适用于其他二进制文件下载。

代码

let url = 'http://localhost:5000/static/example.pdf';
let params = new URLSearchParams();

// 列表 domains_selected cdnSelect 都是data的属性 
for (let obj of this.domains_selected) {
    params.append('domain', obj.value);
}
params.append('cdn', this.cdnSelect);

axios.get(url, {
    responseType: 'blob', //重要
    params: params
}).then((response) => {
    const url = window.URL.createObjectURL(new Blob([response.data]));
    const link = document.createElement('a');
    // 返回的header Content-Disposition:attachment; filename=elmeast-report-2018-2.pdf
    let head = response.headers['content-disposition'];
    let fname = 'report.pdf';
    if (head) {
        try {
            fname = head.split(';')[1].split('=')[1]
        } catch (err){
            console.log('can not get pdf name');
        }

    }
    link.href = url;
    link.setAttribute('download', fname);
    document.body.appendChild(link);
    link.click();
});

上面的代码有几个点
* 根据vue几个绑定的指，生成 axios 的查询参数
* 处理返回的时候根据head解析出pdf的文件名

使用时请注意测试

ref: gist