关于javascript:利用a标签实现文件下载功能ant-design-vue可用

# 利用a标签实现文件下载性能（ant design vue可用）``````## 代码和正文``````

let fileUrl = “” //所下载文件的网络地址

let fileName = “” //下载胜利后保留的文件名

//创立一个a标签

const link = document.createElement('a');

 //设置是否在以后页面关上，target其余取值及含意：_blank：新窗口关上。_parent：在父窗口中关上链接。_self：默认，以后页面跳转。_top：在以后窗体关上链接，并替换以后的整个窗体(框架页)。

link.target = '_blank' //如果该值为‘_self'该行可疏忽

 //将a标签暗藏起来

link.style.display = 'none';

 // 给a标签设置下载的网络地址

link.href = URL.createObjectURL(blob);

 //设置保留下来的文件名

link.download = fileName + '.pdf';

 //将a标签增加到文档对象中

document.body.appendChild(link);

 //触发相应事件

link.click();

 //移除a标签

link.remove();

 //进行到这一步对于一些浏览器或者一些格局曾经胜利啦然而对于图片、文档可能它是预览状态，解决形式 参考上面办法

fetch(fileUrl).then(res => res.blob()).then((blob) => {

           link.href = URL.createObjectURL(blob);

          link.download = fileName + '.pdf';

           document.body.appendChild(link);

          link.click();

           link.remove();

        });

```

纯代码

### 第一种

``````let fileUrl = “” //所下载文件的网络地址``````let fileName = “” //下载胜利后保留的文件名`````` const link = document.createElement('a');`````` link.target = '_blank'  //如果该值为‘_self'该行可疏忽`````` link.style.display = 'none';`````` link.href = URL.createObjectURL(blob);`````` link.download = fileName + '.pdf';`````` document.body.appendChild(link);`````` link.click();`````` link.remove();``````

### 第二种

``````let fileUrl = “” //所下载文件的网络地址``````let fileName = “” //下载胜利后保留的文件名`````` const link = document.createElement('a');`````` link.target = '_blank'  //如果该值为‘_self'该行可疏忽`````` link.style.display = 'none';`````` fetch(fileUrl).then(res => res.blob()).then((blob) => {``````           link.href = URL.createObjectURL(blob);``````           link.download = fileName + '.pdf';``````           document.body.appendChild(link);``````           link.click();``````           link.remove();``````         });``````