a标签如何点击直接下载 而不是打开预览？

• 所有情况通用的方式： 后端设置下载请求的响应头 Content-Dis position: attac hment; filena me="filename.jpg"
  • attachment 表示让浏览器强制下载
  • filename 用于设置下载弹出框里预填的文件名
• 非跨域情况下 给a标签加上 download 属性，如 <a href="url" download="xxx.png"></a>
  • download 里写文件名 注意后缀 (值非必填)
• 通过请求解决跨域问题 动态创建a标签通过blob形式下载 具体看下面解析

文件下载通常有以下方式

<a href="http://localhost:8087/upload/user.png">下载</a> a标签访问文件地址
window.open('http://localhost:8087/upload/user.png') 打开文件地址
后端提供一个接口 /api/download 通过接口返回文件流

浏览器通过请求头Content-Type中的MIME类型（媒体类型，通常称为 Multipurpose Internet Mail Extensions 或 MIME 类型，如 ：image/jpeg application/pdf）识别数据类型，对相应的数据做出相应处理，对于图像文本等浏览器可以直接打开的文件，默认处理方式就是打开，为了避免浏览器直接打开文件我们需要做一些处理；

方案一 a标签+download属性

当url是同源（同域名、同协议、同端口号）时，这种情况用 a标签加download属性的方式即可，download属性指示浏览器该下载而不是打开该文件，同时该属性值即下载时的文件名；

方案二 后端设置下载请求的响应头 Con tent-Disposition 强制下载

这是最通用的一种方式 不受跨域和请求方式的影响

Content-Dis position: att achment; file name="filename.jpg"

想使用window.open实现强制下载的可以用这种方式

在常规的 HTTP 应答中，该响应头的值表示对响应内容的展现形式

• inline 表示将响应内容作为页面的一部分进行展示
• attachment 表示将响应内容作为附件下载，大多数浏览器会呈现一个“保存为”的对话框
• filename(可选) 指定为保存框中预填的文件名