前端下载文件

555 阅读1分钟

1、根据地址下载

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();
      }
    },
    /**我当然知道直接window.location.href = 地址,可以直接下载,
    但是这种方式没有loading,对于文件较大德尔时候,也无法明确到底是还在下载文件中,
    还是没成功,体验不好
    
    **/ 

2、根据文件流下载

import { saveAs } from "file-saver";
import { Loading } from "element-ui";

// 导出
export function exportList(query) {
  return request({
    url: serviceUrl + "/export",
    method: "post",
    params: query,
    responseType:'blob' // 必须设置返回内容类型二进制流文件,否则后续无法处理,接受不到文件
  });
}

async handleExport() {
      this.handleQuery();
       const downloadLoadingInstance = Loading.service({
        text: "正在下载数据,请稍候",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });

      try {
        let res = await exportList(this.queryParams);
        saveAs(res, "文件名");
        this.$modal.msgSuccess("下载成功");
        downloadLoadingInstance.close();
      } catch (error) {
        downloadLoadingInstance.close();
      }
    },