使用top域名做网站,网络文学网站开发,网站录入,济南建设档案大厦我们在做需求的时候#xff0c;经常会遇到下载文件
前端下载文件一般分为两种方式#xff1a;
使用 a 链接进行下载#xff1a;
a herfurl 下载/a向后端发送请求进行下载#xff1a;
methods:{downloadReport(item,index){let date item.…我们在做需求的时候经常会遇到下载文件
前端下载文件一般分为两种方式
使用 a 链接进行下载
a herfurl 下载/a向后端发送请求进行下载
methods:{downloadReport(item,index){let date item.plans[this.daysIndex[index]]let url urlthis.axios({method:get,url:url,responseType:blob,}).then((data) {if (!data) {return}let url window.URL.createObjectURL(data.data)let link document.createElement(a)link.style.display nonelink.href urllink.setAttribute(download, excel.xls)document.body.appendChild(link)link.click()})},
}很多情况下我们使用 a 链接下载 文件时对于.word、.xlsx等后缀的文件通过点击 a 链接可以直接进行下载
a herfxxxx.xlsx点击直接下载/a但是对于. jpg、.png等后缀的图片文件点击超链接是进行的预览模式这是因为如果你是下载浏览器无法解析的文件例如.exe,.xlsx…那么浏览器也会自动下载但是如果你使用浏览器可以解析的文件比如.txt,.png…浏览器就会采取预览模式所以无论如何你都无法直接弹出下载框。
a herfxxxx.jpg点击直接下载/a这时候如果我们不进行特殊设置他会直接在本页面打开图片体验度不是很好所以我们需要设置target_blank属性使其新建窗口打开然后手动下载
ahref{${HttpProps.IMG_ROOT}/${item.url}}// 超链接 target_blank 要增加 relnofollow noopener noreferrer 来堵住钓鱼安全漏洞。如果你在链接上使用 target_blank属性并且不加上relnoopener属性那么你就让用户暴露在一个非常简单的钓鱼攻击之下。relnoopener noreferrertarget_blank
点击预览
/a所以我们需要一个函数来帮我们判断文件类型
function judgeUrlIsImage(url) {if (/\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(url)) {return true}return false
}综上所述使用a链接下载文件的代码大致为(以react为例)
js:
const judgeUrlIsImage (url) {if (/\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(url)) {return true}return false
}
html:
const urlInfo {name: 2020年岗位工作目标评估表_样例.xlsxsize: 214962status: donetype: image/pngurl: url.xlsx
}
render() {return (judgeUrlIsImage(urlInfo.url) ? (a herf{urlInfo.url} relnoopener noreferrer target_blank{urlInfo.name}/a) : (a herf{urlInfo.url}{urlInfo.name}/a))
}细心的人会发现我们下载下来的文件名可能会是 乱码 虽然我们上传的时候选择的文件名是我们自己设置的 但是我们上传到阿里云的时候后段为了保证每个人上传的文件做区分可能大家上传的文件名相同所以生成了随机码做为文件的名字其实我们下载下来的真正名字取决于它 很好W3school也为我们提供了downLoad去控制下载文件的名称属性 你以为这就行了吗
no no no 只有 火狐 和 谷歌 才支持这个属性
结果你在 a 标签上设置了download 属性结果发现在 谷歌 或 火狐 下载下来的文件名还是乱码
a herf{urlInfo.url} download{urlInfo.name}{urlInfo.name}/a这是因为 href属性的地址必须是和你前端js非跨域的地址如果引用的是第三方的网站或者说是前后端分离的项目调用后台的接口这时download就会不起作用
如果我们使用本地相对路径的地址它则会起作用
a href/images/a.exe downloadb点击下载/a所以如果你想要 自定义下载文件名或者直接下载图片可以和后端约定 要么上传图片的时候就存入中文名要么让后端做下载操作然后给你提供接口你去请求就啦。
