Drawing a single chart type per figure is Excel's default behaviour, not a rule anyone has to keep. A report usually has more than one thing to say, and each reading has a shape that suits it: height suits columns, movement suits a line, a running total suits an area. A custom (combination) chart exists for exactly this: within one chart, each series can be given a chart type of its own, and which types are put together is decided by the questions the figure has to answer side by side -- there is no fixed pairing. Columns with a line is the pairing most widely used in practice, because it accommodates both readings at once. The example below takes that pair, drawing sales as columns and the target as a line, so that what the reader compares is the line's position against the column tops. Two separate charts would need their category axes aligned first, before any comparison could be made; one chart, with a category axis the series share, keeps the months strictly aligned. A report also often holds a series that cannot be brought into the main data range, and such a series has to be added by hand. Spire.XLS for JavaScript performs all of this in the browser on top of WebAssembly, managing input and output files through a virtual file system (VFS), with no backend service required.

This article covers two key features:

• Combine a column chart with a line chart
• Add a series by hand

For installation and project setup, see Integrating Spire.XLS for JavaScript in a React Project. The examples below assume Spire.XLS is installed and the WebAssembly module has been initialised.

Combine a column chart with a line chart

A pairing is not fixed: which types share one figure depends on which questions have to be answered side by side, and columns with a line is only the most widely used of them. In this example sales are best expressed as columns, where heights are compared at a glance, and the target is best expressed as a line, where what the reader compares is its position against the column tops. Once the two series have a type each, one figure carries both readings, and the category axis they share keeps the months strictly aligned, so no comparison across two figures is needed. Substituting clustered bars with a line, or columns with an area, works the same way. The steps are:

1. Load the font and the test data file into the VFS.
2. Load the workbook with workbook.LoadFromFile and take the first worksheet.
3. Add a chart with sheet.Charts.Add() and point chart.DataRange at A1:C7: the first row supplies the series names, the first column the category labels, and the next two columns become one series each.
4. Set chart.SeriesDataFromRange to false so that each series keeps the values bound to it.
5. Place the chart on the sheet with chart.LeftColumn, chart.TopRow, chart.RightColumn and chart.BottomRow.
6. Give chart.Series.get(0).SerieType and chart.Series.get(1).SerieType the values ExcelChartType.ColumnClustered and ExcelChartType.Line. Every series names its own type this way, so which types go together is yours to choose.
7. Set the title with chart.ChartTitle, then save the workbook with workbook.SaveToFile.

The complete code example below shows how to combine a column chart with a line chart in React:

function App() {
  const combineColumnAndLine = async () => {
    // get the Spire.XLS WASM module
    const xlsModule = window.wasmModule?.spirexls;

    // check that the module is ready
    if (!xlsModule) {
      alert('Spire.Xls is not ready yet');
      return;
    }

    // load the font and the test data file into the VFS
    await window.spire.FetchFileToVFS('ARIAL.TTF', '/Library/Fonts/', `${process.env.PUBLIC_URL}/font/`);
    const inputFileName = 'SalesReport.xlsx';
    await window.spire.FetchFileToVFS(inputFileName, '', `${process.env.PUBLIC_URL}data/`);

    // load the workbook
    const workbook = new xlsModule.Workbook();
    workbook.LoadFromFile({ fileName: inputFileName });

    // take the first worksheet
    const sheet = workbook.Worksheets.get(0);

    // add a chart and bind its data range to A1:C7: the first column becomes the category labels, the next two become one series each
    const chart = sheet.Charts.Add();
    chart.DataRange = sheet.Range.get('A1:C7');
    chart.SeriesDataFromRange = false;

    // place the chart
    chart.LeftColumn = 1;
    chart.TopRow = 10;
    chart.RightColumn = 9;
    chart.BottomRow = 26;

    // give the two series a chart type each: sales drawn as columns, target sales drawn as a line
    chart.Series.get(0).SerieType = xlsModule.ExcelChartType.ColumnClustered;
    chart.Series.get(1).SerieType = xlsModule.ExcelChartType.Line;

    chart.ChartTitle = 'Sales and Target Sales';

    // save the workbook
    const outputFileName = 'CombineColumnAndLine.xlsx';
    workbook.SaveToFile({ fileName: outputFileName });

    // dispose of the workbook to free resources
    workbook.Dispose();

    // read the result file from the VFS and start the download
    const fileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
    const blob = new Blob([fileArray], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = outputFileName;
    a.click();
    URL.revokeObjectURL(url);
  };

  return (
    <div style={{ textAlign: 'center', height: '300px' }}>
      <h1>Create a Custom (Combination) Chart</h1>
      <button id="combine-column-and-line" onClick={combineColumnAndLine}>Combine a column chart with a line chart</button>
    </div>
  );
}

export default App;

After running, the effect of combining a column chart with a line chart:

Add a series by hand

DataRange can only ever be one continuous rectangle, and that is a hard limit on how data gets bound. Reports commonly present two such cases: the main data occupies columns A to C while the reference values start a column further along, with an empty column in between; or the values to be plotted are derived by calculation and occupy no cell at all. Neither case can be bound in a single call, so the chart has to be built series by series instead. A hand-added series does not depend on DataRange: its range can point anywhere, and it still takes a chart type of its own, so the rules of a combination chart apply to it in full. Here last year's sales are added as a second column series, paired alongside the current year, with the target line running across both. The steps are:

1. Load the font and the test data file into the VFS, load the workbook and take the first worksheet.
2. Add a chart with sheet.Charts.Add() and point chart.DataRange at the main block alone, A1:C7.
3. Give the two series of that block ExcelChartType.ColumnClustered and ExcelChartType.Line.
4. Add a series with chart.Series.Add({ name, serieType }), which takes the series name and its chart type in one call.
5. Bind the category labels and the values with series.CategoryLabels and series.Values, each pointing at the range the data actually occupies.
6. Set the title with chart.ChartTitle, then save the workbook with workbook.SaveToFile.

The complete code example below shows how to add a series by hand in React:

function App() {
  const addSeriesManually = async () => {
    // get the Spire.XLS WASM module
    const xlsModule = window.wasmModule?.spirexls;

    // check that the module is ready
    if (!xlsModule) {
      alert('Spire.Xls is not ready yet');
      return;
    }

    // load the font and the test data file into the VFS
    await window.spire.FetchFileToVFS('ARIAL.TTF', '/Library/Fonts/', `${process.env.PUBLIC_URL}/font/`);
    const inputFileName = 'SalesReport.xlsx';
    await window.spire.FetchFileToVFS(inputFileName, '', `${process.env.PUBLIC_URL}data/`);

    // load the workbook
    const workbook = new xlsModule.Workbook();
    workbook.LoadFromFile({ fileName: inputFileName });

    // take the first worksheet
    const sheet = workbook.Worksheets.get(0);

    // add a chart and bind its data range to the main block, A1:C7
    const chart = sheet.Charts.Add();
    chart.DataRange = sheet.Range.get('A1:C7');
    chart.SeriesDataFromRange = false;

    // place the chart
    chart.LeftColumn = 1;
    chart.TopRow = 10;
    chart.RightColumn = 9;
    chart.BottomRow = 26;

    // the two series of the main block: sales as columns, target sales as a line
    chart.Series.get(0).SerieType = xlsModule.ExcelChartType.ColumnClustered;
    chart.Series.get(1).SerieType = xlsModule.ExcelChartType.Line;

    // last year's figures sit in column E, one empty column away from the main block, so they cannot come along with the data range; add a series by hand instead.
    // a hand-added series takes a chart type of its own too; here it is drawn as columns alongside sales
    const lastYear = chart.Series.Add({ name: 'Last Year Sales (K)', serieType: xlsModule.ExcelChartType.ColumnClustered });
    lastYear.CategoryLabels = sheet.Range.get('A2:A7');
    lastYear.Values = sheet.Range.get('E2:E7');

    chart.ChartTitle = 'Sales, Target Sales and Last Year Sales';

    // save the workbook
    const outputFileName = 'AddSeriesManually.xlsx';
    workbook.SaveToFile({ fileName: outputFileName });

    // dispose of the workbook to free resources
    workbook.Dispose();

    // read the result file from the VFS and start the download
    const fileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
    const blob = new Blob([fileArray], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = outputFileName;
    a.click();
    URL.revokeObjectURL(url);
  };

  return (
    <div style={{ textAlign: 'center', height: '300px' }}>
      <h1>Create a Custom (Combination) Chart</h1>
      <button id="add-series-manually" onClick={addSeriesManually}>Add a series by hand</button>
    </div>
  );
}

export default App;

After running, the effect of adding a series by hand:

FAQ

Can a hand-added series be used alongside DataRange?

Cause: Yes, and the two do not interfere. DataRange produces only the series that correspond to the columns of the main block; a hand-added series carries its own Values and CategoryLabels, which are unrelated to the range DataRange covers and need not lie within the same rectangle. In the second example above the chart holds both series of the main block and the hand-added last-year series at once.

Solution: Point DataRange at the main block, then add each extra series with chart.Series.Add({ name, serieType }). Note that a hand-added series does not inherit the category labels of the main block: CategoryLabels has to be assigned explicitly, and if it is pointed at the same column the series share one category axis.

// the two series of the main block come from DataRange; the hand-added one is bound separately
chart.DataRange = sheet.Range.get('A1:C7');

const lastYear = chart.Series.Add({ name: 'Last Year Sales (K)', serieType: xlsModule.ExcelChartType.ColumnClustered });
lastYear.CategoryLabels = sheet.Range.get('A2:A7');
lastYear.Values = sheet.Range.get('E2:E7');

What type does a series added without serieType get?

Cause: It takes the chart's own type. sheet.Charts.Add() is called with no arguments in the example, and the chart it builds defaults to ExcelChartType.ColumnClustered, which is the type a new series keeps as well.

Solution: For a new series to join a combination chart, name its type at the call, or change SerieType after adding it:

// named at the call
const serie = chart.Series.Add({ name: 'Last Year Sales (K)', serieType: xlsModule.ExcelChartType.ColumnClustered });

// or changed after adding
serie.SerieType = xlsModule.ExcelChartType.Line;

Get a Free License

Spire.XLS for JavaScript offers a 30-day full-featured free trial license with no functional limitations. Apply here to evaluate before purchasing.

ET is WPS Office's workbook format, and its files carry the .et extension. When workbooks are exchanged between office suites, format compatibility decides whether a file can be opened directly. Spire.XLS for JavaScript converts between Excel and ET both ways in the browser on WebAssembly, keeping the formulas, the merged areas and the number formats of the workbook, and handling input and output files through a virtual file system (VFS) with no backend service.

This article covers two core feature points:

• Convert Excel to ET
• Convert ET to Excel

For installation and project setup, see Integrating Spire.XLS for JavaScript in a React Project. The examples below assume Spire.XLS is installed and the WebAssembly module has been initialised.

Convert Excel to ET

Saving an Excel workbook as ET makes the workbook open directly in WPS. The conversion changes only the format the file is saved in: the content of the workbook is unchanged, the target format is named by a fileFormat argument on the way out, and the formulas, the merged areas and the number formats of the cells are all kept. The steps are:

1. Load the font and the test data file into the VFS.
2. Load the Excel workbook with workbook.LoadFromFile.
3. Save the workbook with workbook.SaveToFile, naming xlsModule.FileFormat.ET as the fileFormat.
4. Dispose of the workbook with workbook.Dispose to free resources.

The complete code example below shows how to convert an Excel workbook to ET in React:

function App() {
  const excelToEt = async () => {
    // get the Spire.XLS WASM module
    const xlsModule = window.wasmModule?.spirexls;

    // check that the module is ready
    if (!xlsModule) {
      alert('Spire.Xls is not ready yet');
      return;
    }

    // load the font and the test data file into the VFS
    await window.spire.FetchFileToVFS('ARIAL.TTF', '/Library/Fonts/', `${process.env.PUBLIC_URL}/font/`);
    const inputFileName = 'ProductList.xlsx';
    await window.spire.FetchFileToVFS(inputFileName, '', `${process.env.PUBLIC_URL}data/`);

    // load the workbook
    const workbook = new xlsModule.Workbook();
    workbook.LoadFromFile({ fileName: inputFileName });

    // save as ET; the format is named by fileFormat
    const outputFileName = 'ExcelToEt.et';
    workbook.SaveToFile({ fileName: outputFileName, fileFormat: xlsModule.FileFormat.ET });

    // dispose of the workbook to free resources
    workbook.Dispose();

    // read the result file from the VFS and start the download
    const fileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
    const blob = new Blob([fileArray], { type: 'application/vnd.wps-office.et' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = outputFileName;
    a.click();
    URL.revokeObjectURL(url);
  };

  return (
    <div style={{ textAlign: 'center', height: '300px' }}>
      <h1>Convert Between Excel and ET in React</h1>
      <button id="excel-to-et" onClick={excelToEt}>Convert Excel to ET</button>
    </div>
  );
}

export default App;

After running, the effect of converting an Excel workbook to an ET file:

Convert ET to Excel

Converting an ET file to Excel is the same operation in the other direction. ET and Excel hold the same workbook content and differ only in the file format, so loading the ET and writing it out as an Excel version is all it takes. The steps are:

1. Load the font and the test data file into the VFS.
2. Load the ET file with workbook.LoadFromFile.
3. Save it as an Excel workbook with workbook.SaveToFile, naming xlsModule.FileFormat.Version2010 as the fileFormat.
4. Dispose of the workbook with workbook.Dispose to free resources.

The complete code example below shows how to convert an ET file back to Excel in React:

function App() {
  const etToExcel = async () => {
    // get the Spire.XLS WASM module
    const xlsModule = window.wasmModule?.spirexls;

    // check that the module is ready
    if (!xlsModule) {
      alert('Spire.Xls is not ready yet');
      return;
    }

    // load the font and the test data file into the VFS
    await window.spire.FetchFileToVFS('ARIAL.TTF', '/Library/Fonts/', `${process.env.PUBLIC_URL}/font/`);
    const inputFileName = 'ProductList.et';
    await window.spire.FetchFileToVFS(inputFileName, '', `${process.env.PUBLIC_URL}data/`);

    // load the workbook
    const workbook = new xlsModule.Workbook();
    workbook.LoadFromFile({ fileName: inputFileName });

    // save as Excel, again naming the version through fileFormat
    const outputFileName = 'EtToExcel.xlsx';
    workbook.SaveToFile({ fileName: outputFileName, fileFormat: xlsModule.FileFormat.Version2010 });

    // dispose of the workbook to free resources
    workbook.Dispose();

    // read the result file from the VFS and start the download
    const fileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
    const blob = new Blob([fileArray], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = outputFileName;
    a.click();
    URL.revokeObjectURL(url);
  };

  return (
    <div style={{ textAlign: 'center', height: '300px' }}>
      <h1>Convert Between Excel and ET in React</h1>
      <button id="et-to-excel" onClick={etToExcel}>Convert ET to Excel</button>
    </div>
  );
}

export default App;

After running, the effect of converting an ET file back to an Excel workbook:

FAQ

Can a file be saved as ET by naming it .et and leaving fileFormat out?

Cause: fileFormat is an optional argument of SaveToFile. When it is not passed, the format is taken from the extension of the output file name, so a name the library recognises determines the format.

Solution: Leaving it out works. Saving a .xlsx with workbook.SaveToFile({ fileName: 'ProductList.et' }) writes an ET file all the same. Writing fileFormat out is still the clearer of the two, and it keeps the output from landing in some other format when the name carries no extension or the wrong one.

Do the formulas in the workbook turn into fixed values after converting to ET?

Cause: ET and Excel carry the same workbook object, and the conversion only changes the format; nothing goes near the contents of the cells.

Solution: The formulas are kept as they are. In this example, reading the ET file that was written back in, the amount cell still has HasFormula set to true, its Formula is still =C3*D3, and FormulaNumberValue gives 58880 as the result; the merged area is still five columns wide, and the #,##0.00 number format is still in place. Formulas, formatting and layout survive the conversion in both directions.

Get a Free License

Spire.XLS for JavaScript offers a 30-day full-featured free trial license with no functional limitations. Apply here to evaluate before purchasing.

JSON is widely used to exchange data between web applications and APIs, but it is not always the most convenient format for reviewing or sharing records. Exporting JSON to Excel turns that data into a worksheet that users can sort, edit, and use in reports.

This tutorial explains how to convert JSON to Excel in a React application using JavaScript and Spire.XLS for JavaScript. It covers both a simple array of employee records and nested JSON that must be flattened before export. You will also learn how to preserve basic data types, format the worksheet, and download the resulting XLSX file in the browser.

Table of Contents:

• Set Up Spire.XLS for JavaScript in React
• Convert a Simple JSON Array to Excel in React
• Convert Nested JSON to Excel in React
• Common Issues and Solutions
• FAQs
• Conclusion

1. Set Up Spire.XLS for JavaScript in React

Spire.XLS for JavaScript provides APIs for creating workbooks, writing cell values, applying styles, and saving Excel files. In this workflow, JavaScript parses and prepares the JSON data, while Spire.XLS builds the Excel workbook.

In your React project, install the package:

npm i spire.office

Copy the corresponding runtime files from the package into your project's public folder: spire.xls.js, Spire.Xls.Wasm.zip, spire.common.js, Spire.Common.Wasm.zip, and the _framework folder. Keep these files from the same package version. For detailed setup instructions, see How to Integrate Spire.XLS for JavaScript in a React Project.

Place the JSON input files in public as well. The examples below use employees.json and employees_nested.json.

The React component loads spire.xls.js inside useEffect() and keeps the initialized module in state. The conversion button remains disabled until initialization completes.

Project configuration: These examples follow the process.env.PUBLIC_URL and webpack-based loading convention in the supplied React component. If your project uses Vite or another build tool, adapt the public asset URL and dynamic import configuration to that environment.

2. Convert a Simple JSON Array to Excel in React

A flat array of objects maps naturally to a worksheet: property names become column headers, and each object becomes one data row.

Prepare the JSON File

Save the following content as public/employees.json:

[
  {
    "employee_id": "E001",
    "name": "Jane Doe",
    "department": "HR",
    "salary": 85000.5,
    "active": true,
    "hire_date": "2022-03-15"
  },
  {
    "employee_id": "E002",
    "name": "Michael Smith",
    "department": "IT",
    "salary": 96000,
    "active": true,
    "hire_date": "2021-07-01"
  },
  {
    "employee_id": "E003",
    "name": "Sara Lin",
    "department": "Finance",
    "salary": 92000.75,
    "active": false,
    "hire_date": "2023-01-12"
  },
  {
    "employee_id": "E004",
    "name": "李伟",
    "department": "Operations",
    "salary": 81500,
    "active": true,
    "hire_date": "2020-11-30"
  },
  {
    "employee_id": "E005",
    "name": "Anna Petrova",
    "department": "Marketing",
    "salary": 78000,
    "active": true,
    "hire_date": "2019-08-19"
  },
  {
    "employee_id": "E006",
    "name": "David Chen",
    "department": null,
    "salary": 0,
    "active": false
  }
]

This example includes strings, numbers, Boolean values, Chinese characters, a null value, and a missing property. These cases illustrate how the export handles different values without losing zero or false.

Convert JSON to Excel

The conversion follows these steps:

1. Load the JSON file into the virtual file system (VFS), decode its UTF-8 content, and parse it with JSON.parse().
2. Create a workbook, remove its default worksheets, and add an Employees worksheet.
3. Write the first object's keys into the header row.
4. Write each record to a new row, using NumberValue, BooleanValue, or Text according to the JavaScript value type.
5. Style the headers, estimate column widths from the content, and add thin borders.
6. Save the workbook to the VFS, read the generated bytes, and download them as an XLSX file.

Complete React Example

Replace the contents of App.js with the following component:

import React, { useState, useEffect } from 'react';

function App() {
  const [wasmModule, setWasmModule] = useState(null);

  // Load Spire.XLS
  useEffect(() => {
    (async () => {
      try {
        const publicUrl = process.env.PUBLIC_URL || '';
        const spireModule = await import(/* webpackIgnore: true */ `${publicUrl}/spire.xls.js`);
        const rawModule = spireModule.default || spireModule;
        window.wasmModule = typeof rawModule === 'function'
          ? await rawModule({ locateFile: p => p.endsWith('.wasm') ? `${publicUrl}/${p}` : p })
          : rawModule;
        setWasmModule(window.wasmModule);
      } catch (error) {
        console.error('Failed to load spire.xls.js WASM module:', error);
      }
    })();
  }, []);

  // Convert JSON data to an Excel file
  const JsonToExcel = async () => {
    const spirexls = wasmModule?.spirexls;
    if (!spirexls) {
      console.error('Spire.XLS is not initialized.');
      return;
    }

    let workbook;

    try {
      // 1. Load the JSON file into the Virtual File System (VFS)
      const inputFileName = 'employees.json';
      const inputVfsPath = await window.spire.FetchFileToVFS(
        inputFileName,
        '/',
        `${process.env.PUBLIC_URL || ''}/`
      );

      // 2. Read it back as UTF-8 text and parse it into JS objects
      const jsonBytes = window.dotnetRuntime.Module.FS.readFile(inputVfsPath);
      const jsonText = new TextDecoder('utf-8').decode(jsonBytes);
      const data = JSON.parse(jsonText);

      // Guard against empty / invalid input
      if (!Array.isArray(data) || data.length === 0) {
        throw new Error('JSON must be a non-empty array of objects.');
      }

      // 3. Create a new workbook and worksheet
      workbook = new spirexls.Workbook();
      workbook.Worksheets.Clear();
      const sheet = workbook.Worksheets.Add('Employees');

      // 4. Write headers (row 1) from the keys of the first record
      const headers = Object.keys(data[0]);
      headers.forEach((header, col) => {
        const cell = sheet.get(1, col + 1); // 1-based
        cell.Text = header;
        cell.Style.Font.IsBold = true;
        cell.Style.Font.Size = 12;
        cell.Style.Font.Color = spirexls.Color.get_White();
        cell.Style.Color = spirexls.Color.get_DarkBlue();
      });

      // 5. Write data rows (from row 2), keeping the correct cell types
      data.forEach((record, rowIdx) => {
        headers.forEach((key, colIdx) => {
          const cell = sheet.get(rowIdx + 2, colIdx + 1);
          const value = record[key];
          if (typeof value === 'number') {
            cell.NumberValue = value;
          } else if (typeof value === 'boolean') {
            cell.BooleanValue = value;
          } else {
            cell.Text = value == null ? '' : String(value);
          }
        });
      });

      // 6. Set column widths explicitly
      const widths = headers.map((header) => {
        let maxLen = header.length;
        data.forEach(record => {
          const v = record[header];
          maxLen = Math.max(maxLen, v == null ? 0 : String(v).length);
        });
        return Math.min(Math.max(maxLen + 4, 10), 40);
      });
      const columns = sheet.Columns;
      widths.forEach((w, i) => { columns[i].ColumnWidth = w; }); // 0-based

      // 7. Add thin borders to the used range
      const usedRange = sheet.get(1, 1, data.length + 1, headers.length);
      usedRange.Borders.LineStyle = spirexls.LineStyleType.Thin;
      usedRange.Borders.Color = spirexls.Color.get_LightSteelBlue();

      // 8. Save the workbook to the VFS
      const outputFileName = 'employees.xlsx';
      workbook.SaveToFile({
        fileName: outputFileName,
        version: spirexls.ExcelVersion.Version2016
      });

      // 9. Read the saved file, convert to a Blob and trigger download
      const modifiedFileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
      const modifiedFile = new Blob([modifiedFileArray], {
        type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
      });
      const url = URL.createObjectURL(modifiedFile);
      const a = document.createElement('a');
      a.href = url;
      a.download = outputFileName;
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
      URL.revokeObjectURL(url);

    } catch (error) {
      console.error('Failed to convert JSON to Excel:', error);
    } finally {
      // Clean up resources even when conversion fails part-way through.
      try {
        workbook?.Dispose();
      } catch (cleanupError) {
        console.warn('Failed to dispose workbook:', cleanupError);
      }
    }
  };

  return (
    <div style={{ textAlign: 'center', height: '300px' }}>
      <h1>Convert JSON to Excel Using JavaScript in React</h1>
      <button onClick={JsonToExcel} disabled={!wasmModule}>
        Convert
      </button>
    </div>
  );
}

export default App;

The code uses 1-based row and column indexes for sheet.get(), while the sheet.Columns collection is accessed with a 0-based index. Column widths are estimated from string length and capped at 40; this is a simple sizing rule rather than an exact measurement of rendered text.

Output:

The screenshot below shows the generated employees.xlsx file, with a styled header row and six employee records. Numbers and Boolean values retain their cell types, Chinese characters are preserved, and null or missing values appear as blank cells. Date strings remain in their original YYYY-MM-DD text format.

JSON has no native date type, and this code does not convert date strings into Excel dates. Also, the headers come from the first record: properties found only in later records are not included. The next example collects fields across all records to address that limitation.

3. Convert Nested JSON to Excel in React

Nested objects do not map directly to individual worksheet cells. Before exporting them, flatten their properties into a single level and decide how arrays should appear in the worksheet.

For this example, nested object paths become dot-separated column names, and arrays of simple values become comma-separated text. Each employee remains on one row.

Prepare a Nested JSON Example

Save the following content as public/employees_nested.json:

[
  {
    "employee_id": "E001",
    "name": "Jane Doe",
    "salary": 85000.5,
    "active": true,
    "address": {
      "city": "Seattle",
      "country": "USA"
    },
    "skills": ["Recruitment", "Training"]
  },
  {
    "employee_id": "E002",
    "name": "Michael Smith",
    "salary": 96000,
    "active": true,
    "address": {
      "city": "London",
      "country": "UK",
      "postal_code": "SW1A 1AA"
    },
    "skills": ["JavaScript", "React"]
  },
  {
    "employee_id": "E004",
    "name": "李伟",
    "salary": 81500,
    "active": false,
    "address": {
      "city": "Shanghai",
      "country": "China"
    },
    "skills": []
  }
]

The postal_code property appears only in the second employee's address. The export must therefore gather the column names from all flattened records, rather than using only the first one.

Flatten Nested Objects and Handle Arrays

Add these helper functions above function App() in the existing App.js file:

function isRecord(value) {
  return value !== null && typeof value === 'object' && !Array.isArray(value);
}

function flattenRecord(record) {
  // A null-prototype object safely holds arbitrary JSON property names.
  const result = Object.create(null);

  const visit = (value, path) => {
    if (Array.isArray(value)) {
      const containsComplexValues = value.some(
        item => item !== null && typeof item === 'object'
      );

      // Preserve complex arrays as JSON text; join simple arrays for readability.
      result[path] = containsComplexValues
        ? JSON.stringify(value)
        : value.map(item => item == null ? '' : String(item)).join(', ');
    } else if (isRecord(value)) {
      const entries = Object.entries(value);
      if (entries.length === 0 && path) {
        result[path] = '';
      } else {
        entries.forEach(([key, child]) => {
          visit(child, path ? `${path}.${key}` : key);
        });
      }
    } else {
      result[path] = value;
    }
  };

  visit(record, '');
  return result;
}

For the first employee, the resulting object is equivalent to:

{
  "employee_id": "E001",
  "name": "Jane Doe",
  "salary": 85000.5,
  "active": true,
  "address.city": "Seattle",
  "address.country": "USA",
  "skills": "Recruitment, Training"
}

Numbers and Boolean values remain unchanged outside arrays. Empty arrays become empty text. If an array contains objects or other arrays, the helper stores it as JSON text instead of producing an unhelpful [object Object] string.

This dot-separated naming convention assumes that the original property names do not contain dots. If your data includes literal keys such as "address.city", use an escaped path convention or an explicit column mapping to avoid collisions. Array-to-text conversion is intended for readable export, not lossless reconstruction of the original JSON.

Export the Flattened Data to Excel

Keep the module initialization and component layout from the simple example. Replace its JsonToExcel handler with the following handler. It loads the nested JSON file, flattens each record, collects every available field, and exports the resulting table:

const JsonToExcel = async () => {
  const spirexls = wasmModule?.spirexls;
  if (!spirexls) {
    console.error('Spire.XLS is not initialized.');
    return;
  }

  let workbook;

  try {
    // 1. Load and parse the nested JSON file
    const inputVfsPath = await window.spire.FetchFileToVFS(
      'employees_nested.json',
      '/',
      `${process.env.PUBLIC_URL || ''}/`
    );
    const bytes = window.dotnetRuntime.Module.FS.readFile(inputVfsPath);
    const data = JSON.parse(new TextDecoder('utf-8').decode(bytes));

    if (!Array.isArray(data) || data.length === 0 || !data.every(isRecord)) {
      throw new Error('JSON must be a non-empty array of objects.');
    }

    // 2. Flatten records and collect fields from every record
    const flatData = data.map(flattenRecord);
    const headers = [...new Set(flatData.flatMap(record => Object.keys(record)))];
    if (headers.length === 0) {
      throw new Error('JSON records contain no exportable fields.');
    }

    // 3. Create a workbook and worksheet
    workbook = new spirexls.Workbook();
    workbook.Worksheets.Clear();
    const sheet = workbook.Worksheets.Add('Employees');

    // 4. Write and style the headers
    headers.forEach((header, col) => {
      const cell = sheet.get(1, col + 1);
      cell.Text = header;
      cell.Style.Font.IsBold = true;
      cell.Style.Font.Size = 12;
      cell.Style.Font.Color = spirexls.Color.get_White();
      cell.Style.Color = spirexls.Color.get_DarkBlue();
    });

    // 5. Write flattened values, preserving scalar types
    flatData.forEach((record, row) => {
      headers.forEach((key, col) => {
        const cell = sheet.get(row + 2, col + 1);
        const value = record[key];
        if (typeof value === 'number') {
          cell.NumberValue = value;
        } else if (typeof value === 'boolean') {
          cell.BooleanValue = value;
        } else {
          cell.Text = value == null ? '' : String(value);
        }
      });
    });

    // 6. Estimate column widths and add borders
    const columns = sheet.Columns;
    headers.forEach((header, col) => {
      let maxLen = header.length;
      flatData.forEach(record => {
        const value = record[header];
        maxLen = Math.max(maxLen, value == null ? 0 : String(value).length);
      });
      columns[col].ColumnWidth = Math.min(Math.max(maxLen + 4, 10), 40);
    });

    const usedRange = sheet.get(1, 1, flatData.length + 1, headers.length);
    usedRange.Borders.LineStyle = spirexls.LineStyleType.Thin;
    usedRange.Borders.Color = spirexls.Color.get_LightSteelBlue();

    // 7. Save and download the workbook
    const outputFileName = 'employees_nested.xlsx';
    workbook.SaveToFile({
      fileName: outputFileName,
      version: spirexls.ExcelVersion.Version2016
    });

    const outputBytes = window.dotnetRuntime.Module.FS.readFile(outputFileName);
    const blob = new Blob([outputBytes], {
      type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
    });
    const url = URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = url;
    link.download = outputFileName;
    document.body.appendChild(link);
    link.click();
    link.remove();
    URL.revokeObjectURL(url);

  } catch (error) {
    console.error('Failed to convert nested JSON to Excel:', error);
  } finally {
    try {
      workbook?.Dispose();
    } catch (cleanupError) {
      console.warn('Failed to dispose workbook:', cleanupError);
    }
  }
};

Output:

The generated worksheet includes address.city, address.country, and address.postal_code as separate columns. Skills appear as readable text in one cell, and employees without a postal code have an empty cell in that column. Header order follows the first appearance of each field across the records.

For arrays of objects that need to be analyzed as individual items, a separate worksheet or an explicitly defined one-to-many row expansion is usually more useful than storing JSON text. That approach requires deciding which parent fields to repeat and how related records should be linked.

4. Common Issues and Solutions

The simple example validates that the input is a non-empty array but does not verify each member's type. For less predictable input, use the stronger data.every(isRecord) validation from the nested example and reject records with no usable fields.

5. FAQs

Can I convert JSON from an API response to Excel?

Yes. Use fetch() and response.json() to obtain the data, then pass the resulting array through the same worksheet-writing process. If the response has a wrapper such as { "employees": [...] }, select responseData.employees first. Loading a static JSON file into the VFS is not necessary when the data is already available as JavaScript objects.

How do I handle records with different fields?

Build the column list from every record's keys. The nested example uses Set to collect unique field names in their first-seen order. When a record does not contain a column's field, the code writes empty text to that cell.

How can I export nested objects and arrays?

Flatten nested objects into path-based columns, such as address.city. For simple arrays, joining values into one cell keeps each parent record on one row. Arrays of objects can be stored as JSON text, expanded into multiple rows, or exported to a separate worksheet, depending on how users need to work with the data.

Are numbers and Boolean values preserved in Excel?

Yes. These examples assign JavaScript numbers to NumberValue and Boolean values to BooleanValue. Strings remain text, including numeric-looking identifiers and date strings. The null check uses value == null, so valid values such as 0 and false are not replaced with blanks.

6. Conclusion

Converting JSON to Excel in React involves preparing the data, writing it to a worksheet, and downloading the generated workbook. Flat JSON arrays can be exported directly, while nested data needs a defined flattening strategy. With type-aware cell assignments and consistent field collection, both workflows produce readable Excel files for sharing and further analysis.

The number of atoms in a chemical formula, the exponent in a mathematical expression, the square or cube on a unit symbol, the charge at the end of an ion — these characters are set one size smaller and shifted off the baseline, and that is how readers expect to find them. Typed at the same size as the surrounding text, they have to be inferred from context. Excel rich text lets individual characters inside a single cell carry their own formatting, and superscript and subscript are the two forms used most often. Spire.XLS for JavaScript performs this directly in the browser through WebAssembly, managing input and output files with a virtual file system (VFS) and requiring no backend service.

This article covers two key features:

• Set the Subscript of Text
• Set the Superscript of Text

For installation and project setup, see Integrating Spire.XLS for JavaScript in a React Project. The examples below assume Spire.XLS is already installed and the WebAssembly module has been initialized.

Set the Subscript of Text

Superscript and subscript are not whole-cell font properties: RichText.SetFont applies a font to a slice of the text inside a cell rather than to the cell as a whole. Three things have to line up — write the text as a rich-text run, prepare a font that carries the shift, then apply that font to the character range that should move. The steps are as follows:

1. Load the font into the VFS.
2. Create a workbook and get the first worksheet.
3. Write the sample labels, then the chemical formulas with RichText.Text.
4. Create a font object with workbook.CreateFont() and set IsSubscript to true.
5. Apply the font to the digits with RichText.SetFont(startIndex, endIndex, font), then save the workbook.

Here is a complete code example that sets the subscript of cell text in React:

function App() {
  const setSubscript = async () => {
    // Get the Spire.XLS WASM module
    const xlsModule = window.wasmModule?.spirexls;

    // Check if the module is ready
    if (!xlsModule) {
      alert('Spire.Xls is not ready yet');
      return;
    }

    // Load the font into the VFS
    await window.spire.FetchFileToVFS('ARIAL.TTF', '/Library/Fonts/', `${process.env.PUBLIC_URL}/font/`);

    // Create a new workbook and get the first worksheet
    const workbook = new xlsModule.Workbook();
    const sheet = workbook.Worksheets.get(0);

    // Write the header row and the sample labels
    sheet.Range.get("A1").Text = "Item";
    sheet.Range.get("B1").Text = "Result";
    sheet.Range.get("A2").Text = "Water";
    sheet.Range.get("A3").Text = "Sulfuric acid";

    // Write the chemical formulas
    const waterRange = sheet.Range.get("B2");
    waterRange.RichText.Text = "H2O";
    const acidRange = sheet.Range.get("B3");
    acidRange.RichText.Text = "H2SO4";

    // Create a font and set IsSubscript to true
    const font = workbook.CreateFont();
    font.IsSubscript = true;

    // Apply the subscript font to the digits only: indices start at 0 and the range is inclusive
    waterRange.RichText.SetFont(1, 1, font);
    acidRange.RichText.SetFont(1, 1, font);
    acidRange.RichText.SetFont(4, 4, font);

    // Widen columns A and B so the rich text is fully visible
    sheet.Range.get("A1:A3").ColumnWidth = 18;
    sheet.Range.get("B1:B3").ColumnWidth = 18;

    // Save the workbook
    const outputFileName = "SetSubscript.xlsx";
    workbook.SaveToFile({ fileName: outputFileName });

    // Dispose of the workbook object to free resources
    workbook.Dispose();

    // Read the result file from the VFS and trigger the download
    const fileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
    const blob = new Blob([fileArray], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = outputFileName;
    a.click();
    URL.revokeObjectURL(url);
  };

  return (
    <div style={{ textAlign: 'center', height: '300px' }}>
      <h1>Set Subscript</h1>
      <button onClick={setSubscript}>Start</button>
    </div>
  );
}

export default App;

After running, the effect of setting the subscript of text:

Set the Superscript of Text

Superscript is the mirror image of subscript; the only difference is the direction the font shifts — up rather than down. Superscript suits powers and exponents — the squares in the Pythagorean theorem, the squared cm2 of an area unit, the cubed m3 of a volume unit. A single RichText.SetFont call covers one contiguous range, so text such as a2 + b2 = c2, with three characters to raise, takes three calls. The steps are as follows:

1. Load the font into the VFS.
2. Create a workbook and get the first worksheet.
3. Write the sample labels, then the text that receives the formatting with RichText.Text.
4. Create a font object with workbook.CreateFont() and set IsSuperscript to true.
5. Apply the font to the characters that should be raised with RichText.SetFont(startIndex, endIndex, font), then save the workbook.

Here is a complete code example that sets the superscript of cell text in React:

function App() {
  const setSuperscript = async () => {
    // Get the Spire.XLS WASM module
    const xlsModule = window.wasmModule?.spirexls;

    // Check if the module is ready
    if (!xlsModule) {
      alert('Spire.Xls is not ready yet');
      return;
    }

    // Load the font into the VFS
    await window.spire.FetchFileToVFS('ARIAL.TTF', '/Library/Fonts/', `${process.env.PUBLIC_URL}/font/`);

    // Create a new workbook and get the first worksheet
    const workbook = new xlsModule.Workbook();
    const sheet = workbook.Worksheets.get(0);

    // Write the header row and the sample labels
    sheet.Range.get("A1").Text = "Item";
    sheet.Range.get("B1").Text = "Result";
    sheet.Range.get("A2").Text = "Pythagorean theorem";
    sheet.Range.get("A3").Text = "Area unit";
    sheet.Range.get("A4").Text = "Volume unit";

    // Write the text that receives the formatting
    const theoremRange = sheet.Range.get("B2");
    theoremRange.RichText.Text = "a2 + b2 = c2";
    const areaRange = sheet.Range.get("B3");
    areaRange.RichText.Text = "cm2";
    const volumeRange = sheet.Range.get("B4");
    volumeRange.RichText.Text = "m3";

    // Create a font and set IsSuperscript to true
    const font = workbook.CreateFont();
    font.IsSuperscript = true;

    // Apply the superscript font to the characters that should be raised
    theoremRange.RichText.SetFont(1, 1, font);
    theoremRange.RichText.SetFont(6, 6, font);
    theoremRange.RichText.SetFont(11, 11, font);
    areaRange.RichText.SetFont(2, 2, font);
    volumeRange.RichText.SetFont(1, 1, font);

    // Widen columns A and B so the rich text is fully visible
    sheet.Range.get("A1:A4").ColumnWidth = 18;
    sheet.Range.get("B1:B4").ColumnWidth = 18;

    // Save the workbook
    const outputFileName = "SetSuperscript.xlsx";
    workbook.SaveToFile({ fileName: outputFileName });

    // Dispose of the workbook object to free resources
    workbook.Dispose();

    // Read the result file from the VFS and trigger the download
    const fileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
    const blob = new Blob([fileArray], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = outputFileName;
    a.click();
    URL.revokeObjectURL(url);
  };

  return (
    <div style={{ textAlign: 'center', height: '300px' }}>
      <h1>Set Superscript</h1>
      <button onClick={setSuperscript}>Start</button>
    </div>
  );
}

export default App;

After running, the effect of setting the superscript of text:

FAQ

How do I remove a superscript or subscript that has already been set?

Cause: Superscript and subscript are formats on individual characters. Calling SetFont again over the same range overwrites those characters with the new font's properties, so applying a font without the shift clears the effect.

Solution: Create a font with IsSubscript or IsSuperscript set to false, and call SetFont over the original range:

// Overwrite the subscript with a plain font
const normal = workbook.CreateFont();
normal.IsSubscript = false;
range.RichText.SetFont(1, 1, normal);

How can I tell whether a character is superscript when reading the file back?

Cause: The shift is a format on the character, not part of the cell's text. Range.Text, Range.Value and RichText.Text all return plain text, so they cannot show which characters carry it.

Solution: Read the font at the character's position and check its superscript and subscript properties. Positions count from 0, the same as with SetFont:

// Read the font at index 1 — the middle "2" in H2O
const font = range.RichText.GetFont(1);
console.log(font.IsSubscript);   // true
console.log(font.IsSuperscript); // false

Get a Free License

Spire.XLS for JavaScript offers a 30-day full-featured free trial license with no functional limitations. Apply here to evaluate before purchasing.