View & Download 🧮 Excel File in React from a URL

Displaying Excel data in a React application dynamically from a URL is a powerful feature

Prerequisites:

Before we begin, make sure you have the following installed:

• React (Latest version)
• XLSX.js (for parsing Excel files)

Create a new component ExcelView.tsx to fetch and parse the Excel file.

import * as XLSX from 'xlsx';
const ExcelView = () => {
  const excelFile =
    'https://res.cloudinary.com/dt7w8y7xj/image/upload/v1695779773/text_wzqj5r.xlsx';

  const parseExcelFile = () => {
    // Fetch the Excel file from the imported path
    fetch(excelFile)
      .then((response) => response.arrayBuffer()) // Read file as ArrayBuffer
      .then((fileBuffer) => {
        const workbook = XLSX.read(fileBuffer, { type: 'array' });
        const sheetName = workbook.SheetNames[0]; // Get the first sheet
        const sheet = workbook.Sheets[sheetName];
        const data = XLSX.utils.sheet_to_json(sheet); // Convert the sheet to JSON
        return data;
      })
      .catch((error) => console.error('Error parsing Excel file:', error));
  };

  // Parse the file immediately when the component is rendered

  return (
    <div className=" p-2 md:p-6 bg-gray-100 min-h-screen">
      <h1 className="text-3xl font-bold text-gray-700 text-center mb-8">
        View Excel File
      </h1>

      {parseExcelFile().length > 0 ? (
        <div className="overflow-x-auto">
          <table className="min-w-full bg-white border border-gray-300 rounded-lg shadow-md">
            <thead>
              <tr className="bg-gray-200 text-gray-600 uppercase text-sm leading-normal">
                {Object.keys(parseExcelFile()[0]).map((key) => (
                  <th key={key} className="py-3 px-6 text-left">
                    {key}
                  </th>
                ))}
              </tr>
            </thead>
            <tbody className="text-gray-700 text-sm">
              {parseExcelFile().map((row, index) => (
                <tr
                  key={index}
                  className={`border-b border-gray-300 ${
                    index % 2 === 0 ? 'bg-gray-50' : 'bg-white'
                  }`}
                >
                  {Object.values(row).map((cell, i) => (
                    <td key={i} className="py-3 px-6 text-left">
                      {cell}
                    </td>
                  ))}
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      ) : (
        <p className="text-gray-500 text-center mt-8">Loading Excel data...</p>
      )}
    </div>
  );
};

export default ExcelView;

Download an Excel File in React with Proper MIME Types

const handleDownload = async (url: string, filename: string) => {
  try {
    if (!url) {
      message.error('Download URL not found');
      return;
    }

    const response = await fetch(url, {
      headers: {
        Accept: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/pdf, video/mp4',
      },
    });

    if (!response.ok) {
      throw new Error('Download failed');
    }

    const contentType = response.headers.get('content-type');
    const blob = await response.blob();

    // Set the correct MIME type for Excel files
    const blobOptions = {
      type:
        contentType ||
        (filename.endsWith('.xlsx')
          ? 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
          : blob.type),
    };
    const downloadUrl = window.URL.createObjectURL(new Blob([blob], blobOptions));

    const link = document.createElement('a');
    link.href = downloadUrl;
    link.download = filename;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);

    // Clean up the URL object
    window.URL.revokeObjectURL(downloadUrl);
    message.success('Download started successfully');
  } catch (error) {
    console.error('Error downloading file:', error);
    message.error('Failed to download file. Please try again.');
  }
};

Now use it in your component

<button onClick={() => handleDownload('https://example.com/sample.xlsx', 'sample.xlsx')}>
  Download Excel File
</button>

Conclusion:

This approach allows you to dynamically load and display Excel data in a React app using XLSX.js and downloaded correctly in a React application