前端中的下载文件

前端中的下载文件

一、a标签打开新连接

<a href="path/to/your/file" target="_blank">下载</a>

二、window.open

window.open('path/to/your/file')

上述两种方式实现都非常简单 缺点：上述两种的无法支持Post

三、手动发起请求

fetch(fileUrl, { method: 'POST' })
  .then(res => res.blob())
  .then(blob => {
    let link = document.createElement('a')
    let objectUrl = URL.createObjectURL(blob);
    link.href = objectUrl;
    a.download = "filename";
    a.click();
  })

优点：支持post，支持任意格式的参数提交 缺点：需要等待请求完成才能下载，对大文件极为不友好

四、构造form

<form action="path/to/your/file" method="post" target="_blank">
  <input type="hidden" name="param1" value="your value">
</form>
<script>
  let form = document.querySelector('form')
  form.submit();
</script>

优点：支持POST，下载由浏览器控制，对待大文件也比较友好 缺点：不支持json提交参数