How to Ignore Specific CSS Styles During HTML-to-PDFMake Conversion

Use the ignoreStyles array option when calling htmlToPdfMake() to filter out unwanted CSS properties before they reach the PDF definition.

When converting HTML to PDFMake definitions using the aymkdn/html-to-pdfmake library, you often need to sanitize the output by removing certain CSS properties that conflict with your PDF styling requirements. The library provides a dedicated ignoreStyles option that lets you selectively filter CSS declarations during the conversion process, ensuring only permitted styles appear in the final document.

Using the ignoreStyles Option to Filter CSS Properties

Basic Syntax

The ignoreStyles option accepts an array of CSS property names as strings. When the parser encounters these properties in inline styles or computed styles, it skips them entirely.

const htmlToPdfMake = require('html-to-pdfmake');

const html = `
  <p style="color:red; font-size:20px; margin:10px;">
    This paragraph keeps the margin but drops color and font-size.
  </p>
`;

const pdfDef = htmlToPdfMake(html, {
  ignoreStyles: ['color', 'font-size']
});

In this example, the generated PDF definition retains the margin but strips color and font-size, causing the text to render with PDFMake defaults.

Implementation in the Source Code

According to the aymkdn/html-to-pdfmake source code, the filtering mechanism operates in two stages within index.js.

First, the constructor validates and stores your ignore list (lines 50–51):

this.ignoreStyles = (options && Array.isArray(options.ignoreStyles) ? options.ignoreStyles : []);

Second, during style parsing in the parseStyle method (lines 1003–1009), the code checks each CSS property against this array before processing:

if (this.ignoreStyles.indexOf(key) === -1) {
    // …switch handling for supported properties…
}

If the property name exists in ignoreStyles, the condition evaluates to false and the property is omitted from the final PDFMake definition.

Common Scenarios for Ignoring CSS Styles

Different use cases require filtering specific categories of CSS properties to achieve consistent PDF output.

Enforcing Monochrome Output

To remove all color information including text and background colors:

ignoreStyles: ['color', 'background-color', 'fillColor']

This prevents any color declarations from reaching the PDF definition, resulting in black text and transparent backgrounds.

Standardizing Typography

To prevent font-weight and style variations that might require unavailable custom fonts:

ignoreStyles: ['font-weight', 'font-style']

This ensures text appears with the default PDFMake font weight and style, avoiding bold or italic fonts that may not be embedded in your PDF.

Auto-Sizing Layouts

To let PDFMake calculate dimensions instead of using HTML-specified pixel values:

ignoreStyles: ['width', 'height', 'max-width', 'max-height']

This allows PDFMake’s intrinsic layout engine to determine element sizing based on content and page constraints.

Advanced Code Examples

Ignoring a Single Property

When you need to strip only one specific declaration, such as text color:

const def = htmlToPdfMake('<span style="color:#ff0000;">Red text</span>', {
  ignoreStyles: ['color']
});
// PDFMake output: { text: 'Red text' } - no color field present

Filtering Multiple Declarations

To remove several unrelated properties simultaneously:

const def = htmlToPdfMake(`
  <div style="margin:20px; color:#00f; font-size:24px;">
    Sample
  </div>
`, {
  ignoreStyles: ['color', 'font-size', 'margin']
});
// Result: Plain text node without the filtered styles

Combining with defaultStyles

When you want to ignore colors completely—including those defined in your default configuration:

const def = htmlToPdfMake('<p class="highlight">Hello</p>', {
  defaultStyles: { p: { color: 'green' } },
  ignoreStyles: ['color']
});
// The paragraph renders in PDFMake default (black) because color is filtered out

Even though defaultStyles specifies green, the color property is intercepted and removed during parsing, so the text renders with the PDF engine default.

Summary

• Supply an ignoreStyles array containing CSS property names (e.g., ['color', 'width']) to the htmlToPdfMake() function options.
• The constructor validates this array in index.js (lines 50–51) and the parser applies the filter during style processing (lines 1003–1009).
• Ignored properties are skipped entirely, allowing PDFMake defaults or remaining styles to take precedence.
• This feature works with inline styles and, when combined with defaultStyles, can override default color and font specifications.

Frequently Asked Questions

Can I use wildcards or regular expressions in the ignoreStyles array?

No, the implementation uses strict string comparison via indexOf(). Each CSS property name must be listed explicitly as a full string match. For example, use 'font-size' rather than 'font-*' or /font-.*/.

Does ignoreStyles remove CSS classes or only inline style properties?

The ignoreStyles option filters individual CSS property names, not class selectors. It applies to all style declarations the parser encounters, whether from inline style attributes or computed from classes, but it operates at the property level after CSS parsing occurs in index.js.

What happens if I ignore layout properties like width or height?

When you include dimensional properties in ignoreStyles, PDFMake uses its intrinsic sizing algorithms instead of the HTML-specified values. This is useful for allowing automatic column widths or page-fitting calculations rather than fixed pixel dimensions.

Will ignoreStyles override the defaultStyles option?

Yes. If you define a style in defaultStyles (such as color: 'green') but also include that property name in ignoreStyles, the property is filtered out during the parsing stage (line 1003–1009 in index.js) and never reaches the final PDF definition, effectively nullifying the default.

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