首先，需要明确一点，下载文件大多数情况下需要后端接口进行配合，前端只需要向后端发起下载请求即可。本文介绍的js实现文件下载，是通过向后端接口发起请求获取文件流，再通过js实现文件的下载。
如何下载文件
实现文件下载的方式有很多，其中一种较为简单的方式是使用a标签进行下载。例如：
<a href="http://example.com/file.pdf">下载文件</a>
但如果需要动态生成文件并下载，使用a标签就无法满足需求了。这时候可以使用js实现下载。
js下载方法详解
具体实现方式如下：
首先通过ajax请求获取后端接口返回的文件流，然后将文件流转换为Blob对象，再通过创建URL对象生成URL，使用a标签指向URL实现下载。
function downloadFile(url, filename) {
// 发起ajax请求获取文件流
const xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.responseType = 'blob';
xhr.onload = function() {
// 将文件流转换为Blob对象
const blob = new Blob([xhr.response], {type: 'application/octet-stream'});
// 创建URL对象生成URL
const blobUrl = window.URL.createObjectURL(blob);
// 创建a标签实现下载
const a = document.createElement('a');
a.href = blobUrl;
a.download = filename;
a.click();
window.URL.revokeObjectURL(blobUrl);
};
xhr.send();
}
以上代码实现了下载文件的功能，通过ajax请求获取文件流并将其转换为Blob对象，再通过生成URL实现下载。需要注意的是，Blob对象支持不同的MIME类型，根据文件类型的不同，需要设置不同的MIME类型。
完整实例源码
下面给出一个完整的文件下载实例。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文件下载示例</title>
</head>
<body>
<button id="downloadBtn">下载文件</button>
<script>
function downloadFile(url, filename) {
// 发起ajax请求获取文件流
const xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.responseType = 'blob';
xhr.onload = function() {
// 将文件流转换为Blob对象
const blob = new Blob([xhr.response], {type: 'application/octet-stream'});
// 创建URL对象生成URL
const blobUrl = window.URL.createObjectURL(blob);
// 创建a标签实现下载
const a = document.createElement('a');
a.href = blobUrl;
a.download = filename;
a.click();
window.URL.revokeObjectURL(blobUrl);
};
xhr.send();
}
const downloadBtn = document.querySelector('#downloadBtn');
downloadBtn.addEventListener('click', function() {
// 调用downloadFile方法下载文件
downloadFile('http://example.com/file.pdf', 'file.pdf');
});
</script>
</body>
</html>
通过点击按钮调用downloadFile方法实现文件下载。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：js实现下载(文件流式)方法详解与完整实例源码 - Python技术站
微信扫一扫 
支付宝扫一扫 