A form-based PDF keeps its whole value in what was filled in, but once the file is filed away or handed over, that data is locked inside the layout. To find out what a field holds you have to open a reader and copy it out one by one; with a few dozen fields, transcribing by hand is slow and easy to get wrong. Before those values can be validated, imported into a database, or used to track an order, the program has to be able to read them out first.

This article shows how to extract form field values from an existing PDF with Spire.PDF for JavaScript: walk the field collection, determine each field's type, then read the current value of each text box, list box, combo box, radio button, and check box by type. Spire.PDF for JavaScript is built on WebAssembly and opens and parses documents in the browser, so the whole read happens locally. Files are read and written through a virtual file system (VFS), with no backend involved.

This article covers one core feature:

• Extract all form field values

For installation and project configuration, see Integrate Spire.PDF for JavaScript in a React Project. The examples below assume Spire.PDF is installed and the WebAssembly module is initialized.

Extract All Form Field Values

Spire.PDF for JavaScript provides PdfFormWidget to take over the form fields already present in a document; FieldsWidget is its field collection, and fields can be pulled out one by one by index. The value properties are not uniform across field types: a text box keeps its value on Text, a check box is judged by Checked, list boxes and combo boxes split into an option collection and a selected value, and a radio button is read straight from Value. So once a field is in hand, dispatch on its type and then read the matching value, writing the type name into the result alongside it — you never need to know in advance which fields the document contains.

function App() {
  const getAllFieldValues = async () => {
    // Get the Spire.PDF WASM module
    const pdfModule = window.wasmModule?.spirepdf;

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

    // Load the PDF file to be read into the VFS
    const inputFileName = 'ApplicationForm.pdf';
    await window.spire.FetchFileToVFS(inputFileName, "", `${process.env.PUBLIC_URL}/data/`);

    // Create a PdfDocument object and load the PDF document
    const doc = new pdfModule.PdfDocument();
    doc.LoadFromFile(inputFileName);

    // Build a PdfFormWidget from the document's form handle; FieldsWidget is its field collection
    const formWidget = new pdfModule.PdfFormWidget(doc.Form.H);
    const fields = formWidget.FieldsWidget;

    let report = '';

    // Walk the field collection, check each type, and read the matching value
    for (let i = 0; i < fields.Count; i++) {
      const field = fields.get_Item({ index: i });

      // Both the type name and the value are filled in by the type dispatch
      let type = 'Unknown';
      let value = '(Unrecognized field type)';

      if (field instanceof pdfModule.PdfTextBoxFieldWidget) {
        // Text box field: read Text directly
        type = 'TextBox';
        value = field.Text;
      } else if (field instanceof pdfModule.PdfListBoxWidgetFieldWidget) {
        // List box field: Values holds every option, SelectedValue is the current one
        const options = [];
        for (let j = 0; j < field.Values.Count; j++) {
          options.push(field.Values.get_Item(j).Value);
        }
        type = 'ListBox';
        value = `Selected ${field.SelectedValue}, options ${options.join(', ')}`;
      } else if (field instanceof pdfModule.PdfComboBoxWidgetFieldWidget) {
        // Combo box field: like a list box, it has an option collection and a selected value
        const options = [];
        for (let j = 0; j < field.Values.Count; j++) {
          options.push(field.Values.get_Item(j).Value);
        }
        type = 'ComboBox';
        value = `Selected ${field.SelectedValue}, options ${options.join(', ')}`;
      } else if (field instanceof pdfModule.PdfRadioButtonListFieldWidget) {
        // Radio button field: Value is the selected item
        type = 'RadioButton';
        value = `Selected ${field.Value}`;
      } else if (field instanceof pdfModule.PdfCheckBoxWidgetFieldWidget) {
        // Check box field: Checked gives the state, not Value
        type = 'CheckBox';
        value = field.Checked ? 'Checked' : 'Not checked';
      }

      report += `Field "${field.Name}" (${type}): ${value}\n`;
    }

    const outputFileName = 'AllFieldValues.txt';
    window.dotnetRuntime.Module.FS.writeFile(outputFileName, report);
    doc.Close();

    // Read the generated file from the VFS and trigger the download
    const fileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
    const blob = new Blob([fileArray], { type: 'text/plain' });
    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>Extract Form Field Values</h1>
      <button onClick={getAllFieldValues}>
        Extract values
      </button>
    </div>
  );
}

export default App;

The values collected by walking every form field:

FAQ

A check box's Value doesn't give you its state

Cause: The check box widget (PdfCheckBoxWidgetFieldWidget) has no Value property — reading it gets you undefined. A check box tracks its state through export values: Off when it is not ticked, Yes or a custom export value when it is. A string value cannot tell you whether the box is checked.

Solution: Use Checked for the state:

// Check the state with Checked, not Value
const checked = field.Checked;

Should a list box or combo box be read with SelectedValue or Values

Cause: For these two fields Values is the full option set — walking it gives you every choice, and each entry is a PdfListWidgetItem whose .Value is the option text, so the item has to be unwrapped one more time; the item the user actually selected lives on SelectedValue. Treat Values as the value and what you get is not the filled-in result.

Solution: Read SelectedValue for the current value; walk Values only when you need to show the available range:

// The text of the currently selected item
const selected = field.SelectedValue;

// Every available option
const options = [];
for (let j = 0; j < field.Values.Count; j++) {
  options.push(field.Values.get_Item(j).Value);
}

Loading an encrypted PDF throws "Can not open an encrypted document. The password is invalid."

Cause: Reading a form means the document has to open first; when the document is password-protected, LoadFromFile without the password throws during loading, and no empty document comes back.

Solution: Pass the open password as the second argument to LoadFromFile:

doc.LoadFromFile(inputFileName, 'spire123');

Get a Free License

If you want to remove the evaluation message from the result document, or to get rid of the feature limitations, contact sales for a temporary license valid for 30 days.

Once a table has been turned into a PDF, the data is sealed up together with the layout. Send the same document to ten people and what comes back is ten separately filled-in PDFs; to move the contents of one onto a different template, the only way is to copy it off the screen one field at a time. The form fields themselves do have names and the values do hang off those names, but as soon as you leave a reader, that structure can no longer be pulled back out.

This article uses Spire.PDF for JavaScript to export the values in a form's fields to a data file, then import that data file back into a blank form. ExportData and ImportData both support Xml, Fdf, and XFdf — the three are nothing more than a difference of DataFormat enum values, called in exactly the same way, differing only in the structure of the file written out. The code below runs the whole flow with XML, with the FDF and XFDF versions listed alongside in comments; uncomment to switch. Spire.PDF for JavaScript reads and writes documents in the browser on top of WebAssembly, so the whole process happens locally, going through a virtual file system (VFS) to read and write files, with no backend involved.

This article covers two core features:

• Export PDF form data
• Import PDF form data

For installation and project configuration, see Integrate Spire.PDF for JavaScript in a React Project. The examples below assume Spire.PDF is installed and the WebAssembly module is initialized.

Export PDF Form Data

PdfFormWidget.ExportData writes the values in a form's fields out to a single data file, with the format given by the second parameter, DataFormat. The three formats hold the same set of field values; they differ in file structure:

The third parameter is the form name; for an unnamed AcroForm, pass an empty string.

function App() {
  const exportFormData = async () => {
    // Get the Spire.PDF WASM module
    const pdfModule = window.wasmModule?.spirepdf;

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

    // Load the PDF file to be exported into the VFS
    const inputFileName = 'CustomerInformationForm.pdf';
    await window.spire.FetchFileToVFS(inputFileName, "", `${process.env.PUBLIC_URL}/data/`);

    // Create a PdfDocument object and load the PDF document
    const doc = new pdfModule.PdfDocument();
    doc.LoadFromFile(inputFileName);

    // Build a PdfFormWidget from the document's form handle to reach the data export API
    const formWidget = new pdfModule.PdfFormWidget(doc.Form.H);
    
    // This demo exports XML
    const dataFiles = [
      { fileName: 'FormData.xml', format: pdfModule.DataFormat.Xml },
      // { fileName: 'FormData.fdf', format: pdfModule.DataFormat.Fdf },
      // { fileName: 'FormData.xfdf', format: pdfModule.DataFormat.XFdf },
    ];

    for (const item of dataFiles) {
      // The third parameter is the form name; pass an empty string for an unnamed form
      formWidget.ExportData(item.fileName, item.format, '');
    }
    doc.Close();

    // Read the generated file from the VFS and trigger the download
    for (const item of dataFiles) {
      const fileArray = window.dotnetRuntime.Module.FS.readFile(item.fileName);
      const blob = new Blob([fileArray], { type: 'application/octet-stream' });
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = item.fileName;
      a.click();
      URL.revokeObjectURL(url);
    }
  };

  return (
    <div style={{ textAlign: 'center', height: '300px' }}>
      <h1>Export Form Data</h1>
      <button onClick={exportFormData}>
        Export
      </button>
    </div>
  );
}

export default App;

The exported XML form data file:

Import PDF Form Data

PdfFormWidget.ImportData reads a data file and writes the values back into the form fields by field name; the second parameter, DataFormat, only determines how the file is parsed and has nothing to do with the file extension — the same for all three formats.

What gets imported is the blank form. The template goes out empty, and once the data files come back the values are filled in one by one — with a lot of fields there is no need to key everything in a second time.

function App() {
  const importFormData = async () => {
    // Get the Spire.PDF WASM module
    const pdfModule = window.wasmModule?.spirepdf;

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

    // Load the blank form to be filled into the VFS
    const inputFileName = 'BlankCustomerInformationForm.pdf';
    await window.spire.FetchFileToVFS(inputFileName, "", `${process.env.PUBLIC_URL}/data/`);

    // This demo refills from the XML data file
    const dataFiles = [
      { fileName: 'FormData.xml', format: pdfModule.DataFormat.Xml, outputFileName: 'ImportedXMLData.pdf' },
      // { fileName: 'FormData.fdf', format: pdfModule.DataFormat.Fdf, outputFileName: 'ImportedFDFData.pdf' },
      // { fileName: 'FormData.xfdf', format: pdfModule.DataFormat.XFdf, outputFileName: 'ImportedXFDFData.pdf' },
    ];

    for (const item of dataFiles) {
      // The data file also has to be loaded into the VFS first
      await window.spire.FetchFileToVFS(item.fileName, "", `${process.env.PUBLIC_URL}/data/`);

      const doc = new pdfModule.PdfDocument();
      doc.LoadFromFile(inputFileName);

      // Read the data file and write the values back into the fields by name
      const formWidget = new pdfModule.PdfFormWidget(doc.Form.H);
      formWidget.ImportData(item.fileName, item.format);

      doc.SaveToFile(item.outputFileName);
      doc.Close();

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

  return (
    <div style={{ textAlign: 'center', height: '300px' }}>
      <h1>Import Form Data</h1>
      <button onClick={importFormData}>
        Import
      </button>
    </div>
  );
}

export default App;

The form after the XML data has been imported:

FAQ

Some fields are still empty after import

Cause: Import matches by field name, so the names in the data file have to be exactly the same as the field names in the form, case and spaces included. A field that doesn't match is skipped outright — no error and no return value saying so; only the fields that do match get a value.

Solution: Walk the field collection first and print out the real names, then check the data file against them:

const fields = formWidget.FieldsWidget;
for (let i = 0; i < fields.Count; i++) {
  console.log(fields.get_Item({ index: i }).Name);
}

Which of the three data formats should you choose

Cause: All three hold the same field values; the difference is structure and tool support. Fdf is the smallest, starts with %FDF-, and suits passing data between form programs only; XFdf and Xml are both XML, so they can be opened and read directly and diffed with text tools, which makes them safer for moving between tools; Xml puts the field name right in the element name, the most straightforward structure of the three.

Solution: Use Fdf for round trips inside a program; use XFdf when the file goes into version control, needs a human eye, or has to talk to another system; use Xml when all you need is a readable list of field names and values.

Import throws Xml_MessageWithErrorPosition or "not a valid FDF file"

Cause: ImportData parses the file as whatever format the second parameter names, and never looks at the extension. When the content doesn't match the format, it fails at the first step: XML reports Xml_MessageWithErrorPosition, Xml_InvalidRootData, and a non-FDF file reports The source is not a valid FDF file because it does not start with "%FDF-".

Solution: Pass the DataFormat that matches the file's real format, and use the original exported data file rather than another format after re-saving it.

Get a Free License

If you want to remove the evaluation message from the result document, or to get rid of the feature limitations, contact sales for a temporary license valid for 30 days.

JavaScript can generate PDF files programmatically by creating a document, adding pages, drawing text and other elements, and saving the document. In a React application, this workflow can run entirely in the browser with Spire.PDF for JavaScript and WebAssembly, without requiring a backend server.

At a high level, JavaScript PDF generation consists of five steps: create the document, add pages, add content, save the PDF, and download the generated file. This tutorial uses React as the example environment, but the PDF-generation workflow itself is JavaScript-based and applies to any frontend framework.

Here, “generating a PDF” means creating a PDF document programmatically from scratch, rather than printing an existing HTML page to PDF. JavaScript applications can generate PDFs through HTML-to-PDF conversion, canvas-based rendering, or programmatic PDF construction. This tutorial focuses on programmatic PDF generation with Spire.PDF for JavaScript.

What You Need

This tutorial assumes that Spire.PDF for JavaScript has already been installed and initialized in your React project. For setup details, see How to Integrate Spire.PDF for JavaScript in a React Project. You also need the WebAssembly resources configured so that the PDF module is available through window.spirepdf (Spire.Office for JavaScript 11.7.0 or later).

How to Generate a PDF in JavaScript

Create PdfDocument  ->  Add Page  ->  Draw Content  ->  Save  ->  Download

1. Create a PDF document

Start by creating a PdfDocument object. This is the in-memory representation of the PDF file you will build.

const pdf = window.spirepdf;
let doc = new pdf.PdfDocument();

2. Add a page

A PDF document needs at least one page. Call Pages.Add() to create a blank page with a default size.

let page = doc.Pages.Add();

3. Add text and other content

The page has a Canvas property that exposes drawing methods. Use DrawString to add text, DrawImage to add images, DrawLine to draw lines, and DrawRectangle to draw filled or outlined rectangles. Coordinates are measured in points (1 point = 1/72 inch) from the top-left corner.

let font = new pdf.PdfFont({ fontFamily: pdf.PdfFontFamily.Helvetica, size: 12 });
let brush = new pdf.PdfSolidBrush({ pdfRGBColor: new pdf.PdfRGBColor(0, 0, 0) });
page.Canvas.DrawString({ s: "Hello, World!", font: font, brush: brush, x: 50, y: 50 });

4. Save the generated PDF

Once all content is in place, call SaveToFile to write the PDF to the WebAssembly virtual file system (VFS). The VFS is an in-browser file system that Spire.PDF uses to manage input and output files without touching the real disk or a server.

doc.SaveToFile({ fileName: 'Output.pdf' });
doc.Close();

5. Download the PDF in the browser

After saving to the VFS, read the file back as a byte array, wrap it in a Blob, and trigger a download by creating a temporary anchor element. This pattern is used in every Spire.PDF for JavaScript example.

const fileArray = window.dotnetRuntime.Module.FS.readFile('Output.pdf');
const blob = new Blob([fileArray], { type: 'application/pdf' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'Output.pdf';
a.click();
URL.revokeObjectURL(url);

Programmatic PDF generation is useful when you need precise control over the document structure, page layout, text, graphics, or metadata. If you already have a web page or HTML template and simply need to convert that layout into a PDF, an JavaScript HTML-to-PDF workflow may be a better fit.

The next section puts these steps together in a complete example that generates a PDF from JavaScript data.

Generate an Invoice PDF from JavaScript Data

Real applications generate structured documents — invoices, reports, quotations — from application data, not hardcoded strings. In a React application, the invoice object could come from form input, component state, or an API response; the PDF generation code only needs the data needed for the document layout. This example defines an invoice as a JavaScript object and renders a print-ready PDF from it: a bleed header, a billed-to block, a line-item table, a totals cascade, and payment details. It combines DrawString, DrawRectangle, DrawLine, and PdfGrid into one complete runnable React component.

function App() {
  const generateInvoicePdf = async () => {
    // spire.office 11.7.0 hangs the engine off window.spirepdf.
    const pdf = window.spirepdf;
    if (!pdf) return alert('Spire.PDF is not ready yet');

    // ── The invoice, as data. Swap this object and the layout follows. ────
    const invoice = {
      number: 'INV-2026-0148', issued: '23 September 2026',
      due: '23 October 2026', po: 'PO-ACME-88231', terms: 'Net 30',
      seller: ['NIMBUS SOFTWARE LTD.', 'Cloud platforms for manufacturing teams',
        '12 Kingsway, London WC2B 6UN, United Kingdom'],
      buyer: ['Acme Manufacturing Co.', 'Attn: Sarah Chen, Procurement',
        '1400 Harbor Boulevard, Suite 320', 'Long Beach, CA 90802', 'United States'],
      // [description, quantity, unit price] — the amount is derived below
      items: [
        ['CloudDesk Pro — annual subscription (25 seats)', 25, 120],
        ['Implementation & onboarding (remote, 16 hours)', 16, 95],
        ['Priority support — Premium tier (12 months)', 1, 2400],
        ['Additional object storage (500 GB per year)', 1, 480],
      ],
      discountRate: 0.05, taxRate: 0.08,
      bank: ['Barclays Bank PLC · Sort code 20-00-00 · Account 5571 2043',
        'IBAN GB29 BARC 2000 0055 7120 43 · SWIFT BARCGB22'],
      remark: ['Quote the invoice number as the payment reference.',
        'Amounts unpaid after the due date accrue interest at 1.5% per month.'],
      legal:
        'Nimbus Software Ltd. · 12 Kingsway, London WC2B 6UN · VAT GB 412 8876 21 · Company No. 09882417',
      contact: 'billing@nimbussoftware.com · +44 20 7946 0812 · nimbussoftware.com',
    };

    const round = (n) => Math.round(n * 100) / 100;
    const subtotal = round(invoice.items.reduce((sum, [, qty, unit]) => sum + qty * unit, 0));
    const discount = -round(subtotal * invoice.discountRate);
    const tax = round((subtotal + discount) * invoice.taxRate);
    const total = round(subtotal + discount + tax);
    const money = (n) =>
      '$' + Math.abs(n).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
    const pct = (rate) => Math.round(rate * 100) + '%';

    // ── Document ──────────────────────────────────────────────────────────
    const doc = new pdf.PdfDocument();
    doc.PageSettings.Margins.All = 0; // before Pages.Add(), or the origin stays at the margin
    const page = doc.Pages.Add();

    // Text is dropped past the canvas client area, so lay out against it.
    const W = page.Canvas.ClientSize.Width;
    const H = page.Canvas.ClientSize.Height;
    const PAD = 28;
    const EDGE = W - PAD;

    // ── Drawing toolkit ───────────────────────────────────────────────────
    // Object notation selects the PdfFont / PdfSolidBrush / PdfPen overload —
    // the positional constructors all report "Ambiguous call" here.
    const rgb = (c) => new pdf.PdfRGBColor(c[0], c[1], c[2]);
    const paint = (c) => new pdf.PdfSolidBrush({ pdfRGBColor: rgb(c) });
    const font = (size, bold) =>
      new pdf.PdfFont({
        fontFamily: pdf.PdfFontFamily.Helvetica,
        size,
        ...(bold ? { style: pdf.PdfFontStyle.Bold } : {}),
      });
    // DrawString's first parameter is `s`, and it has no alignment option in
    // point mode — measure the string when it has to be right-aligned.
    const text = (s, f, colour, x, y, align) => {
      const dx = align === 'right' ? f.MeasureString({ text: s }).Width : 0;
      page.Canvas.DrawString({ s, font: f, brush: paint(colour), x: x - dx, y });
    };
    const box = (colour, x, y, w, h) =>
      page.Canvas.DrawRectangle({ brush: paint(colour), x, y, width: w, height: h });

    const INK = [26, 31, 43], NAVY = [23, 54, 93], ACCENT = [47, 111, 181];
    const MUTED = [107, 114, 128], RULE = [220, 225, 232], ZEBRA = [246, 248, 251];
    const SOFT = [238, 243, 249], WHITE = [255, 255, 255], ON_NAVY = [186, 200, 220];
    const fHero = font(26, true), fBrand = font(17, true), fTitle = font(11, true);
    const fBody = font(9.5), fBold = font(9.5, true), fSmall = font(8.5);
    const fLabel = font(7.5, true), fFoot = font(7.5), fCell = font(9), fHead = font(8, true);

    // ── Header band, bleeding to the sheet edges ──────────────────────────
    box(NAVY, 0, 0, W, 106);
    box(ACCENT, 0, 106, W, 3.5);
    text(invoice.seller[0], fBrand, WHITE, PAD, 30);
    text(invoice.seller[1], fSmall, ON_NAVY, PAD, 52);
    text(invoice.seller[2], fFoot, ON_NAVY, PAD, 68);
    text('INVOICE', fHero, WHITE, EDGE, 22, 'right');
    text(invoice.number, fBody, ON_NAVY, EDGE, 56, 'right');
    text(`Issued ${invoice.issued}`, fFoot, ON_NAVY, EDGE, 74, 'right');

    // ── Billed to / invoice details ───────────────────────────────────────
    const top = 158;
    text('BILL TO', fLabel, MUTED, PAD, top);
    text(invoice.buyer[0], fBold, INK, PAD, top + 17);
    invoice.buyer.slice(2).forEach((line, i) => text(line, fBody, MUTED, PAD, top + 35 + i * 14));
    text(invoice.buyer[1], fSmall, MUTED, PAD, top + 83);

    const details = [
      ['Invoice No.', invoice.number], ['Issue date', invoice.issued], ['Due date', invoice.due],
      ['PO number', invoice.po], ['Payment terms', invoice.terms],
    ];
    text('INVOICE DETAILS', fLabel, MUTED, EDGE, top, 'right');
    details.forEach(([key, value], i) => {
      text(key, fSmall, MUTED, EDGE - 128, top + 20 + i * 16);
      text(value, fBold, INK, EDGE, top + 20 + i * 16, 'right');
    });

    const tableY = top + 106;
    page.Canvas.DrawLine({
      pen: new pdf.PdfPen({ pdfRGBColor: rgb(RULE), width: 0.75 }),
      x1: PAD, y1: tableY, x2: EDGE, y2: tableY,
    });

    // ── Line items ────────────────────────────────────────────────────────
    const grid = new pdf.PdfGrid();
    grid.Columns.Add(4);
    [255, 44, 112, 128].forEach((w, i) => (grid.Columns.get_Item(i).Width = w));

    const alignRight = new pdf.PdfStringFormat({ alignment: pdf.PdfTextAlignment.Right });
    [1, 2, 3].forEach((i) => (grid.Columns.get_Item(i).Format = alignRight));

    // Cell padding is subtracted from row.Height — leave room for one line box
    // or every cell renders blank, with no error at all.
    const padding = new pdf.PdfPaddings();
    padding.Left = padding.Right = 8;
    padding.Top = padding.Bottom = 2;
    grid.Style.CellPadding = padding;
    grid.Style.Font = fCell;

    const hairline = new pdf.PdfBorders();
    hairline.All = new pdf.PdfPen({ pdfRGBColor: rgb(RULE), width: 0.5 });

    try { grid.Headers.Add(1); } catch {}
    const head = grid.Headers.get_Item(0);
    head.Height = 26;
    head.Style.BackgroundBrush = paint(NAVY);
    head.Style.TextBrush = paint(WHITE);
    head.Style.Font = fHead;
    ['DESCRIPTION', 'QTY', 'UNIT PRICE', 'AMOUNT'].forEach((label, i) => {
      const cell = head.Cells.get_Item(i);
      cell.Value = new pdf.String(label); // .Value is a .NET object — box the string
      if (i) cell.StringFormat = alignRight;
      cell.Style.Borders = hairline;
    });

    invoice.items.forEach(([description, qty, unit], r) => {
      const row = grid.Rows.Add();
      row.Height = 26;
      if (r % 2) row.Style.BackgroundBrush = paint(ZEBRA);
      [description, String(qty), money(unit), money(qty * unit)].forEach((value, i) => {
        const cell = row.Cells.get_Item(i);
        cell.Value = new pdf.String(value);
        cell.Style.Borders = hairline;
      });
    });

    const layout = new pdf.PdfGridLayoutFormat();
    layout.Layout = pdf.PdfLayoutType.Paginate;
    // The parameter is `format`, not `layout`.
    const tableBottom = grid.Draw({ page, x: PAD, y: tableY + 26, format: layout }).Bounds.Bottom;

    // ── Totals cascade ────────────────────────────────────────────────────
    let y = tableBottom + 22;
    const summary = [
      ['Subtotal', money(subtotal)],
      [`Discount · partner rate ${pct(invoice.discountRate)}`, '-' + money(discount)],
      [`Sales tax · ${pct(invoice.taxRate)}`, money(tax)],
    ];
    summary.forEach(([label, value], i) => {
      text(label, fBody, MUTED, EDGE - 220, y + i * 18);
      text(value, fBody, INK, EDGE, y + i * 18, 'right');
    });
    y += 58;

    box(NAVY, EDGE - 220, y, 220, 34);
    text('TOTAL DUE', fTitle, WHITE, EDGE - 204, y + 11);
    text(money(total), font(14, true), WHITE, EDGE - 14, y + 8, 'right');
    y += 34;

    // ── Payment details ───────────────────────────────────────────────────
    const cardTop = y + 34;
    box(SOFT, PAD, cardTop, W - 2 * PAD, 104);
    box(ACCENT, PAD, cardTop, 3, 104);
    text('PAYMENT DETAILS', fLabel, ACCENT, PAD + 18, cardTop + 16);
    text(invoice.bank[0], fBody, INK, PAD + 18, cardTop + 34);
    text(invoice.bank[1], fBody, INK, PAD + 18, cardTop + 50);
    invoice.remark.forEach((line, i) => text(line, fSmall, MUTED, PAD + 18, cardTop + 72 + i * 14));

    // ── Footer band, mirroring the header ─────────────────────────────────
    box(NAVY, 0, H - 58, W, 58);
    text(invoice.legal, fFoot, ON_NAVY, PAD, H - 41);
    text(invoice.contact, fFoot, ON_NAVY, PAD, H - 27);
    text('Page 1 of 1', fFoot, ON_NAVY, EDGE, H - 41, 'right');
    text(invoice.number, fFoot, ON_NAVY, EDGE, H - 27, 'right');

    // ── Save and download ─────────────────────────────────────────────────
    const fileName = 'Invoice.pdf';
    doc.SaveToFile({ fileName });
    doc.Close();

    const bytes = window.dotnetRuntime.Module.FS.readFile(fileName);
    const url = URL.createObjectURL(new Blob([bytes], { type: 'application/pdf' }));
    Object.assign(document.createElement('a'), { href: url, download: fileName }).click();
    URL.revokeObjectURL(url);
  };

  return (
    <div style={{ textAlign: 'center', height: '300px' }}>
      <h1>Generate Invoice PDF</h1>
      <button onClick={generateInvoicePdf}>Generate Invoice PDF</button>
    </div>
  );
}

export default App;

Invoice PDF generated from JavaScript data

What the code does:

• Defines an invoice object with the seller, the customer, the invoice metadata, and an items array — the shape a React app would receive from a form, an API response, or component state.
• Derives subtotal, discount, tax, and total from that data with reduce, so the figures printed on the PDF always match the figures in the app.
• Sets Margins.All to 0 before calling Pages.Add(). The canvas origin sits at the page's margin origin, so this is what makes (0, 0) the top-left corner of the sheet and lets the header and footer bands bleed to the edges.
• Lays the page out against Canvas.ClientSize instead of Size, because text drawn past the client area is dropped rather than clipped.
• Draws the header band, the billed-to and invoice-details blocks, the totals cascade, and the payment box with DrawRectangle, DrawLine, and DrawString. Right-aligned strings are measured with MeasureString first, since DrawString has no alignment option when you draw at a point.
• Builds the line-item table with PdfGrid: fixed column widths, a styled header row, zebra-striped body rows, and right-aligned numeric columns driven by a PdfStringFormat.
• Saves the document to the VFS and downloads it with the blob-and-anchor pattern from step 5.

The same pattern works for any structured document — replace the invoice object with report data, quotation data, or receipt data, and the five-step workflow stays the same.

Add More Content to the PDF

After creating the basic document, you can extend the same workflow with other PDF elements depending on the document you need to generate.

The five-step workflow does not change — only the content you draw in step 3 differs.

Generate PDFs in the Browser with WebAssembly

Spire.PDF for JavaScript runs its PDF processing engine through WebAssembly. Once the WASM module loads, your application can create, edit, and save PDFs on the client side. Files move through an in-browser Virtual File System (VFS):

JavaScript  ->  Spire.PDF WebAssembly  ->  VFS  ->  Blob  ->  Download

This means no PDF-generation backend is required. The browser handles document creation, rendering, and file output locally. The generated PDF is read from the VFS as a byte array and downloaded as a standard Blob.

The trade-off is the initial WASM download size, which is a one-time cost per session. For applications that generate documents frequently, subsequent generations are fast since the module is already loaded. For very large or complex PDFs, client-side performance depends on the user's device and available memory.

Common Use Cases

Common use cases include invoices, reports, quotations, certificates, receipts, and other structured business documents generated from application data. The specific layout changes, but the underlying workflow — create, add page, draw, save, download — remains the same.

Troubleshooting

WASM Module Not Initialized

If window.spirepdf is undefined, ensure the WebAssembly runtime is fully initialized before using the API:

const commonModule = await import('/node_modules/spire.office/spire.common.js');
await commonModule.initializeWasm();
await import('/node_modules/spire.office/spire.pdf.js');

Generated PDF Cannot Be Downloaded

If the download does not trigger or the file is empty, verify that SaveToFile was called before reading from the VFS. The file must exist in the VFS before FS.readFile can read it:

doc.SaveToFile({ fileName: 'Output.pdf' });
doc.Close();

// Only read after saving
const fileArray = window.dotnetRuntime.Module.FS.readFile('Output.pdf');

Conclusion

Spire.PDF for JavaScript provides a practical way to generate PDF files directly in the browser using JavaScript and WebAssembly. The five-step workflow — create, add page, draw, save, download — handles everything from simple text documents to structured invoices with tables and totals. You can apply for a 30-day free license to evaluate all features before purchasing.