在项目中,经常会遇到做项目关于实现附件预览和下载得功能,那么怎么来实现呢:
在学习之前,首先会应用到Blob相关得知识点:
那么blob到底是什么呢
先让我们看看官方关于blob得介绍
文章来自于Blob - Web API 接口参考 | MDN (mozilla.org)
Blob
对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取,也可以转换成 ReadableStream 来用于数据操作。
Blob 表示的不一定是 JavaScript 原生格式的数据。File 接口基于 Blob
,继承了 blob 的功能并将其扩展以支持用户系统上的文件。
先让我们直接上代码:
文件下载实现代码逻辑:
downloadFile(file.fileId)
.then((res) => {
const blob = new Blob([res.data]);
const href = URL.createObjectURL(blob);// 创建新的URL表示指定的blob对象
const a = document.createElement('a');// 创建a标签
a.style.display = 'none';
// 指定下载链接
a.href = href;
// 指定下载文件名
a.setAttribute('download', targetFile.name);
a.click();// 触发下载
URL.revokeObjectURL(a.href);// 释放URL对象
})
file.fileId是文件id
文件预览实现逻辑:
downloadFile(file.fileId)
.then((res) => {
const pdfFile = window.URL.createObjectURL(
new Blob([res.data],{type: 'application/pdf'})
);
// 跳转页面预览
window.open(pdfFile);
URL.revokeObjectURL(pdfFile);//释放URL对象
})
然后就可以预览和实现了