前端文件下载的奇淫技巧

前端文件下载的奇淫技巧

最简单的文件下载

由于前端HTML 元素支持文件的下载，所以只需运用a标签就可以实现文件的下载

<a href="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png">download</a>

不通过a标签来触发下载

可以通过给a标签设置css display属性为none 然后通过其他dom元素的响应事件来触发该被隐藏的a标签点击事件

<a id="hidden-a-link" href="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" style="display:none;" >download</a>

<button onclick="trigger()">
  some beautiful button you write
</button>

<script>
  function trigger(){
    document.getElementById("hidden-a-link").click()
  }
</script>

直接在自定义下载函数中生成a标签并不挂载到dom树

function download(){
  const aLink = document.createElement("a");
  const aLink = document.createElement("a");
    aLink.href = "https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png";
    aLink.click();
}

如何自定义文件名称

在后端返回的response-header中如果没有明确的定义文件的名称信息，可以通过设置a标签的download属性更改文件名称

<a id="hidden-a-link" href="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" style="display:none;" download="your-self-defined-name">download</a>

如何在后端明确定义了文件名称的情况下修改文件的名称(如果有必要的话)

由于后端设置的头信息文件名称优先级是高于a标签的download属性的所以此时download属性会失效

可以通过axios之类的库获取到文件的二进制信息并通过Blob对象存储数据并创建objectUrl再通过a标签提供的能力下载所需要的文件并自定义名称

const fileDownloadWithCustomName = async () => {
  try {
    const res = await Axios.get("https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png",
    {
      responseType: 'blob'
    });
    const { status, data, headers } = res;
    // 读取文件数据
    const blob = new Blob([data], { type: "application/octet-stream" });
    const objectUrl = URL.createObjectURL(blob);
    // 创建a标签并赋值相关属性
    const aLink = document.createElement("a");
    aLink.href = objectUrl;
    aLink.download = "your-custom-defined-name";
    aLink.click();
  } catch (error) {
    console.log(error)
  }
};