利用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();
});
“`

今天的文章利用a标签实现文件下载功能（ant design vue可用）分享到此就结束了，感谢您的阅读，如果确实帮到您，您可以动动手指转发给其他人。