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>

所以，如果你想要 自定义下载文件名或者直接下载图片，可以和后端约定 要么上传图片的时候就存入中文名，要么让后端做下载操作，然后给你提供接口，你去请求就啦。