在H5中，为a标签新增了一个download属性，用于文件的下载。但是支持该属性的浏览器也只有Firefox和Chrome。
image.png
download的属性值用来指定下载时显示的文件名，是否使用download属性的区别在于：不加download属性时，浏览器会直接浏览a的href属性值，而加了download属性，会强制下载该href属性值内容。
使用download属性来实现文件下载的代码如下：
function downloadFileFromText(text, window, document, fileName) {
const bedFile = new Blob([text], { type: 'text/plain' });
const bedFileUrl = window.URL.createObjectURL(bedFile);
const tempLink = document.createElement('a');
document.body.appendChild(tempLink);
tempLink.href = bedFileUrl;
tempLink.setAttribute('download', fileName);
tempLink.click();
window.URL.revokeObjectURL(bedFileUrl);
document.body.removeChild(tempLink);
}
这样在IE下是没有任何反应的，也不报错。若要兼容IE可以使用msSaveBlob方法。
function downloadFileFromText(text, window, document, fileName) {
const bedFile = new Blob([text], { type: 'text/plain' });
const bedFileUrl = window.URL.createObjectURL(bedFile);
const tempLink = document.createElement('a');
document.body.appendChild(tempLink);
tempLink.href = bedFileUrl;
tempLink.setAttribute('download', fileName);
tempLink.click();
window.URL.revokeObjectURL(bedFileUrl);
document.body.removeChild(tempLink);
// for IE
if (navigator.msSaveBlob) {
navigator.msSaveBlob(bedFile, fileName);
}
}
