a标签跳转下载 并且阻止新网页跳转

利用a标签下载

一、a标签下载文件

但是这样会有一个问题，就是下载是可以下载了，但是同样触发了a标签的页面跳转功能。

{{文件名称}}

二. 动态生成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

跳转1

在函数内直接return false （用的最多）

跳转2

这种方法类似2，在函数内return false 然后a再调用，调用没有括号

跳转3

点击a,调用test方法,得到的false返回值再返回给a标签

跳转4

京东网站的写法，很常用

跳转5