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

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

安装xlsx:

npm install xlsx

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

使用:

    (async () => {
      const json = await xlsxToJson(
        "https://xxxxxxx.xlsx" // ossUrl
      );
      setAuthorDatas([...json]);
    })();

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
React中使用阿里云OSS下载文件,你可以按照以下步骤进行操作: 1. 首先,安装ali-oss库,可以使用npm或者yarn进行安装: ``` npm install ali-oss ``` 2. 在你的React组件中引入ali-oss库: ```jsx import OSS from 'ali-oss'; ``` 3. 创建一个OSS客户端实例,并配置好Access Key和Bucket信息: ```jsx const client = new OSS({ accessKeyId: 'your_access_key_id', accessKeySecret: 'your_access_key_secret', bucket: 'your_bucket_name', region: 'your_bucket_region' }); ``` 确保替换上述代码中的"your_access_key_id","your_access_key_secret","your_bucket_name"和"your_bucket_region"为你自己的实际值。 4. 编写一个下载文件的函数,并调用OSS客户端的get方法来下载文件: ```jsx const downloadFile = async (filename) => { try { const result = await client.get(filename); // 使用result.res.data来获取文件的内容或者进行其他操作 // 例如,你可以创建一个下载链接并触发下载 const downloadLink = URL.createObjectURL(result.res.data); const link = document.createElement('a'); link.href = downloadLink; link.download = filename; link.click(); } catch (error) { console.log('下载文件失败:', error); } }; ``` 在上述代码中,替换"filename"为你要下载的文件名。 5. 最后,在React组件中调用下载文件函数: ```jsx downloadFile('your_filename'); ``` 确保将"your_filename"替换为你实际要下载的文件名。 这样,当你调用downloadFile函数时,它将使用阿里云OSS客户端下载指定文件,并通过创建一个下载链接来触发文件的下载。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值