vue前端----导出导入文件的实现

这里用到了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;
}