Hello
` element with specific attributes into a PDFMake QR code node, as demonstrated in the official README:
```javascript
const html = `
texto in code
`;
const pdfDef = htmlToPdfmake(html, {
customTag: function (params) {
let { element, ret, parents } = params;
if (ret.nodeName === 'CODE') {
// Apply inherited styles first using the parser's internal method
ret = this.applyStyle({
ret,
parents: parents.concat([element])
});
// Extract the text content for the QR code data
ret.qr = ret.text[0].text;
// Convert to QR-specific node when typecode matches
if (element.getAttribute('typecode') === 'QR') {
delete ret.text; // Remove standard text property
ret.nodeName = 'QR'; // Signal PDFMake to render as QR
ret.style = (ret.style || []).concat('html-qr');
}
}
return ret;
}
});
```
This example leverages `this.applyStyle()` to process ancestor CSS, then repurposes the text content as `ret.qr`—a special PDFMake property for QR codes—while changing the `nodeName` to ensure proper rendering.
### Using customTag in Node.js
Implement the callback in a server-side script to handle custom badge elements:
```javascript
const fs = require('fs');
const htmlToPdfmake = require('html-to-pdfmake');
const html = fs.readFileSync('sample.html', 'utf8');
const pdfDef = htmlToPdfmake(html, {
customTag: ({ element, ret }) => {
// Convert elements into styled text fragments
if (element.nodeName === 'BADGE') {
ret.text = element.textContent.trim();
ret.style = ['badge'];
ret.color = element.getAttribute('color') || 'blue';
}
return ret;
}
});
```
The same `customTag` approach functions identically in both browser and Node.js environments, requiring only that you provide the function within the options object passed to the converter.
## When to Use customTag
Implement the `customTag` function when you need to:
- **Support non-standard HTML tags** such as web components (``, ``) or framework-specific markup that the library does not natively recognize.
- **Extend existing standard tags** with specialized behavior, such as converting `` blocks into QR codes or barcodes based on attribute flags.
- **Inject PDFMake-specific properties** that have no HTML equivalent, including `qr`, `canvas`, `svg`, or advanced layout configurations.
- **Modify node styling dynamically** based on ancestor context or custom data attributes before the parser finalizes the node definition.
## Summary
- The `customTag` callback in `aymkdn/html-to-pdfmake` handles HTML tags without native converters, defined in [`index.js`](https://github.com/aymkdn/html-to-pdfmake/blob/main/index.js) at lines 88-91.
- It receives an object containing `element` (DOM node), `parents` (ancestor array), and `ret` (current PDFMake node), and must return the modified `ret` object.
- The callback executes after generic processing but before final style reduction, allowing you to modify base properties or replace the node entirely.
- You can access parser methods like `this.applyStyle()` through the bound context to resolve inherited CSS before applying custom logic.
- Use cases include QR code generation, custom web component support, and injecting PDFMake-specific attributes unavailable in standard HTML.
## Frequently Asked Questions
### What parameters does the customTag function receive?
The function receives a single object with three properties: `element` (the raw DOM element with properties like `nodeName` and `textContent`), `parents` (an array of ancestor elements for context and style inheritance), and `ret` (the PDFMake node object generated so far). You must return the `ret` object to continue processing.
### Can I use customTag to modify existing standard HTML tags?
Yes. While `customTag` primarily handles tags without native handlers, it executes for all elements after their initial processing. You can intercept standard tags like `` or `` to modify their `ret` properties, add PDFMake-specific attributes, or completely replace their output structure based on custom logic.
### How do I access the parser instance methods inside customTag?
The library calls `customTag` using `.call(this, params)`, binding the function to the parser instance. This binding allows you to access internal methods such as `this.applyStyle({ ret, parents })` to resolve inherited CSS styles before applying your custom transformations, as shown in the QR code example from the README.
### Does customTag work in both browser and Node.js environments?
Yes. The `customTag` option functions identically regardless of environment. Whether running in a browser with bundled JavaScript or in a Node.js script using `require('html-to-pdfmake')`, you simply pass the function within the options object. The only requirement is that the HTML string provided to `htmlToPdfmake()` is valid and parseable in your target environment.