前端常用的上传下载文件的几种方式,直接上传、下载文件,读取.xlsx文件数据,导出.xlsx数据

news/2024/7/7 1:16:11 标签: 前端, 上传, 下载文件, 上传,导出.xlsx

一、通过调用接口下载文件

const onExport = async () => {
  try {
    let res = await axios.request({
      method: 'POST',
      url: '请求地址',
      responseType: 'blob',
      params: { data: null },
      headers: { Authorization: 'Bearer ' + UserModule.token },//看看请求是否需要token
    });

    let reader = new FileReader();
    let data = res.data;
    reader.onload = (e: any) => {
      try {
        let fileName = window.decodeURI(
          decodeURIComponent(decodeURI(res.headers['content-disposition'].split(`''`)[1]))
        );
        let url = window.URL.createObjectURL(new Blob([data], { type: res.headers['content-type'] }));
        let link = document.createElement('a');
        link.style.display = 'none';
        link.href = url;
        link.setAttribute('download', fileName);
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      } catch (e: any) {
        message.error(e);
      }
    };
    reader.readAsText(data);
  } catch (err) {
    message.error('导出失败');
  }
};

二、将数组的对象数据导出到.xlsx文件中

  fnExport() {
    let data = [];
    let temp =    [
      {
        name:'小周',
        sex:'男',
        nation:'汉族'
      },
      {
        name:'小林',
        sex:'女',
        nation:'汉族'
      },
    ]
    temp.forEach((item: models.ExpertEditModel) => {
      data.push({
        姓名: item.name,
        性别: item.sex,
        民族: item.nation,
      });
    });
    const ws = XLSX.utils.json_to_sheet(data);
    // 新建book
    const wb = XLSX.utils.book_new();
    // 生成xlsx文件(book,sheet数据,sheet命名)
    XLSX.utils.book_append_sheet(wb, ws, '数据详情');
    // 写文件(book,xlsx文件名称)
    XLSX.writeFile(wb, '基本信息.xlsx');
  }

三、请求接口上传文件给后端

  async beforeAvatarUpload(file: any, fList: any) {
    if (!file) {
      this.$message.error('请先添加文件');
    } else {
      if (file) {
        try {
          const formData = new FormData();
          formData.append('file', file);
          //await api.Organizations.EduUploadSchool_PostAsync(formData);
          // 发起POST请求
			axios.request({
			  method: 'post',
			  url: 'your_backend_url',
			  data: formData,
			  headers: {
			    'Content-Type': `multipart/form-data; boundary=${formData._boundary}`,
			    // You might need other headers depending on your backend requirements
			  }
			})
          this.$message.success('上传成功');
        } catch (err) {
          this.$message.error('上传失败:' + err.message);
        }
      }
    }
  }

四、读取用户上传的.xlsx文件内容转成数组

html

        <el-upload
            action=""
            accept=".xlsx"
            :before-upload="getExcelFile"
        >
            <el-button size="small" type="primary">点击上传</el-button>
        </el-upload>
        async getExcelFile(file) {
            if (!/\.(xlsx)$/.test(file.name.toLowerCase())) {
                console.log("请上传.xlsx格式的Excel文件");
            } else if (file) {
                try {
                    const res = await this.readExcel(file);//调用解析.xlsx文件方法
                } catch (error) {
                    console.log("上传错误:", error);
                }
            }
        },
        // 解析Excel
        readExcel(file) {
            return new Promise((resolve, reject) => {
                const reader = new FileReader();//创建FileReader对象,您可以将文件内容读取到内存中
                let getExcelList = [];// 用于存储从Excel中提取的数据
                reader.onload = (e) => {
                    try {
                        let data = e.target.result;
                        let workbook = XLSX.read(data, { type: "binary" });
                         // 遍历工作表
                        for (let item in workbook.SheetNames) {
                            let SheetName = workbook.SheetNames[item];
                            let sheetInfos = workbook.Sheets[SheetName];
                            // 将工作表内容转换为JSON格式
                            let excel = XLSX.utils.sheet_to_json(sheetInfos, { raw: true });
                            // 遍历每行数据并将特定字段添加到getExcelList数组中
                            excel.forEach((item) => {
                                getExcelList.push({
                                    name: item.姓名 ?? "",
                                    nation: item.民族 ?? "",
                                    school: item.学校 ?? "",
                                });
                            });
                        }
                        console.log(
                            "%c [ getExcelList ]-53",
                            "font-size:13px; background:pink; color:#bf2c9f;",
                            getExcelList
                        );
                        resolve(getExcelList);// 成功解析并处理Excel文件,返回getExcelList数组
                    } catch (e) {
                        reject(e);
                    }
                };
                // console.log('teacherUploadList', teacherUploadList);
                reader.readAsBinaryString(file);// 以二进制字符串形式读取上传的Excel文件内容,解析成功则调用reader.onload函数
            });
        }

http://www.niftyadmin.cn/n/4936969.html

相关文章

磁粉制动器离合器收放卷应用介绍

张力控制系统的开环闭环应用介绍,请查看下面文章链接: PLC张力控制(开环闭环算法分析)_张力控制plc程序实例_RXXW_Dor的博客-CSDN博客里工业控制张力控制无处不在,也衍生出很多张力控制专用控制器,磁粉制动器等,本篇博客主要讨论PLC的张力控制相关应用和算法,关于绕线…

Python jupyter lab 设置

在下载好jupyter lab 后&#xff0c;需要对其进行设置&#xff0c;尤其是远程服务器的时候&#xff0c;因为根本就是没有屏幕&#xff0c;也没有浏览器。 新建设置文件 jupyter lab --generate-config设置文件内部参数 vim ~/.jupyter/jupyter_lab_config.py进去一通改&#…

【Vue-Router】使用 prams 路由传参失效

报错信息&#xff1a; [Vue Router warn]: Discarded invalid param(s) “name”, “price”, “id” when navigating. list.json {"data": [{"name": "面","price":300,"id": 1},{"name": "水",&quo…

【力扣每日一题】2023.8.12 合并K个升序链表

目录 题目&#xff1a; 示例&#xff1a; 分析&#xff1a; 代码&#xff1a; 题目&#xff1a; 示例&#xff1a; 分析&#xff1a; 题目给我们一个链表数组&#xff0c;数组里的链表都是升序的&#xff0c;让我们合并这些链表&#xff0c;要求合并之后还是升序的。 最简…

Leetcode-每日一题【剑指 Offer 20. 表示数值的字符串】

题目 请实现一个函数用来判断字符串是否表示数值&#xff08;包括整数和小数&#xff09;。 数值&#xff08;按顺序&#xff09;可以分成以下几个部分&#xff1a; 若干空格一个 小数 或者 整数&#xff08;可选&#xff09;一个 e 或 E &#xff0c;后面跟着一个 整数若干空…

线程间的通信(互斥)

互斥&#xff1a;解决程序中临界资源的竞争问题 函数接口说明&#xff1a; pthread_mutex_init&#xff1a;初始化互斥锁 pthread-mutex_lock&#xff1a;申请互斥锁&#xff08;加锁&#xff09; pthread_mutex_unlock&#xff1a;释放互斥锁&#xff08;解锁&#xff09;…

Nodejs 第十章(全局变量)

如何在nodejs定义全局变量呢&#xff1f; 在nodejs中使用global定义全局变量&#xff0c;定义的变量&#xff0c;可以在引入的文件中也可以访问到该变量&#xff0c;例如a.js global.xxx xxx require(xxx.js) xxx.js 也可以访问到该变量&#xff0c;在浏览器中我们定义的全局…

Vue+ElementUI实现选择指定行导出Excel

这里记录一下&#xff0c;今天写项目时 的一个需求&#xff0c;就是通过复选框选中指定行然后导出表格中选中行的Excel表格 然后这里介绍一个工具箱(模板)&#xff1a;vue-element-admin 将它拉取后&#xff0c;运行就可以看到如下界面&#xff1a; 这里面的很多功能都已经实现…