首页 > 其他分享 >前端文件下载以及重命名的优化

前端文件下载以及重命名的优化

时间:2023-02-02 14:55:35浏览次数:36  
标签:重命名 浏览器 前端 Content attachment Disposition download 下载

关于文件下载:

1. 贴一下现在项目现有写法:

2. 改进后写法(推荐使用):

import { saveAs } from 'file-saver';

saveAs(url,fileName)

3. 其他

(1)同域

<a download=”xxx.xlsx” href="/xxx.xlsx">下载</a>

<a href="/xxx.xlsx">下载</a> + Content-Disposition:attachment;filename=xxx.xlsx

(2)跨域

cors:

arrayBuffer → blob → url → a download —— blob max size 限制 + 额外进度条开发

<a href="/xxx.xlsx">下载</a> + Content-Disposition:attachment;filename=xxx.xlsx

!cors:

<a href="/xxx.xlsx">下载</a> + Content-Disposition:attachment;filename=xxx.xlsx

总结:

Content-Disposition 唯一真神,同时,若设置Content-Disposition:attachment;可防止浏览器打开而不是下载;但若nginx为前端管理的话,推荐考虑直接同域download属性 (1)download vs content-disposition 在两个都有效时(同域),content-disposition attachment优先级高于download,但二者都无法保证保存到用户本地的文件名,毕竟整个过程可能涉及到浏览器设置、浏览器插件等

(2)content-disposition attachment vs inline

inline 默认值 表明该文件可被浏览器直接显示

attachment 表明该文件应该被下载

标签:重命名,浏览器,前端,Content,attachment,Disposition,download,下载
From: https://www.cnblogs.com/shyhuahua/p/17086011.html

相关文章