El front-end de Vue descarga archivos entre dominios

En general, el atributo de descarga de la etiqueta a se puede usar para descargar archivos, siempre que esté bajo la política del mismo origen. Para resolver el problema de dominios cruzados, usamos js para obtener el archivo de tipo blob y descargar el archivo remoto al local.

Pega el código directamente

    downloadFile(url) {
    
    
      url = url.replace(/\\/g, "/");
      const xhr = new XMLHttpRequest();
      xhr.open("GET", url, true);
      xhr.responseType = "blob";
      // 文件下载进度
      xhr.onprogress = (res) => {
    
    
        this.loadingTip =
          "源文件下载中: " + ((res.loaded / res.total) * 100).toFixed(2) + "%";
      };
      xhr.onload = () => {
    
    
        this.loadingTip = "";
        this.loading = false;

        if (xhr.status === 200) {
    
    
          // 获取文件blob数据并保存
          var num = url.lastIndexOf("/") + 1;
          //把参数和文件名分割开
          var fileName = url.substring(num).split("?")[0];
          var export_blob = new Blob([xhr.response]);
          var save_link = document.createElementNS(
            "http://www.w3.org/1999/xhtml",
            "a"
          );
          save_link.href = URL.createObjectURL(export_blob);
          save_link.download = fileName;
          save_link.click();
        }
      };
      this.loading = true;
      xhr.send();
    }