0
点赞
收藏
分享

微信扫一扫

前端Javascript下载文件


项目开发中经常会有导出数据到Excel类似的需求,或者是下载文档的需求。最简单的下载方式是直接请求服务端文件地址,通过浏览器http实现文件下载。但是开发中,由于项目需求,你要下载的文件地址不会暴露给用户,而且需要鉴权才允许下载文件,这个时候我们该怎么处理呢?

应用场景

文件地址没有暴露在公网,无法通过文件url直接下载文件。

要下载的文件内容可能是根据用户请求动态生成的,如导出Excel数据表。

后端需要鉴权验证用户提交的下载请求。

实现流程

前端发送get/post请求,携带header信息(如token用于鉴权),后端接收请求,完成鉴权后,读取对应的文件,将文件以文件流的形式发送给浏览器,浏览器完成下载。

我们把这种方式叫做Blob方式下载。

Blob 对象表示一个不可变、原始数据的类文件对象。Blob 表示的不一定是JavaScript原生格式的数据。

前端代码

我们以下载图片为例,使用axios来做前端异步下载请求。

get方式请求中,我们要在header中携带token信息,这个token就是你在系统中的通行证,一般是你在登录的时候后端给你的token,相当于一张游乐场的门票,有了这张门票,你可以到游乐场里游玩任意项目,只是在游玩时给工作人员出示这个token门票就可以了。

并且还要告诉后端,需要后端返回​​blob​​​类型的数据,使用​​responseType: 'blob'​​。

axios.get('http://localhost:9998/download.php', {
headers: {
'token': '1234512345'
},
responseType: 'blob'
}).then((res) => {
if (res.data.type !== 'application/octet-stream') {
alert('下载失败');
return false;
}

const blob = new Blob([res.data], {
type: 'image/jpeg'
})

let a = document.createElement("a");
let objUrl = URL.createObjectURL(blob);
a.href = objUrl;
a.download = 'abc.jpg' //文件名
a.click();
URL.revokeObjectURL(objUrl); // 释放内存
document.body.removeChild(a);
alert('下载成功');
}).catch((err) => {
console.log(err);
alert('下载失败');
});

我们拿到后端返回的blob对象数据后,在页面上创建一个a标签,然后模拟点击事件,将blob数据保存成文件。注意​​URL.createObjectURL(blob)​​将blob保存在内存中,下载完后记得释放内存哦。

后端代码

在后端download.php中,先要在header中允许接收token,如果是跨域请求那就应该还要设置​​header("Access-Control-Allow-Origin: *");​​允许跨域请求。

header("Access-Control-Allow-Headers: Content-Type, Authorization, X-Requested-With, token");

$token = isset($_SERVER['HTTP_TOKEN']) ? $_SERVER['HTTP_TOKEN'] : '';
if ($token != '1234512345') {
echo 'error.';
exit;
}

$file = '../file/cc.jpg';
if (!file_exists($file)) {
header('HTTP/1.1 404 Not Found');
exit;
}

$fileSize = filesize($file);
//下载文件需要用到的头
header("Content-type: application/octet-stream");
header("Accept-Ranges: bytes");
header("Accept-Length:".$fileSize);
$fp = fopen($file, "rb");
$buffer = 1024;
$fileCount = 0;
//向浏览器发送数据
while(!feof($fp) && $fileCount < $fileSize){
$cont = fread($fp, $buffer);
$fileCount += $buffer;
echo $cont;
}
fclose($fp);

接着就是验证token是否正确,上述代码中的验证过程是伪代码,实际开发中应该根据业务需求,按照一定的算法验证token。token里面可能含有用户信息和过期时间等数据。

然后判断要下载的文件是否存在,这个文件可能不在web目录下,用户无法直接通过url访问。

最后就是读取文件流,发送给浏览器。

举报

相关推荐

0 条评论