利用a标签下载
一、a标签下载文件
<a href="完整下载地址"></a>
但是这样会有一个问题，就是下载是可以下载了，但是同样触发了a标签的页面跳转功能。
<a :href="`${完整的下载地址}`" target="downloadFile">{{文件名称}}</a>
<iframe style="display: none;" name="downloadFile"></iframe>
二. 动态生成a标签下载
// 用fetch发送请求 对请求回来的二进制文件流进行处理
fetch('/upload/user.png').then((res) => {
res.blob().then((blob) => {
const blobUrl = window.URL.createObjectURL(blob);
// 这里的文件名根据实际情况从响应头或者url里获取
const filename = 'user.txt';
const a = document.createElement('a');
a.href = blobUrl;
a.download = filename;
a.click();
window.URL.revokeObjectURL(blobUrl);
});
});
注：如果遇到下载 txt、jpg 等文件时出现直接打开文件而不是下载文件的情况时，可以在下载地址即 url 后拼接 ‘?response-content-type=application/octet-stream’ 即可
三. 阻止a标签跳转的5中方法
- 在标签里面添加点击事件，直接 return false
<a href="https://www.jd.com" onclick="alert('哈哈');return false;">跳转1</a>
- 在函数内直接return false （用的最多）
<a href="https://www.jd.com" id='link2'>跳转2</a>
<script>
let link2 = document.getElementById('link2');
link2.onclick = function(){
alert('呵呵');
return false;
}
</script>
- 这种方法类似2，在函数内return false 然后a再调用，调用没有括号
<a href="https://www.jd.com" id='link3'>跳转3</a>
<script>
let link3 = document.getElementById('link3');
link2.onclick =text; //注意这里不加括号
function text(){
alert('呵呵');
return false;
}
</script>
- 点击a,调用test方法,得到的false返回值再返回给a标签
<a href="https://www.jd.com" onclick="return test()" id="link4">跳转4</a>
<script>
function text(){
alert('呵呵');
return false;
}
</script>
- 京东网站的写法，很常用
<a href="javascript:void(0);" onclick="test()" id="link5">跳转5</a>