js获取后端返回文件流下载文件至本地 / 通过访问指定路径直接从服务器下载文件

本文链接：https://blog.csdn.net/RussW0/article/details/104678051

本文介绍了如何使用JavaScript处理后端返回的文件流进行本地下载，设置responseType为'blob'。同时，讲解了利用a标签直接从服务器或前端项目的public/data（vue-cli3）或static（vue-cli2）目录下载文件的方法，以及如何通过window.location下载服务器上的文件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

获取后端返回文件流下载文件至本地

responseType: ‘blob’ 注意设置类型为blob

// responseType: 'blob'注意请求类型为blob
exportCheckBill(obj)
        .then(response => {
          // 处理请求返回的文件流
          const content = response;
          const blob = new Blob([content]);
          const fileName = `文件名.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);
          }
        })
        .then(() => {
          setTimeout(() => {
            loading.close();
          }, 1000);
        })
        .catch(function() {
          loading.close();
          // this.msgError('下载失败')
        });

通过a标签访问指定路径直接从服务器或前端项目静态文件下载文件

<a :href="`${本地路径}data/文件名.文件类型`" target="_blank" download="文件名.文件类型" ><el-button type="primary" icon="el-icon-download" size="mini">下载文件</el-button></a>