更加优雅的下载文件 --- http header Content-Disposition 学习

更加优雅的下载文件 --- http header Content-Disposition 学习

Content-Disposition 在响应头中,告诉浏览器如何处理返回的内容,在表单提交中,说明表单字段信息。

在响应头中

用在响应头中,告诉浏览器如何处理返回的内容。

bash 复制代码
'Content-Disposition': 'inline'

预览,返回的内容替换当前页面,可使用 a 标签的 target="_blank" 打开新标签。

bash 复制代码
'Content-Disposition': 'attachment'

下载,使用 a 访问,会把路径作为名字,文件后缀名浏览器自动识别。

bash 复制代码
'Content-Disposition': 'attachment;filename=filename'

下载,接口指定文件名字。

文件名含有中文,使用 encodeURIComponent 编码,否则报错。

Invalid character in header content ["Content-Disposition"]。

在请求头中

页面上有表单,并且我们选择的表单提交方式为 multipart/form-data 时, Content-Disposition 会出现在请求体中。

可能会这样出现:

bash 复制代码
Content-Disposition: form-data
Content-Disposition: form-data; name="fieldName"
Content-Disposition: form-data; name="fieldName"; filename="filename.jpg"

实例代码

a 标签的 download 属性

downloada 标签的属性,用于指定下载动作或者指定文件的名字。

html 复制代码
<!-- 下载 -->
<a href="http://localhost:3000/download" download>download</a>
<!-- 下载且指定名字 -->
<a href="http://localhost:3000/download" download="filename">download</a>

download 用于指定名字,如果不指定,浏览器会使用路径的最后一部分作为文件名。

JS 复制代码
/**
 * 从链接下载文件
 * @param {string} fileId 文件 id
 * @param {string} fileName 文件名,默认为 ''
 * @param {string} path 文件下载路径,默认为 FILE_PATH
 * @example downloadFile('123', '文件名') // 下载 文件名.docx
 * @example downloadFile('docFile') // 下载 docFile.docx
 * @example downloadFile('docFile','file-name','download/path') // 下载 docFile.docx
 */
export function downloadFile(fileId, fileName = '', path = FILE_PATH) {
  if (!fileId) return
  const dotIndex = fileName.lastIndexOf('.')
  const name = dotIndex > 0 ? fileName.slice(0, dotIndex) : fileName
  const dateName = dayjs().format('YYYY年MM月DD日HH时mm分ss秒')
  const a = document.createElement('a')
  a.setAttribute('download', name || dateName)
  a.href = `${path}/${fileId}?fileName=${fileName}`
  a.click()
  a.remove()
}

指定文件名字成功的两个条件:

  • 同源
  • 接口没设置 Content-Dispositionfilename 属性

小结

  • Content-Disposition 用于告诉浏览器如何处理返回的内容,用在响应头中,可用于下载文件。
  • a标签用于的 download 属性用于下载文件,同源,且接口没设置 Content-Dispositionfilename 属性才能指定文件名字。
相关推荐
roshy12 分钟前
SSE与Websocket、Http的关系
websocket·网络协议·http
2301_8035545228 分钟前
实习项目包装--HTTP 协议和 Web API
前端·网络协议·http
自强的小白36 分钟前
vlan(局部虚拟网)
网络·学习
一只乔哇噻1 小时前
java后端工程师进修ing(研一版 || day41)
java·开发语言·学习·算法
徐子元竟然被占了!!1 小时前
RIP协议
网络·网络协议
知识分享小能手1 小时前
React学习教程,从入门到精通,React 使用属性(Props)创建组件语法知识点与案例详解(15)
前端·javascript·vue.js·学习·react.js·前端框架·vue
知识分享小能手7 小时前
React学习教程,从入门到精通, React 属性(Props)语法知识点与案例详解(14)
前端·javascript·vue.js·学习·react.js·vue·react
茯苓gao10 小时前
STM32G4 速度环开环,电流环闭环 IF模式建模
笔记·stm32·单片机·嵌入式硬件·学习
海拥✘10 小时前
深入理解 IP 地址:概念、分类与日常应用
网络·网络协议·tcp/ip
是誰萆微了承諾10 小时前
【golang学习笔记 gin 】1.2 redis 的使用
笔记·学习·golang