利用JS下載文件到本地

一、下載文件的基本方法

利用JavaScript下載文件的方法主要就是創建一個a標籤並進行點擊操作。具體步驟為：

function downloadFile(url) {
  var link = document.createElement("a");
  link.download = url.split("/").pop();
  link.href = url;
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}

通過createElement方法創建一個a標籤，然後將要下載文件url賦值給href屬性，同時將下載的文件命名為url的最後一部分並賦值給download屬性。最後將a標籤加入到文檔結構中並手動觸發點擊事件，就可以讓瀏覽器開始下載文件。

二、利用XMLHttpRequest進行文件下載

另外一種文件下載的方法是利用XMLHttpRequest進行下載。具體步驟為：

function downloadFile(url) {
  var xhr = new XMLHttpRequest();
  xhr.open("GET", url);
  xhr.responseType = "blob";
  xhr.onload = function() {
    var a = document.createElement("a");
    a.href = window.URL.createObjectURL(xhr.response);
    a.download = url.split("/").pop();
    a.style.display = "none";
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
  };
  xhr.send();
}

創建一個XMLHttpRequest對象並使用open方法進行請求，需要注意設置responseType屬性為blob，這表示響應數據為二進制文件對象。設置onload函數，獲取到響應後創建一個a標籤，將響應數據賦值給href屬性，並設置下載文件的名稱。將a標籤隱藏起來並插入到文檔結構中，手動觸發點擊事件完成文件下載操作。

三、處理下載錯誤

文件下載可能會因為多種原因失敗，比如服務器異常、網絡錯誤等。為了讓用戶體驗更加友好，我們可以在文件下載發生異常時進行錯誤處理。具體處理方式如下：

function downloadFile(url) {
  var xhr = new XMLHttpRequest();
  xhr.open("GET", url);
  xhr.responseType = "blob";
  xhr.onerror = function() {
    console.error("文件下載失敗");
  };
  xhr.onload = function() {
    if (xhr.status === 200) {
      var a = document.createElement("a");
      a.href = window.URL.createObjectURL(xhr.response);
      a.download = url.split("/").pop();
      a.style.display = "none";
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
    } else {
      console.error("文件下載失敗");
    }
  };
  xhr.send();
}

在XMLHttpRequest對象上設置onerror回調函數，當下載發生錯誤時打印錯誤信息。在onload回調函數中增加一個判斷語句，判斷請求狀態是否為200（即成功），如果成功則進行文件下載操作，否則也打印錯誤信息。這樣可以讓用戶在文件下載發生異常時及時得到反饋。

四、文件下載進度條

為了提高用戶使用體驗，我們可以為文件下載添加一個進度條，讓用戶能夠清楚地知道下載的進度。具體方法如下：

function downloadFile(url) {
  var xhr = new XMLHttpRequest();
  xhr.open("GET", url);
  xhr.responseType = "blob";
  var progressBar = document.createElement('div');
  progressBar.style = 'width: 0%; height: 4px; background-color: #4CAF50; position: fixed; top: 0; left: 0; z-index: 9999;';
  document.body.appendChild(progressBar);
  xhr.onprogress = function(e) {
    var percent = e.loaded / e.total * 100;
    progressBar.style.width = percent + '%';
  };
  xhr.onload = function() {
    if (xhr.status === 200) {
      var a = document.createElement("a");
      a.href = window.URL.createObjectURL(xhr.response);
      a.download = url.split("/").pop();
      a.style.display = "none";
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
    } else {
      console.error("文件下載失敗");
    }
    document.body.removeChild(progressBar);
  };
  xhr.send();
}

利用XMLHttpRequest對象的onprogress回調函數可以監測到文件下載的進度。在該函數中計算出當前下載的進度並對進度條進行相應的設置。在onload回調函數中移除進度條，同時加入文件下載的處理邏輯。

五、跨域下載問題

由於瀏覽器的同源策略，如果下載文件的URL與當前頁面的域名不一致，就會出現跨域下載問題。一般可以使用CORS（Cross-Origin Resource Sharing）來解決跨域下載問題。如果服務器端設置了CORS支持，JavaScript端下載文件時也需要設置相關的請求頭，代碼如下：

function downloadFile(url) {
  var xhr = new XMLHttpRequest();
  xhr.open("GET", url);
  xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  xhr.setRequestHeader("Access-Control-Allow-Origin", "*");
  xhr.setRequestHeader("Access-Control-Allow-Methods", "GET");
  xhr.responseType = "blob";
  var progressBar = document.createElement('div');
  progressBar.style = 'width: 0%; height: 4px; background-color: #4CAF50; position: fixed; top: 0; left: 0; z-index: 9999;';
  document.body.appendChild(progressBar);
  xhr.onprogress = function(e) {
    var percent = e.loaded / e.total * 100;
    progressBar.style.width = percent + '%';
  };
  xhr.onload = function() {
    if (xhr.status === 200) {
      var a = document.createElement("a");
      a.href = window.URL.createObjectURL(xhr.response);
      a.download = url.split("/").pop();
      a.style.display = "none";
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
    } else {
      console.error("文件下載失敗");
    }
    document.body.removeChild(progressBar);
  };
  xhr.send();
}

在XMLHttpRequest對象上設置setRequestHeader方法，設置Content-Type、Access-Control-Allow-Origin和Access-Control-Allow-Methods請求頭，這樣就可以跨域下載文件了。需要注意的是，服務器上需要開啟CORS支持。