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

62次阅读

共计 1577 个字符,预计需要花费 4 分钟才能阅读完成。

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

正文完
 0