常见的一些文件上传组件都会在上传后附加一个可点击的文件名，如图中的xxx.png，这个文件名由<a>标签包裹，业务需求要求点击xxx.png下载对应的文件，而常见文件上传组件的效果都是跳转到链接页面。
解决方法是利用
preventDefault()方法清除组件中<a>标签的跳转效果，然后获取href并自行创建新的带有download属性的<a>标签进行下载操作。
<div onclick="interceptor()">
<!-- 之所以不把拦截方法直接放在 <a> 标签上是因为很多组件库都把 <a> 标签封装起来了 -->
<a href="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1540885002&di=afbac9061dd1e9401b6b2fe448f05bd5&src=http://i1.hdslb.com/bfs/archive/21464a12b2a5f400e2e6dc554b8665664c18c141.jpg">这是一个被封装起来可点击到的a标签</a>
<!-- 这是一个被封装起来且可点击到的 <a> 标签，路径是一张准备要下载的 jpg 图片 -->
</div>
<script>
function interceptor() {
const element = this.event.target; // 获取到 <div> 内被点击的节点
if (element.tagName !== 'A') {
return; // 判断被点击的节点是不是 <a> 标签
}
this.event.preventDefault(); // 如果是 <a> 标签则清除默认行为，即清除跳转到 href 的行为
const href = element.getAttribute('href'); // 获取 <a> 标签内的 href
const a = document.createElement('a'); // 创造新的 <a> 标签用于下载
a.setAttribute('download', ''); // 添加 download 属性
// 仅 chrome、firefox 支持 download 属性，其他浏览器应使用 <iframe>
a.setAttribute('href', href); // 添加 href
a.click(); // 自行点击 但是下载无效 仍然是跳转链接的效果 GG
}
</script>
百度后发现无法下载的原因是<a>标签中的图片链接由于浏览器禁止跨域而导致download属性无效，如果不跨域的话这个方法其实是好用的，那如果我就想下载必须要跨域的防火女小姐姐高清无码大图又该怎么办？
于是针对跨域问题又查阅了其他方案，比如这篇毒瘤文章提到的可以利用
canvas取得base64编码数据：
a标签download属性下载还是打开了文件~（下载地址跨域了）
测试过程中发现canvas能够显示跨域图片，但是无法执行toDataURL转码的操作。按照上面文章提到的方法需要让canvas中加载的image加上下面这句允许跨域的语句。
image.setAttribute('crossOrigin', 'anonymous'); // 这句需要在 image.src = href; 之后添加，否则无效
加上后的效果是
canvas连图片都显示不出来了，继续百度发现了如下回答：
<img>加上crossOrigin="anonymous"之后导致图片无法显示
看完后的内心是这样的：
网友评论