orangleliu 笔记本

lzz的编程之旅,技术,思考,分享,happy

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

阅读更多
版权声明:本文为orangleliu (http://blog.csdn.net/orangleliu/)原创文章,自由传播,文章转载请声明, 多谢。 https://blog.csdn.net/lzz957748332/article/details/79699019
个人分类: 前端
想对作者说点什么? 我来说一句

axios离线文件

2017年09月12日 12KB 下载

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭