前端JavaScript根據(jù)文件url下載到本地多種方法實(shí)現(xiàn)

更新時(shí)間：2025年07月07日 10:42:55 作者：不懂可否

在現(xiàn)代網(wǎng)頁開發(fā)中,下載文件的功能常常會用到,尤其是在數(shù)據(jù)處理、報(bào)表下載等場景下,前端開發(fā)者常常需要將生成的數(shù)據(jù)以文件的形式保存在用戶的本地電腦上,這篇文章主要給大家介紹了關(guān)于前端JavaScript根據(jù)文件url下載到本地的多種方法實(shí)現(xiàn),需要的朋友可以參考下

前言

在 JavaScript 中根據(jù)文件 URL 下載到本地，可以通過以下多種方法實(shí)現(xiàn)。這些方法適用于不同場景，如同源文件、跨域文件或動態(tài)生成內(nèi)容，請根據(jù)具體需求選擇：

一、使用<a>標(biāo)簽的download屬性（簡單場景）

通過動態(tài)創(chuàng)建 <a> 標(biāo)簽并設(shè)置 download 屬性，觸發(fā)點(diǎn)擊事件直接下載文件。

適用場景：同源 URL 或支持 CORS 的跨域文件，且無需動態(tài)生成內(nèi)容。

function downloadByATag(url, filename) {
  const a = document.createElement('a');
  a.href = url;
  a.download = filename || 'default-name'; // 設(shè)置下載文件名
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
}

注意：

跨域文件需服務(wù)器配置 CORS 響應(yīng)頭。
若服務(wù)器響應(yīng)頭包含 Content-Disposition，則以服務(wù)器返回的文件名為準(zhǔn)。

二、通過 Fetch API + Blob（動態(tài)內(nèi)容或跨域控制）

通過 Fetch 獲取文件二進(jìn)制數(shù)據(jù)，轉(zhuǎn)為 Blob 后生成臨時(shí) URL 觸發(fā)下載。

適用場景：需動態(tài)處理文件內(nèi)容、跨域請求或添加權(quán)限校驗(yàn)邏輯。

async function fetchAndDownload(url, filename) {
  try {
    const response = await fetch(url);
    const blob = await response.blob();
    const downloadUrl = URL.createObjectURL(blob);
    
    const a = document.createElement('a');
    a.href = downloadUrl;
    a.download = filename || 'file';
    a.click();
    
    URL.revokeObjectURL(downloadUrl); // 釋放內(nèi)存
  } catch (error) {
    console.error('下載失敗:', error);
  }
}

優(yōu)點(diǎn)：

支持動態(tài)生成文件名和文件類型（如 CSV、JSON）。
可添加請求頭實(shí)現(xiàn)權(quán)限校驗(yàn)。

三、使用 Form 表單提交（兼容舊瀏覽器）

通過動態(tài)創(chuàng)建 <form> 提交請求，適用于需要兼容舊瀏覽器或 POST 請求的場景。

function downloadByForm(url) {
  const form = document.createElement('form');
  form.method = 'GET';
  form.action = url;
  document.body.appendChild(form);
  form.submit();
  document.body.removeChild(form);
}

缺點(diǎn)：用戶體驗(yàn)較差（可能跳轉(zhuǎn)新頁面）。

四、特殊場景處理

大文件下載
直接使用 <a> 標(biāo)簽而非 Blob，避免內(nèi)存占用過高（Blob 有大小限制，如 Chrome 限制 500MB）。
瀏覽器兼容性
- Safari 需確保服務(wù)器返回正確的 MIME 類型。
- IE/Edge 可能需要 window.open 或 execCommand('SaveAs')。

五、注意事項(xiàng)

內(nèi)存泄漏：使用 URL.createObjectURL() 后務(wù)必調(diào)用 revokeObjectURL()。
用戶體驗(yàn)：下載大文件時(shí)建議顯示進(jìn)度條（可通過 response.body 分塊讀取）。
跨域問題：確保服務(wù)器配置 Access-Control-Allow-Origin，否則 Fetch 請求可能被攔截。

示例代碼整合

// 綜合方案（推薦）
async function downloadFile(url, filename) {
  if (url.startsWith('http') && !url.startsWith(window.location.origin)) {
    // 跨域文件使用 Fetch
    await fetchAndDownload(url, filename);
  } else {
    // 同源文件直接下載
    downloadByATag(url, filename);
  }
}

通過上述方法，可覆蓋大多數(shù)下載需求。具體實(shí)現(xiàn)時(shí)需結(jié)合服務(wù)器配置和瀏覽器兼容性調(diào)整策略。

總結(jié)

到此這篇關(guān)于前端JavaScript根據(jù)文件url下載到本地多種方法實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)js根據(jù)文件url下載到本地內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: