JavaScript 下载文件
ajax 下载文件
let xhr = new XMLHttpRequest(); xhr.open('GET', 'http://www.xxx.com/bbb.zip', true); // 这部至关重要，命令xhr返回给你的时blob(二进制大对象)类型的数据 xhr.responseType = 'blob'; xhr.send() xhr.onreadystatechange = function () { if (xhr.readyState === 4 && xhr.status === 200) { const aTag = document.createElement('a') aTag.href = URL.createObjectURL(this.response) aTag.download = 'aaa.zip' aTag.click() } }
使用标签点击下载
<a href="../../static/xxx.xlsx" download="xxx.xlsx">下载a>
直接点击可以下载，需要注意的是download属性，当不加download属性时，如果文件格式为txt、pdf、jpg等浏览器支持直接打开的文件格式，那么不会下载，而是浏览器直接打开；添加download属性之后，就会下载，并且下载文件默认命名为你download属性的值。
使用window.open()
window.open("../../static/xxx.xlsx");// 下载本地文件
window.open("https://mp.csdn.net/postedit/static/xxx.xlsx");// 下载网络文件
注：中文名未测试
下载文件
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
<button onclick="download()">下载button>
<script>
function downloadMp3(filePath) {
fetch(filePath).then(res => res.blob()).then(blob => {
const a = document.createElement('a');
document.body.appendChild(a)
a.style.display = 'none'
const url = window.URL.createObjectURL(blob);
a.href = url;
a.download = 'xxxx.mp3';
a.click();
document.body.removeChild(a)
window.URL.revokeObjectURL(url);
});
}
function download() {
this.downloadMp3('http://m10.music.com/708b9cbb995e5dfb5b27295c1.m4a');
}
script>
body>
html>
Blob下载文件
<a id="h">点此进行下载a> <script> var blob = new Blob(["Hello World"]); var url = window.URL.createObjectURL(blob); var a = document.getElementById("h"); a.download = "helloworld.txt"; a.href = url; script>
我们可以通过window.URL.createObjectURL，接收一个Blob（File）对象，将其转化为Blob URL,然后赋给 a.download属性，然后在页面上点击这个链接就可以实现下载了。
备注：download属性不兼容IE, 对IE可通过window.navigator.msSaveBlob方法或其他进行优化(IE10/11)