vue项目,调用接口下载文件の问题

Question

如果是直接用a标签,href指向文件地址可以下载,但是如果调用接口去下
载就不成功了:

后端接口代码如下:

前端代码如下:

此时点击链接触发click事件返回的数据如下

请问是哪里出了问题吗?

Answer 1

downloadRFRepost 方法生成一个 a 标签, href 为下载地址, download 属性为文件名, click 它, 然后移除这个标签

Answer 2

axios.get(url,{responseType: 'blob'})

.then((response) => {

    let name =  this.name +  '.pdf';

    var blob = response.data;

    if (window.navigator.msSaveOrOpenBlob) {

    navigator.msSaveBlob(blob, name);

    } else {

    var a = document.createElement('a');

    a.download = name;

    a.style.display =  "none";

    a.href = URL.createObjectURL(blob);;

    document.body.appendChild(a); // 修复firefox中无法触发click

    this.isLoading =  false;

    a.click();

    document.body.removeChild(a)

    }

  })

  .catch(function(error) {

    console.log(error);

   });