一、下载文件的基本方法
利用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支持。