就工作以来对a标签的宠爱逐渐加深，工作中常用到一些下载，有时候其实某些下载都不需要掉后端接口，因为前端资源本身就是下载的，只要不涉及大范围的数据，前端就可以实现下载。

a标签

常见的a标签常用属性

• target：

1. _blank ：在新窗口中打开被链接文档
2. _self : 默认。在相同的框架中打开被链接文档
3. _parent ：在父框架集中打开被链接文档
4. _top ： 在整个窗口中打开链接文档
5. framename ：在指定的框架中打开被链接文档

• href ： 规定链接指向的页面Url
• download ：规定被下载的超链接目标

工作中遇到的业务场景

download ： 作为前端设置下载文件名的属性。 正常下载后给个名字就好了，比如：

// 直接标签
<a href="https://www.xxx.com/xxx.mp3" download="test.mp3"></a>

// js隐式
let a = document.createElement('a');
a.href = 'https://www.xxx.com/xxx.mp3';
a.download = 'test.mp3';
a.click();

遇到的问题

1. 当href的链接地址和页面地址不符合同源策略时，download属性会失效。
2. 当后端生成文件链接时，服务端给死文件后缀名，下载文件改名不能改后缀（否则下载文件损坏）。
3. 下载页面上的文本

解决问题

1. 当页面地址和链接地址不同源时，需要使用js隐式

const download = (url,name) => {
    let x = new XMLHttpRequest();
    x.open("get",url,true);
    x.responseType = 'blob';
    x.onload=function(e) {
        let url_ = window.URL.createObjectURL(x.response)
        let a = document.createElement('a');
        a.href = url_; 
        a.download = name;
        a.click();
    }
     x.send();
}

链接服务需要解决跨域问题。

2. 后端放开后缀类型，或者前后端定义死一种类型。

let a=document.createElement('a');
a.href='data:text/plain;charset=utf-8,'+encodeURIComponent('xxx');