前端如何實現文件下載功能-多方案匯總

前端實現下載文件功能一般使用以下三種方式：

    1.請求后台接口拿到對應的 url，訪問 url 地址下載；

    2.文件放在前端靜態資源地址，直接訪問下載；

    3.請求后台接口拿到對應的文件內容，js創建文件並下載；

前面兩種相對簡單一點：下面我貼下對應的代碼

<a href="/static/xxxxx.csv" download="fileName">絕對路徑寫法
/**  href 文件的絕對/相對地址
./代表當前目錄（可以省略）../代表上一級目錄 /代表根目錄屬於絕對路徑
download 屬性規定被下載的超鏈接目標。
filename 規定作為文件名來使用的文本。一般在項目中不使用相對路徑，因為在本地用很能沒問題，但是代碼上傳到線上時，路徑可能就不對了；
*/
<a href="./static/xxxxx.csv" download="fileName">相對路徑寫法

 

需要創建文件並下載的，下面貼一下代碼

fileDownload(content, name = 'fileName', suffix = 'csv') {
  // 添加字節序標識，避免亂碼
  const data = `\uFEFF${content}`;
  const blob = new Blob([data], { type: 'text/csv,charset=UTF-8' });
  const downloadElement = document.createElement('a');
  // 創建下載鏈接
  const href = window.URL.createObjectURL(blob);
  downloadElement.href = href;
  // 下載文件名
  downloadElement.download = `${name}.${suffix}`;
  document.body.appendChild(downloadElement);
  downloadElement.click();
  // 移除元素
  document.body.removeChild(downloadElement);
  // 釋放blob對象
  window.URL.revokeObjectURL(href);
}
/** 
 content 創建文件的內容 
 blob 類文件對象 
 name 創建的文件名 suffix 文件后綴 
 下面的就是創建一個a標簽然后設置href以及download屬性，並執行下載操作，然后移除a標簽
 */ 

然后就寫完，溜了溜了～

最后安利一波博主微信公眾號，感謝關注