通常我们调用下载接口时,我们需要根据后端提供的接口返回信息进行相应的处理操作。

1.接口返回 文件路径(部分)。

window.open('http://192.168.22.246:8080'+ filePath)

2.本窗口打开下载

window.location.href = "xxx?id=" + data.id;

3.接口返回文件流信息。

doweloadApi(data) {
  console.log(data);
  this.$axios({
    method: "get",
    url: "xxx?id=" + data.id,
    responseType: "blob"
  })
    .then(res => {
      const content = res;
      const blob = new Blob([content]);
      const fileName = `${new Date().getTime()}_下载结果.xlsx`;
      if ("download" in document.createElement("a")) {
        const elink = document.createElement("a");
        elink.download = fileName;
        elink.style.display = "none";
        elink.href = URL.createObjectURL(blob);
        document.body.appendChild(elink);
        elink.click();
        URL.revokeObjectURL(elink.href);
        document.body.removeChild(elink);
      } else {
        navigator.msSaveBlob(blob, fileName);
      }
    })
    .catch(err => {
      console.log(err);
    });
}

接口返回文件流在浏览器中测试是没有问题的,但是微信浏览器是屏蔽资源文件下载的,那么微信公众号中如何下载呢?

网上提供了一种方法就是:引导用户打开浏览器中下载,详细请参考:vue开发微信公众号之文件下载

Logo

前往低代码交流专区

更多推荐