js 下载流文件显示loading

使用JavaScript实现文件下载功能

最新推荐文章于 2025-10-15 10:26:47 发布

原创最新推荐文章于 2025-10-15 10:26:47 发布 · 549 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端

文章介绍了如何在前端使用JavaScript的fetchAPI和Blob对象实现文件下载功能，通过axios获取token并处理异步请求，确保安全并关闭加载指示器。

  downloadAjx(url, name) {
      this.$modal.loading("正在下载文件，请稍候...");
      const tokenUrl = addPicToken(url)
      try {
        fetch(tokenUrl)
          .then((res) => res.blob())
          .then((blob) => {
            const a = document.createElement("a");
            const objectUrl = window.URL.createObjectURL(blob);
            a.download = name;
            a.href = objectUrl;
            a.click();
            window.URL.revokeObjectURL(objectUrl);
            a.remove();
            this.$modal.closeLoading();
          });
      } catch (error) {
        this.$modal.closeLoading();
      }
    },