How to Show Hidden Elements (display: none) in PDF with html-to-pdfmake

Enable the showHidden option set to true when calling htmlToPdfmake to include elements with display:none or visibility:hidden in the generated PDF.

The html-to-pdfmake library converts HTML strings into PDFMake-compatible document definitions, but it automatically strips out elements hidden via CSS. When you need to show hidden elements in PDF output from the aymkdn/html-to-pdfmake repository, you must explicitly configure the parser to bypass its default visibility filters.

How html-to-pdfmake Filters Hidden Elements by Default

By default, the library inspects every element's computed styles during the parsing phase. In index.js, the parseElement function contains a guard clause that checks for display:none or visibility:hidden properties. When the showHidden flag is disabled (its default state), the parser returns early and excludes these nodes from the PDF definition.

The constructor initializes this option at lines 14-19 of index.js, defaulting this.showHidden to false. Consequently, any HTML containing hidden elements will produce PDFs that omit that content unless you explicitly override this behavior.

Enabling the showHidden Option

To show hidden elements in your PDF output, pass { showHidden: true } as the second argument to htmlToPdfmake. This configuration instructs the parser to skip the visibility guard in parseElement (lines 181-184 of index.js) and process hidden nodes as regular content.

When running in Node.js environments, you must also provide a window object (typically from jsdom) alongside the showHidden flag, as the parser requires a DOM implementation to compute styles.

Browser Implementation

In browser environments, the global window object is automatically available. Include the showHidden: true option to render elements with display:none or visibility:hidden:

<script src="https://cdn.jsdelivr.net/npm/pdfmake@latest/build/pdfmake.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/pdfmake@latest/build/vfs_fonts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/html-to-pdfmake/browser.js"></script>
<script>
  const html = `
    <div style="display:none">Hidden text</div>
    <p>Visible text</p>
  `;
  
  // Enable hidden elements in PDF output
  const pdfDef = htmlToPdfmake(html, { showHidden: true });
  pdfMake.createPdf({ content: pdfDef }).download('with-hidden.pdf');
</script>

Node.js Implementation

For server-side PDF generation, combine showHidden: true with a window object from jsdom:

npm install html-to-pdfmake jsdom pdfmake

const pdfMake = require('pdfmake/build/pdfmake');
const pdfFonts = require('pdfmake/build/vfs_fonts');
const htmlToPdfmake = require('html-to-pdfmake');
const { JSDOM } = require('jsdom');

// Initialize PDFMake fonts
pdfMake.vfs = pdfFonts;

// Create DOM environment
const { window } = new JSDOM('');

const html = `
  <div style="display:none">Hidden text</div>
  <p>Visible text</p>
`;

// Generate PDF definition with hidden elements enabled
const pdfDef = htmlToPdfmake(html, { window, showHidden: true });

pdfMake.createPdf({ content: pdfDef }).getBuffer((buffer) => {
  require('fs').writeFileSync('output.pdf', buffer);
});

Technical Implementation Details

The visibility filtering logic resides in the parseElement method of index.js. When processing element nodes, the parser evaluates the computed CSS styles at lines 181-184:

if (!this.showHidden && (element.style.display === 'none' || element.style.visibility === 'hidden')) {
  return;
}

This guard clause only executes when this.showHidden is falsy. By setting the option to true, you bypass this return statement, allowing the parser to continue processing the element's children and text content. The unit tests in test/unit.js (lines 1076-1083) verify this behavior by asserting that hidden <div> elements appear in the output array when the flag is enabled.

Summary

• Default behavior: html-to-pdfmake automatically excludes elements with display:none or visibility:hidden from PDF output.
• Solution: Pass { showHidden: true } in the options object when calling htmlToPdfmake.
• Node.js requirement: Always provide a window object (from jsdom) alongside the showHidden flag in server environments.
• Source location: The filtering logic resides in index.js at lines 181-184 within the parseElement function.

Frequently Asked Questions

Does showHidden affect elements with visibility:hidden as well as display:none?

Yes. The showHidden option controls both CSS properties. In index.js lines 181-184, the parser checks for element.style.display === 'none' OR element.style.visibility === 'hidden'. When showHidden is true, neither condition triggers the exclusion, so both types of hidden elements render in the final PDF.

Can I use showHidden in Node.js without installing jsdom?

No. The html-to-pdfmake library requires a DOM implementation to parse HTML and compute styles. In Node.js environments, you must provide a window object, typically created via jsdom. The showHidden option alone is insufficient because the parser needs access to computed styles to determine which elements are hidden.

Will enabling showHidden slow down PDF generation?

The performance impact is negligible for most documents. Enabling showHidden simply bypasses an early return statement in the parseElement function. The parser processes hidden elements exactly like visible ones, so the only additional cost is rendering content that would otherwise be skipped. For documents with thousands of hidden elements, file size and generation time may increase proportionally.

How do I hide specific elements again if I set showHidden to true?

If you enable showHidden globally but need to exclude specific elements, filter them manually before passing HTML to the converter. Remove unwanted nodes using DOM manipulation (e.g., element.remove() or element.style.display = 'none' followed by recomputing styles) or use conditional logic in your HTML generation. The library does not provide per-element overrides for the showHidden flag.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}