利用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支持。