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

> Learn how to show hidden elements with display:none in PDF using html-to-pdfmake. Enable showHidden to include hidden content in your generated PDFs. Get started today.

- Repository: [Aymeric/html-to-pdfmake](https://github.com/aymkdn/html-to-pdfmake)
- Tags: how-to-guide
- Published: 2026-02-26

---

**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`](https://github.com/aymkdn/html-to-pdfmake/blob/main/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`](https://github.com/aymkdn/html-to-pdfmake/blob/main/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`](https://github.com/aymkdn/html-to-pdfmake/blob/main/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`:

```html
<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`:

```bash
npm install html-to-pdfmake jsdom pdfmake

```

```javascript
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`](https://github.com/aymkdn/html-to-pdfmake/blob/main/index.js). When processing element nodes, the parser evaluates the computed CSS styles at lines 181-184:

```javascript
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`](https://github.com/aymkdn/html-to-pdfmake/blob/main/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`](https://github.com/aymkdn/html-to-pdfmake/blob/main/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`](https://github.com/aymkdn/html-to-pdfmake/blob/main/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.