使用a标签下载文件教程
在开发过程中,可能需要实现下载文件的操作,这时我们可以采取以下方法实现该功能
1、a标签下载文件
<a href="完整下载地址"></a>
但是这样会有一个问题,就是下载是可以下载了,但是同样触发了a标签的页面跳转功能。
<a :href="`${完整的下载地址}`" target="downloadFile">{{文件名称}}</a>
<iframe style="display: none;" name="downloadFile"></iframe>
这样处理就行了
2、动态生成a标签下载
// 用fetch发送请求 对请求回来的二进制文件流进行处理
fetch('/upload/user.png').then((res) => {
res.blob().then((blob) => {
const blobUrl = window.URL.createObjectURL(blob);
// 这里的文件名根据实际情况从响应头或者url里获取
const filename = 'user.txt';
const a = document.createElement('a');
a.href = blobUrl;
a.download = filename;;
a.click();
window.URL.revokeObjectURL(blobUrl);
});
});
1、a标签下载文件
<a href="完整下载地址"></a>
但是这样会有一个问题,就是下载是可以下载了,但是同样触发了a标签的页面跳转功能。
<a :href="`${完整的下载地址}`" target="downloadFile">{{文件名称}}</a>
<iframe style="display: none;" name="downloadFile"></iframe>
这样处理就行了
2、动态生成a标签下载
// 用fetch发送请求 对请求回来的二进制文件流进行处理
fetch('/upload/user.png').then((res) => {
res.blob().then((blob) => {
const blobUrl = window.URL.createObjectURL(blob);
// 这里的文件名根据实际情况从响应头或者url里获取
const filename = 'user.txt';
const a = document.createElement('a');
a.href = blobUrl;
a.download = filename;;
a.click();
window.URL.revokeObjectURL(blobUrl);
});
});