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 = urllink.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"属性，使其新建窗口打开，然后手动下载

<ahref={`${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: 214962status: "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>

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

HTML a链接下载文件之图片，文件，乱码等问题相关推荐

使用5.0.0版本的cssbox将html文件转为图片文件，并解决字体显示问题
使用5.0.0版本的cssbox将html文件转为图片文件,并解决字体显示问题 1. 引入依赖 2. 编写Util类 3. 调用Util 4. 存在的问题 5. 解决字体不兼容问题 6. 官方文档在 ...
php生成图片文件流,php如何将base64数据流文件转换为图片文件?
2017-03-07 在开发中,自己遇到一个前端在上传图片的时候,使用的base64数据流文件显示的图片. 也就是说 ***image/后面的jpg是我们的图片文件格式,(base64,)后面的很大一 ...
【转】如何把压缩文件变成图片文件，图片后缀改成rar就可以解压
转载自此用户已故把自己喜欢的小软件捆绑到图片上!下面就是步骤: 第一步:准备一张图片和将要合并入图片的软件并将他们存放在同一个文件夹内: 第二步:将软件先压缩起来变成RAR文件(用WinRAR添加 ...
java调用pdfbox转pdf文件为图片文件，有中文时在windows上正常，部署到linux下乱码
最近遇到了一个很头疼的问题,我们的项目移动端需要一个读pdf的功能,但是手机端开发人员说移动端是用jquerymobile做的,不能直接甩pdf文件过去(原因是pdf文件太大),于是乎我们想到了2个解 ...
[Xcode 实际操作]七、文件与数据-(3)创建文本文件、属性列表文件、图片文件
目录:[Swift]Xcode实际操作本文将演示如何创建各种类型的文件. 在项目导航区,打开视图控制器的代码文件[ViewController.swift] 1 import UIKit 2 3 c ...
SolidWorks批量转换STL文件或图片文件的方法
Stl文件是一种三维通用格式,使用广泛,如何批量将SolidWorks零部件转换为STL文件? 1.首先下载凯元工具(KYTOOL)安装 SolidWorks安装参考: http://blog.sin ...
h5文件格式详解及h5文件与图片文件之间的相互转换（python实现）
背景:h5文件详解 H5文件是层次数据格式第5代的版本(Hierarchical Data Format,HDF5),它是用于存储科学数据的一种文件格式和库文件.由美国超级计算中心与应用中心研发的文件 ...
python 下载图片损坏_爬虫爬取出的图片下载出错，图片文件直接损坏
import requests import os, sys, stat from lxml import etree import time class HuangMan(): def __init ...
把canvas标签里的图像下载成本地图片文件
有些在线图片网站,进行图像处理比如去除背景后,结果图片是以html5里canvas标签的形式显示出来的,我们没有办法通过右键点击图片然后下载的方式去保存到本地. [外链图片转存失败,源站可能有防盗链机 ...
linux禁止客户端上传文件_图片/文件上传如此简单｜macOS 图床客户端 uPic
前言相信很多人在写作(特别是需要多平台发布)的时候都会因为插图而增加工作量: 平台图片外链不允许在网站外部访问. 使用云图床服务上传流程复杂. 那么这些问题有没有办法解决呢,答案肯定是"有 ...

HTML a链接下载文件之图片，文件，乱码等问题

HTML a链接下载文件之图片，文件，乱码等问题相关推荐

最新文章

热门文章