如何使用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);
  });
});

注：
如果遇到下载 txt、jpg 等文件时出现直接打开文件而不是下载文件的情况时，可以在下载地址即 url 后拼接 ‘?response-content-type=application/octet-stream’ 即可