HTML a链接下载文件之图片,文件,乱码等问题
我们在做需求的时候,经常会遇到下载文件
前端下载文件一般分为两种方式:
使用 a 链接进行下载:
<a herf="url" >下载</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 链接可以直接进行下载
<a herf="xxxx.xlsx">点击直接下载</a>
但是对于. jpg、.png等后缀的图片文件,点击超链接是进行的预览模式,这是因为如果你是下载浏览器无法解析的文件,例如.exe,.xlsx…那么浏览器也会自动下载,但是如果你使用浏览器可以解析的文件,比如.txt,.png…浏览器就会采取预览模式,所以无论如何你都无法直接弹出下载框。
<a herf="xxxx.jpg">点击直接下载</a>
这时候如果我们不进行特殊设置,他会直接在本页面打开图片,体验度不是很好,所以我们需要设置target="_blank"属性,使其新建窗口打开,然后手动下载
<a
href={`${HttpProps.IMG_ROOT}/${item.url}`}
// 超链接 target="_blank" 要增加 rel="nofollow noopener noreferrer" 来堵住钓鱼安全漏洞。如果你在链接上使用 target="_blank"属性,并且不加上rel="noopener"属性,那么你就让用户暴露在一个非常简单的钓鱼攻击之下。
rel="noopener noreferrer"
target="_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年岗位工作目标评估表_样例.xlsx"
size: 214962
status: "done"
type: "image/png"
url: "url.xlsx"
}
render() {
return (
judgeUrlIsImage(urlInfo.url) ? (
<a herf={urlInfo.url} rel="noopener 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" download="b">点击下载</a>
所以,如果你想要 自定义下载文件名或者直接下载图片,可以和后端约定 要么上传图片的时候就存入中文名,要么让后端做下载操作,然后给你提供接口,你去请求就👌啦。
吃橘子的猫﹒: 我换了US的节点解决了
鹤汀浮渚。: 先把object 的 value全部取出来,再放入labels里
m0_61819120: 您好 如果labels这里每项元素想用对象的value值 应该怎么修改呢
好久不见的小浴花: 感恩的心感谢有你
苏黎世的民谣: 感谢大牛!如果有小伙伴遇到页面加载不出来的情况,可以试试把 main.js 中的 app.use(axios) 放在最后