常用的文件下载方式

链接跳转

浏览器访问一个链接时,对于浏览器可以打开的文件类型,浏览器会跳转到该链接,而对于无法打开的文件类型,浏览器会自动下载.
因此根据这一特性,对于浏览器无法打开的文件类型,可以采用location.href,window.open,a标签等只要是可以访问链接的方式,实现文件下载

缺点:

  1. 对于图片等浏览器能打开的文件格式,不适用

a标签

对a标签添加download属性,可实现文件下载.参考MDN,注意几点:

  • 要配合href属性使用,href为文件的地址,download为文件预填充名
  • 可以使用blob:URL和data:URL,下载用js生成的内容
  • content-disposition优先级高于此属性

缺点:
1)只能用于同源URL,当跨域时,download属性失效,a标签保持默认的跳转功能

服务端设置header

通过服务端设置header,直接标识文件需要下载

header('Content-type: image/jpeg'); 
header("Content-Disposition: attachment; filename='filename.jpg'"); 

参考文档MDN content-disposition,
Content-Disposition 响应头指示回复的内容该以何种形式展示,是以内联的形式(即网页或者页面的一部分),还是以附件的形式下载并保存到本地。attachment表示消息体应该被下载到本地.
缺点:

  1. 需要服务端支持

参考

  1. 了解HTML/HTML5中的download属性
  2. MDN
  3. 实现点击下载文件的几种方法
posted @ 2019-10-29 19:06  小丸子的城堡  阅读(747)  评论(0编辑  收藏  举报