HTML a链接下载文件之图片,文件,乱码等问题 | 您所在的位置:网站首页 › 苹果pdf乱码 › HTML a链接下载文件之图片,文件,乱码等问题 |
我们在做需求的时候,经常会遇到下载文件 前端下载文件一般分为两种方式: 使用 a 链接进行下载: 下载向后端发送请求进行下载: methods:{ downloadReport(item,index){ let date = item.plans[this.daysIndex[index]] let url = 'url' this.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 = 'none' link.href = url link.setAttribute('download', 'excel.xls') document.body.appendChild(link) link.click() }) }, }很多情况下我们使用 a 链接下载 文件时,对于.word、.xlsx等后缀的文件,通过点击 a 链接可以直接进行下载 点击直接下载但是对于. jpg、.png等后缀的图片文件,点击超链接是进行的预览模式,这是因为如果你是下载浏览器无法解析的文件,例如.exe,.xlsx…那么浏览器也会自动下载,但是如果你使用浏览器可以解析的文件,比如.txt,.png…浏览器就会采取预览模式,所以无论如何你都无法直接弹出下载框。 点击直接下载这时候如果我们不进行特殊设置,他会直接在本页面打开图片,体验度不是很好,所以我们需要设置target="_blank"属性,使其新建窗口打开,然后手动下载 HttpProps.IMG_ROOT}/${item.url}`} // 超链接 target="_blank" 要增加 rel="nofollow noopener noreferrer" 来堵住钓鱼安全漏洞。如果你在链接上使用 target="_blank"属性,并且不加上rel="noopener"属性,那么你就让用户暴露在一个非常简单的钓鱼攻击之下。 rel="noopener noreferrer" target="_blank" > 点击预览所以我们需要一个函数来帮我们判断文件类型 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年岗位工作目标评估表_样例.xlsx" size: 214962 status: "done" type: "image/png" url: "url.xlsx" } render() { return ( judgeUrlIsImage(urlInfo.url) ? ( urlInfo.name} ) : ( urlInfo.name} ) ) }细心的人会发现,我们下载下来的文件名可能会是 乱码 no no no 结果你在 a 标签上设置了download 属性,结果发现在 谷歌 或 火狐 下载下来的文件名还是乱码 urlInfo.name}>{urlInfo.name}这是因为 href属性的地址必须是和你前端js非跨域的地址,如果引用的是第三方的网站或者说是前后端分离的项目,调用后台的接口,这时download就会不起作用 如果我们使用本地相对路径的地址它则会起作用 点击下载所以,如果你想要 自定义下载文件名或者直接下载图片,可以和后端约定 要么上传图片的时候就存入中文名,要么让后端做下载操作,然后给你提供接口,你去请求就👌啦。 |
CopyRight 2018-2019 实验室设备网 版权所有 |