Reading .xlsx File from URL in React.js : Comprehensive Guide

In React.js, you can use the xlsx library to read Excel files. To read an Excel file from a URL, you can make use of the axios library to fetch the file and then use xlsx to parse it. Here's an example of how you can achieve this:

Not a Premium Medium member? Click here to access it for free!

First, install the required packages:

npm install axios xlsx

Now, you can create a component or function to read the Excel file from a URL:

import React, { useState } from 'react';
import axios from 'axios';
import * as XLSX from 'xlsx';

function ExcelReader() {
  const [excelData, setExcelData] = useState(null);

  const handleFileRead = (e) => {
    const file = e.target.files[0];
    const reader = new FileReader();

    reader.onload = (event) => {
      const data = new Uint8Array(event.target.result);
      const workbook = XLSX.read(data, { type: 'array' });
      const sheetName = workbook.SheetNames[0];
      const sheet = workbook.Sheets[sheetName];
      const jsonData = XLSX.utils.sheet_to_json(sheet, { header: 1 });

      setExcelData(jsonData);
    };

    reader.readAsArrayBuffer(file);
  };

  const handleFetchFromUrl = async () => {
    try {
      const url = 'YOUR_EXCEL_FILE_URL_HERE';
      const response = await axios.get(url, { responseType: 'arraybuffer' });

      const data = new Uint8Array(response.data);
      const workbook = XLSX.read(data, { type: 'array' });
      const sheetName =…