Print Support

PrintManager enables printing canvas-rendered tables by generating a temporary DOM <table> element and injecting @media print CSS. Since canvas content is not included in the browser print flow, the print manager reconstructs the visible data as an HTML table at print time.

Live Demo

Click Print to generate an HTML table from canvas data and open the browser print dialog. Sorted/filtered data is respected.

🖨️ Print Table

View source code

PrintSupportDemo.tsx

import { useRef } from 'react';
import { Spreadsheet } from '@witqq/spreadsheet-react';
import type { SpreadsheetRef } from '@witqq/spreadsheet-react';
import { DemoWrapper } from './DemoWrapper';
import { DemoButton } from './DemoButton';
import { DemoToolbar } from './DemoToolbar';
import { generateEmployees, employeeColumns } from './generate-data';
import { useSiteTheme } from './useSiteTheme';

const data = generateEmployees(100);

export function PrintSupportDemo() {
  const { witTheme } = useSiteTheme();
  const tableRef = useRef<SpreadsheetRef>(null);

  return (
    <DemoWrapper
      title="Live Demo"
      description="Click Print to generate an HTML table from canvas data and open the browser print dialog. Sorted/filtered data is respected."
      height={440}
    >
      <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
        <DemoToolbar>
          <DemoButton onClick={() => tableRef.current?.print()}>🖨️ Print Table</DemoButton>
        </DemoToolbar>
        <div style={{ flex: 1 }}>
          <Spreadsheet
            theme={witTheme}
            ref={tableRef}
            columns={employeeColumns}
            data={data}
            showRowNumbers
            sortable
            style={{ width: '100%', height: '100%' }}
          />
        </div>
      </div>
    </DemoWrapper>
  );
}

The print output respects DataView — if the table is filtered or sorted, only the filtered/sorted data is printed.

Print Button

Trigger printing through the table ref:

import { useRef } from 'react';
import { Spreadsheet, SpreadsheetRef } from '@witqq/spreadsheet-react';

function App() {
  const ref = useRef<SpreadsheetRef>(null);

  return (
    <>
      <button onClick={() => ref.current?.print()}>
        Print Table
      </button>
      <Spreadsheet
        ref={ref}
        columns={columns}
        data={data}
      />
    </>
  );
}

maxPrintRows

Large datasets are capped at 10,000 rows by default to prevent browser freezes. When truncated, a notice is appended to the printed output indicating how many rows were omitted. Configurable via PrintManagerConfig.maxPrintRows at the engine level.

How It Works

1. PrintManager reads all visible rows from DataView
2. Generates an HTML <table> with column headers and cell values
3. Injects @media print CSS that hides the canvas and shows the table
4. Calls window.print()
5. Cleans up the temporary DOM elements after printing

API Reference

PrintManager

Method	Signature	Description
attach	() => void	Inject @media print CSS into document
detach	() => void	Detach and clean up
print	() => void	Generate DOM table and trigger print