在前端直接组合数据或者接口返回的文件会被浏览器自动打开的情况下,
可以通过前端处理来保存文件到本地, 从而避免浏览器的自动解析;
原理:通过js书写临时<a>
标签来进行类似下载弹窗的操作,需要浏览器开启每次下载文件询问保存位置
;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a id="testa" href="javascript:void(0)">click me</a>
</body>
<script type="text/javascript">
let tagObj = document.getElementById('testa')
tagObj.onclick = function(e) {
const fileName = 'test.txt';
const str = 'this man is the best man, none of others can be with him.';
const content = str
const blob = new Blob([content], {
type: 'application/text'
}) // 构造一个blob对象来处理数据
// 对于<a>标签,只有 Firefox 和 Chrome(内核) 支持 download 属性
// IE10以上支持blob但是依然不支持download
if ('download' in document.createElement('a')) { // 支持a标签download的浏览器
const link = document.createElement('a') // 创建a标签
link.download = fileName // a标签添加属性
link.style.display = 'none'
link.href = URL.createObjectURL(blob)
document.body.appendChild(link)
link.click() // 执行下载
URL.revokeObjectURL(link.href) // 释放url
document.body.removeChild(link) // 释放标签
} else { // 其他浏览器
navigator.msSaveBlob(blob, fileName)
}
}
</script>
</html>
注:IE9不支持Blob对象,因此至少要IE10+,其他浏览器没有限制;
对于IE9, 直接使用下面的方式即可:
// 对于png,MP4,txt浏览器会自动打开该文件, 添加参数可以避免直接被打开
windows.open(`${url}?dl=1`, '_blank')