Adjust Excel Page Setup with JavaScript in React

Configuring page setup is essential for preparing Excel documents for printing or PDF export. Spire.XLS for JavaScript runs entirely in the browser via WebAssembly, using a virtual file system (VFS) to manage input and output files — no backend server required. It provides comprehensive page setup capabilities through the PageSetup object, allowing you to control margins, orientation, paper size, print area, zoom scaling, and fit-to-page options.

The PageSetup object in Spire.XLS offers a rich set of properties for controlling how a worksheet is printed or displayed. Key properties include:

This article covers six core features:

• Adjust Excel Page Margins
• Adjust Excel Page Orientation
• Adjust Excel Paper Size
• Adjust Excel Print Area
• Adjust Excel Zoom Scale
• Fit Excel Table to 1 Page

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

Adjust Excel Page Margins

Page margins define the blank space around the edges of a printed worksheet. The steps are as follows:

• Create a Workbook object using new xlsModule.Workbook().
• Get the default worksheet using the workbook.Worksheets.get(index) method.
• Access the PageSetup object through sheet.PageSetup.
• Set page margins using the TopMargin, BottomMargin, LeftMargin, and RightMargin properties.
• Save the workbook to an Excel file using the workbook.SaveToFile() method.

Below is a complete code example demonstrating how to adjust page margins in React:

function App() {
  const adjustPageMargins = 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;
    }

    // Create a workbook and load the existing file
    await window.spire.FetchFileToVFS('Sample.xlsx', '', `${process.env.PUBLIC_URL}data/`);

    const workbook = new xlsModule.Workbook();
    workbook.LoadFromFile({ fileName: 'Sample.xlsx' });
    const sheet = workbook.Worksheets.get(0);

    // Get the PageSetup object
    const pageSetup = sheet.PageSetup;

    // Set the top, bottom, left, right, header, and footer margins
    pageSetup.TopMargin = 1;
    pageSetup.BottomMargin = 1;
    pageSetup.LeftMargin = 0.75;
    pageSetup.RightMargin = 0.75;

    // Save the workbook
    const outputFileName = 'AdjustMargins.xlsx';
    workbook.SaveToFile(outputFileName);
    workbook.Dispose();

    // Read the file from VFS and trigger 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>Adjust Page Margins</h1>
      <button onClick={adjustPageMargins}>
        Generate
      </button>
    </div>
  );
}

export default App;

Page margins adjusted with Spire.XLS for JavaScript

Adjust Excel Page Orientation

Page orientation determines whether a worksheet is printed in portrait (vertical) or landscape (horizontal) layout. Landscape orientation is especially useful for wide tables with many columns. The steps are as follows:

• Create a Workbook object using new xlsModule.Workbook().
• Get the default worksheet using the workbook.Worksheets.get(index) method.
• Access the PageSetup object through sheet.PageSetup.
• Set the page orientation using the Orientation property.
• Save the workbook to an Excel file using the workbook.SaveToFile() method.

Below is a complete code example demonstrating how to set the page orientation to landscape in React:

function App() {
  const setPageOrientation = 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;
    }

    // Create a workbook and load the existing file
    // Load the sample file into VFS
    await window.spire.FetchFileToVFS('Sample.xlsx', '', `${process.env.PUBLIC_URL}data/`);

    const workbook = new xlsModule.Workbook();
    workbook.LoadFromFile({ fileName: 'Sample.xlsx' });
    const sheet = workbook.Worksheets.get(0);

    // Set the page orientation to Landscape
    sheet.PageSetup.Orientation = xlsModule.PageOrientationType.Landscape;

    // Save the workbook
    const outputFileName = 'SetOrientation.xlsx';
    workbook.SaveToFile(outputFileName);
    workbook.Dispose();

    // Read the file from VFS and trigger 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 Page Orientation</h1>
      <button onClick={setPageOrientation}>
        Generate
      </button>
    </div>
  );
}

export default App;

Page orientation set to landscape with Spire.XLS for JavaScript

Adjust Excel Paper Size

Different printers and regions use different standard paper sizes. Spire.XLS for JavaScript supports a wide range of paper sizes through the PaperSizeType enumeration, including A4, Letter, A3, and many more. The steps are as follows:

• Create a Workbook object using new xlsModule.Workbook().
• Get the default worksheet using the workbook.Worksheets.get(index) method.
• Access the PageSetup object through sheet.PageSetup.
• Set the paper size using the PaperSize property.
• Save the workbook to an Excel file using the workbook.SaveToFile() method.

Below is a complete code example demonstrating how to set the paper size to A3 in React:

function App() {
  const setPaperSize = 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;
    }

    // Create a workbook and load the existing file
    // Load the sample file into VFS
    await window.spire.FetchFileToVFS('Sample.xlsx', '', `${process.env.PUBLIC_URL}data/`);

    const workbook = new xlsModule.Workbook();
    workbook.LoadFromFile({ fileName: 'Sample.xlsx' });
    const sheet = workbook.Worksheets.get(0);

    // Get the PageSetup object
    const pageSetup = sheet.PageSetup;

    // Set the paper size to A3
    pageSetup.PaperSize = xlsModule.PaperSizeType.PaperA3;

    // Save the workbook
    const outputFileName = 'SetPaperSize.xlsx';
    workbook.SaveToFile(outputFileName);
    workbook.Dispose();

    // Read the file from VFS and trigger 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 Paper Size</h1>
      <button onClick={setPaperSize}>
        Generate
      </button>
    </div>
  );
}

export default App;

Paper size set to A3 with Spire.XLS for JavaScript

Adjust Excel Print Area

The print area defines which portion of a worksheet will be printed. The steps are as follows:

• Create a Workbook object using new xlsModule.Workbook().
• Get the default worksheet using the workbook.Worksheets.get(index) method.
• Populate sample data using the sheet.Range property.
• Access the PageSetup object through sheet.PageSetup.
• Set the print area using the PrintArea property.
• Save the workbook to an Excel file using the workbook.SaveToFile() method.

Below is a complete code example demonstrating how to set the print area in React:

function App() {
  const setPrintArea = 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;
    }

    // Create a workbook and load the existing file
    // Load the sample file into VFS
    await window.spire.FetchFileToVFS('Sample.xlsx', '', `${process.env.PUBLIC_URL}data/`);

    const workbook = new xlsModule.Workbook();
    workbook.LoadFromFile({ fileName: 'Sample.xlsx' });
    const sheet = workbook.Worksheets.get(0);

    // Set the print area to A1:E3
    sheet.PageSetup.PrintArea = "A1:E3";

    // Save the workbook
    const outputFileName = 'SetPrintArea.xlsx';
    workbook.SaveToFile(outputFileName);
    workbook.Dispose();

    // Read the file from VFS and trigger 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 Print Area</h1>
      <button onClick={setPrintArea}>
        Generate
      </button>
    </div>
  );
}

export default App;

Print area set with Spire.XLS for JavaScript

Adjust Excel Zoom Scale

The zoom scale controls the magnification level at which a worksheet is displayed on screen. The value ranges from 10 to 400, representing a percentage of normal size. The steps are as follows:

• Create a Workbook object using new xlsModule.Workbook().
• Get the default worksheet using the workbook.Worksheets.get(index) method.
• Set the zoom scale using the Zoom property.
• Save the workbook to an Excel file using the workbook.SaveToFile() method.

Below is a complete code example demonstrating how to set the zoom scale in React:

function App() {
  const setZoomScale = 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;
    }

    // Create a workbook and load the existing file
    // Load the sample file into VFS
    await window.spire.FetchFileToVFS('Sample.xlsx', '', `${process.env.PUBLIC_URL}data/`);

    const workbook = new xlsModule.Workbook();
    workbook.LoadFromFile({ fileName: 'Sample.xlsx' });
    const sheet = workbook.Worksheets.get(0);

    // Set the zoom scale to 85%
    const pageSetup = sheet.PageSetup;
    pageSetup.Zoom = 85;

    // Save the workbook
    const outputFileName = 'SetZoomScale.xlsx';
    workbook.SaveToFile(outputFileName);
    workbook.Dispose();

    // Read the file from VFS and trigger 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 Zoom Scale</h1>
      <button onClick={setZoomScale}>
        Generate
      </button>
    </div>
  );
}

export default App;

Zoom scale set to 85% with Spire.XLS for JavaScript

Fit Excel Table to 1 Page

When printing a large worksheet, the content may span multiple pages, making it difficult to read. The steps are as follows:

• Create a Workbook object using new xlsModule.Workbook().
• Get the default worksheet using the workbook.Worksheets.get(index) method.
• Populate sample data using the sheet.Range property.
• Access the PageSetup object through sheet.PageSetup.
• Set the fit-to-page properties using the FitToPagesTall and FitToPagesWide properties.
• Save the workbook to an Excel file using the workbook.SaveToFile() method.

Below is a complete code example demonstrating how to fit a worksheet to one page in React:

function App() {
  const fitToPage = 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;
    }

    // Create a workbook and load the existing file
    // Load the sample file into VFS
    await window.spire.FetchFileToVFS('Sample.xlsx', '', `${process.env.PUBLIC_URL}data/`);

    const workbook = new xlsModule.Workbook();
    workbook.LoadFromFile({ fileName: 'Sample.xlsx' });
    const sheet = workbook.Worksheets.get(0);

    // Fit the worksheet content to 1 page
    const pageSetup = sheet.PageSetup;
    pageSetup.FitToPagesTall = 1;
    pageSetup.FitToPagesWide = 1;

    // Save the workbook
    const outputFileName = 'FitToPage.xlsx';
    workbook.SaveToFile(outputFileName);
    workbook.Dispose();

    // Read the file from VFS and trigger 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>Fit Worksheet to 1 Page</h1>
      <button onClick={fitToPage}>
        Generate
      </button>
    </div>
  );
}

export default App;

Worksheet scaled to fit one page with Spire.XLS for JavaScript

FAQ

How to print gridlines or row/column headings

Cause: By default, gridlines and row/column headings are not printed, which can make the data harder to read on paper.

Solution: Use the IsPrintGridlines and IsPrintHeadings properties of the PageSetup object:

pageSetup.IsPrintGridlines = true;
pageSetup.IsPrintHeadings = true;

How to get the actual page dimensions

Cause: You may need to know the actual width and height of the current paper size to adjust content layout.

Solution: Retrieve the values using the PageWidth and PageHeight properties of the PageSetup object:

var pageWidth = pageSetup.PageWidth;
var pageHeight = pageSetup.PageHeight;

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.