目录说明一、Blob对象二、前端三、后端总结说明 最近遇到一个需求,文件下载,但需要鉴权,这就意味着不能用后台返回下载链接的方式进行下载,因为一旦被别人拿到这条链接,就可以不需要任何
最近遇到一个需求,文件下载,但需要鉴权,这就意味着不能用后台返回下载链接的方式进行下载,因为一旦被别人拿到这条链接,就可以不需要任何权限就直接下载,因此需要换种思路,在一番百度之后,了解到了blob对象,这就是本文要讲的内容
注意:本文仅为记录学习轨迹,如有侵权,联系删除
Blob 对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取,也可以转换成 ReadableStream 来用于数据操作。
blob下载思路:
1) 使用ajax发起请求,指定接收类型为blob(responseType: ‘blob')
2)读取请求返回的头部信息里的content-disposition,返回的文件名就在这里面(或者自定义文件名,可跳过此步骤)
3)使用URL.createObjectURL将请求的blob数据转为可下载的url地址
4)使用a标签下载
代码:
// 下载
export function download(query,newFileName) {
return request({
url: '/file/download',
method: 'get',
responseType: 'blob',
params: query
}).then((res) => {
let blob = res.data
// 从response的headers中获取filename, 后端response.setHeader("Content-disposition", "attachment; filename=xxxx.docx") 设置的文件名;
// let patt = new RegExp('filename=([^;]+\\.[^\\.;]+);*')
// let contentDisposition = decodeURI(res.headers['content-disposition'])
// let result = patt.exec(contentDisposition)
// let fileName = result[1]
//将请求的blob数据转为可下载的url地址
let url = URL.createObjectURL(blob)
// 创建一个下载标签<a>
const aLink = document.createElement('a')
aLink.href = url
// 2.直接使用自定义文件名,设置下载文件名称
aLink.setAttribute('download', newFileName )
document.body.appendChild(aLink)
// 模拟点击下载
aLink.click()
// 移除改下载标签
document.body.removeChild(aLink);
})
}
调用该方法
//下载
download(row) {
// filePath:文件路径,例如:e:\upload\
// fileName:文件名, 例如:a.xlsx
let fORM = {
filePath: row.filePath,
fileName: row.fileName,
};
//下载,row.fileOriginalName是文件的原始名称,仅仅用于文件下载时起个名字而已
download(form, row.fileOriginalName);
}
// 由于本人使用的是阿里的oss服务,所以只需要传个文件路径回去后端,根据文件路径查询oss接口得到返回的文件流即可,例如(BufferedInputStream),在响应头设置好返回的类型即可
后端这里用了阿里的oss服务,直接拿到文件流(new BufferedInputStream(ossObject.getObjectContent())),如果是非oss的情况下,只需要读取对应服务器上面的文件(File),转成BufferedInputStream后,直接套用下面的代码即可(即通过response.getOutputStream()设置BufferedOutputStream 就行了)
// response:响应
// filePath:文件路径,例如:e:\upload\
// fileName:文件名, 例如:a.xlsx
public void download(httpservletResponse response, String filePath, String fileName) {
//待下载文件名
response.reset();
response.setHeader("Content-Disposition", "attachment;filename=" + fileName);
response.setContentType("application/octet-stream");
response.setCharacterEncoding("utf-8");
// 创建OSSClient实例。
OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);
// ossObject包含文件所在的存储空间名称、文件名称、文件元信息以及一个输入流。
OSSObject ossObject = ossClient.getObject(bucketName, filePath + "/" + fileName);
BufferedInputStream in = null;
BufferedOutputStream out = null;
byte[] buff = new byte[1024];
int length = 0;
try {
in = new BufferedInputStream(ossObject.getObjectContent());
out = new BufferedOutputStream(response.getOutputStream());
while ((length = in.read(buff)) != -1){
out.write(buff,0,length);
}
} catch (IOException e) {
e.printStackTrace();
} finally {
if(out != null){
try {
out.flush();
out.close();
} catch (IOException e) {
e.printStackTrace();
}
}
if(in != null){
try {
in.close();
} catch (IOException e) {
e.printStackTrace();
}
}
if (ossClient != null) {
ossClient.shutdown();
}
}
}
本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注编程网的更多内容!
--结束END--
本文标题: javascriptBlob对象实现文件下载
本文链接: https://www.lsjlt.com/news/160647.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
一口价域名售卖能注册吗?域名是网站的标识,简短且易于记忆,为在线用户提供了访问我们网站的简单路径。一口价是在域名交易中一种常见的模式,而这种通常是针对已经被注册的域名转售给其他人的一种方式。
一口价域名买卖的过程通常包括以下几个步骤:
1.寻找:买家需要在域名售卖平台上找到心仪的一口价域名。平台通常会为每个可售的域名提供详细的描述,包括价格、年龄、流
443px" 443px) https://www.west.cn/docs/wp-content/uploads/2024/04/SEO图片294.jpg https://www.west.cn/docs/wp-content/uploads/2024/04/SEO图片294-768x413.jpg 域名售卖 域名一口价售卖 游戏音频 赋值/切片 框架优势 评估指南 项目规模
0