关于前端:前端实现文件下载总结

1. 通过 js 创立 a 标签办法
sUrl 能够是服务中的相对路径

<el-button @click="export(sUrl)"></el-button>

export(sUrl){
//iOS devices do not support downloading. We have to inform user about this.
  if (/(iPhone)/g.test(navigator.userAgent)) {alert("Your device does not support files downloading. Please try again in desktop browser.");
    return false;
  }

  //If in Chrome or Safari - download via virtual link click
  if (downloadFile.isChrome || downloadFile.isSafari || downloadFile.isFirefox) {
    //Creating new link node.
    var link = document.createElement("a");
    link.href = sUrl;
    link.target = "_blank";

    if (link.download !== undefined) {
      //Set HTML5 download attribute. This will prevent file from opening if supported.
      var fileName = sUrl.substring(sUrl.lastIndexOf("/") + 1, sUrl.length);
      link.download = fileName;
    }
    
    //Dispatching click event.
    if (document.createEvent) {var e = document.createEvent("MouseEvents");
      e.initEvent("click", true, true);
      link.dispatchEvent(e);
      return true;
    }
  }
  
  // Force file download (whether supported by server).
  if (sUrl.indexOf("?") === -1) {sUrl += "?download";}
  
  window.open(sUrl, "_self");
  return true;
}

downloadFile.isChrome = navigator.userAgent.toLowerCase().indexOf("chrome") > -1;
downloadFile.isSafari = navigator.userAgent.toLowerCase().indexOf("safari") > -1;
downloadFile.isFirefox = navigator.userAgent.toLowerCase().indexOf("firefox") > -1;

2. 在模板 template 中间接定义 a 标签
file_path 必须是绝对路径

<a
title="下载" 
class="iconfont icon-download custom-download"
:href="item.file_path"
:download="'素材.'+item.ext"
></a>

3. 利用以后页面关上链接门路 location.href
   sUrl 必须是绝对路径

   <el-button @click="export(sUrl)"></el-button>
   
   export(sUrl){window.location.href = sUrl}

4. 利用 window.open，关上浏览器一个窗口
sUrl 必须是绝对路径

<el-button @click="export(sUrl)"></el-button>

export(sUrl){window.open(sUrl, "_self")
}