这里用到了Blob,先简单介绍一下
Blob 是一种数据类型。它可以用来存储和处理大量的二进制数据,比如图像、音频、视频、文件等。通常用于处理和传输数据,比如文件上传和下载、图像处理和展示、音视频播放等。
一、导出的实现
const download = () => {
dataUpload.export() //调用导出接口
.then(response => {
let name = getDate(); //这里加了导出时间
exported(response, `导出文件名字-${name}.xlsx`); //调用exported方法,扩展名自定义
})
.catch(error => {
alert(error);
});
};
function exported(response, fileName) {
let blob = new Blob([response], { type: "application/octet-stream;" }); //把得到的数据转化为blob类型,得到的数据可以是任何二进制数据类型
const url = window.URL.createObjectURL(blob); //使用 URL.createObjectURL() 方法将 Blob 对象转换为可供下载或展示的 URL 对象。
const link = document.createElement("a"); //创建一个a链接元素
link.href = url;
link.setAttribute("download", fileName); // 设置a链接的download属性,规定下载文件的新文件名(文件名和扩展名),补充一下a链接的download属性 <a download="filename">
document.body.appendChild(link); //把a链接添加到文档中
link.click(); //并执行点击链接的操作
}
//获取当前时间 格式为年月日时分秒 20240926163031(2024年9月26日16点30分31秒)
function getDate() {
const now = new Date();
const year = now.getFullYear();
const month = (now.getMonth() + 1).toString().padStart(2, "0");
const day = now.getDate().toString().padStart(2, "0");
const hour = now.getHours().toString().padStart(2, "0");
const minute = now.getMinutes().toString().padStart(2, "0");
const second = now.getSeconds().toString().padStart(2, "0");
return `${year}${month}${day}${hour}${minute}${second}`;
}
需要注意的是,调用接口中需要指定响应的数据类型为blob
export function export(data) {
return request({
url: `xxxx`,
method: "post",
responseType: "blob",
data
});
}
二、导入的实现
用element的el-upload来实现文件的导入,代码里加了导入之前文件的格式校验 ,需要的自行参考
<!-- 上传 -->
<el-upload
multiple
:action="这里写请求的URL"
:before-upload="beforeAvatarUpload"
:file-list="list"
:on-error="handleError"
:on-success="handleAvatarSuccess"
:show-file-list="false"
>
<!-- 上传按钮 -->
<div style="float: left">
<el-button type="primary">导入</el-button>
</div>
</el-upload>
// 上传成功回调
function handleAvatarSuccess(res, file) {
//上传成功后的操作
//比如调接口获取上传文件列表等
接口.then(response => {
list.value = response.data;
});
}
// 上传失败
function handleError(err) {
ElMessage.error("上传文件失败");
}
//可以在上传前校检文字的格式和大小
//比如只能上传excel格式
const fileType = ref(["xls", "xlsx"])
function beforeAvatarUpload(file) {
// 校检文件类型
let fileExtension = "";
if (file.name.lastIndexOf(".") > -1) {
fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);
}
const isTypeOk = fileType.value.some(type => {
if (file.type.indexOf(type) > -1) return true;
if (fileExtension && fileExtension.indexOf(type) > -1) return true;
return false;
});
if (!isTypeOk) {
ElMessage..error(`文件格式不正确, 请上传${fileType.value.join("/")}格式文件!`);
return false;
}
return true;
}