js——下载文件_"js 下载文件 type:\"application/zip"

OSS阿里云上传文件 前端js下载url跨域问题

能触发浏览器下载的url有两类:

• response header——指定了Content-Disposition为attachment，它表示让浏览器把响应体作为附件下载到本地 (一般Content-Disposition还会指定filename, 下载的文件默认就是filename指定的名字)

• response header——指定了Content-Type 为 application/octet-stream(无类型) 或者 application/zip(下载zip包时)以及其它几个不常见类型 (其中还有浏览器差异)，其中 application/octet-stream表示http response为二进制流(没指定明确的type), 需要下载到本地, 由系统决定或者用户手动指定打开方式。

在这种前提下，只需要浏览器请求了这个地址，都会自动下载，具体的方式如下：

1. iframe——加载请求此地址时会自动下载 ，使用的时候把iframe设置为display;none即可（而对 pdf/mp3 之类文件是直接打开）

<iframe name="hehe" src='下载url'></iframe>
1

2. a——点击请求此地址时会自动下载

<a href="下载url">下载</a>
1

// 下载文件（js 方法，其他几个都可类似）
let down = document.createElement('a');
down.href = '后台给的url';
down.download = '';// 默认为文件的名字
document.body.appendChild(down);
down.click();
down.remove();
1
2
3
4
5
6
7

H5的download属性 <a download href="下载url">下载</a> 这时候，如果返回的是img这种浏览器可以打开的文件时，也会下载（否则会直接打开）

3. form——发起submit请求此地址时会自动下载

<form 
   action="下载url"
   method="get" 
>
   <button type="submit">下载</button>
</form>
1
2
3
4
5
6

4. window.location.href——赋值为此地址时会自动下载 ，如果是其他地址，会跳转，但当是下载的url，浏览器会发起请求，下载下来，并且不会改变本页的 window.location.href（但仅限于常见文件如压缩文件（.zip）和图片文件（.png）等。）

window.location.href = "下载url"
1

5. window.open——赋值为此地址时会自动下载 ，但会先打开新标签页再下载再关闭新标签页，体验不佳

window.open = "下载url"
1

多个文件同时下载方法（iframe 法）：

// 下载多个文件
for (let i = 0; i < res.data.length; i++) {
     const iframe = document.createElement("iframe");
     iframe.style.display = "none";
     iframe.src = res.data[i];
     document.body.appendChild(iframe);
     // 5分钟之后移除,必须有
     setTimeout(() => {
        iframe.remove();
     }, 5 * 60 * 1000);
}
1
2
3
4
5
6
7
8
9
10
11