React|获取oss存储的文件,并转为json格式

使用axios通过oss的url获取.xlsx文件流,处理后得到json格式数据:

安装xlsx:

npm install xlsx

javascript 复制代码
import axios from "axios";
import * as XLSX from "xlsx";

//#region xlsx(oss) to json
async function getFileStream(url) {
  const response = await axios.get(url, { responseType: "blob" });
  return response.data;
}

async function convertFileStreamToWorkbook(fileStream) {
  const reader = new FileReader();
  return new Promise((resolve, reject) => {
    reader.onload = (event) => {
      try {
        const workbook = XLSX.read(event.target.result, { type: "binary" });
        resolve(workbook);
      } catch (error) {
        reject(error);
      }
    };
    reader.onerror = (error) => {
      reject(error);
    };
    reader.readAsBinaryString(fileStream);
  });
}

async function convertWorkbookToJson(workbook) {
  const sheetName = workbook.SheetNames[0]; // 获取第一个工作表的名称
  const worksheet = workbook.Sheets[sheetName]; // 获取第一个工作表对象
  const jsonData = XLSX.utils.sheet_to_json(worksheet); // 将工作表对象转换为JSON对象
  return jsonData;
}

export async function xlsxToJson(OSSUrl) {
  const fileStream = await getFileStream(OSSUrl);
  const workbook = await convertFileStreamToWorkbook(fileStream);
  const jsonData = await convertWorkbookToJson(workbook);
  return jsonData;
}
//#endregion

使用:

javascript 复制代码
    (async () => {
      const json = await xlsxToJson(
        "https://xxxxxxx.xlsx" // ossUrl
      );
      setAuthorDatas([...json]);
    })();
相关推荐
小奶包他干奶奶1 小时前
Webpack学习——Loader(文件转换器)
前端·学习·webpack
zy happy2 小时前
若依 vue3 报错:找不到模块“@/api/xxxx/xxxxx”或其相应的类型声明。。Vue 3 can not find mod
前端·javascript·vue.js
tobebetter95272 小时前
How to manage python versions on windows
开发语言·windows·python
潘小安2 小时前
Git Worktree + Claude Code:让你的开发效率翻倍的秘密武器
前端
meichaoWen2 小时前
【Vue3】vue3的全面学习(一)
前端·javascript·学习
小猪努力学前端3 小时前
在 React + React Router v7 SSR 项目里做多端适配,我踩的两个坑
前端·react.js
9***P3343 小时前
PHP代码覆盖率
开发语言·php·代码覆盖率
q***d1733 小时前
React桌面应用开发
前端·react.js·前端框架
8***29313 小时前
解决 Tomcat 跨域问题 - Tomcat 配置静态文件和 Java Web 服务(Spring MVC Springboot)同时允许跨域
java·前端·spring
0***143 小时前
React计算机视觉应用
前端·react.js·计算机视觉