Convert HTML to PDFMake format with ease. This library bridges the gap between HTML content and PDFMake document definitions, allowing you to generate PDFs from basic HTML while maintaining based styling and structure.
Note: if you need to convert a complex HTML (e.g. something produced by a Rich Text Editor), check some online solutions, like Doppio, or you could try to convert your HTML to canvas or to an image and then to export it to PDF.
This library will have the same limitation as PDFMake. If you need to verify if a style is supported by PDFMake, you can check its documentation.
Features
- Convert HTML to PDFMake-compatible format
- Preserve basic styling and structure
- Support for tables, lists, images, and more
- Customizable styling options
- Works in both browser and Node.js environments
- Handle nested elements
- Custom tag support
- Image handling with reference support
`javascript
const pdfMake = require('pdfmake/build/pdfmake');
const pdfFonts = require('pdfmake/build/vfs_fonts');
const htmlToPdfmake = require('html-to-pdfmake');
// if you need to run it in a terminal console using "node", then you need the below two lines:
const jsdom = require('jsdom');
const { JSDOM } = jsdom;
// the below line may vary depending on your version of PDFMake
// please, check https://github.com/bpampuch/pdfmake to know how to initialize this library
pdfMake.vfs = pdfFonts;
// if you need to run it in a terminal console using "node", then you need to initiate the "window" object with the below line:
const { window } = new JSDOM('');
// Generate PDF
pdfMake.createPdf(docDefinition).getBuffer((buffer) => {
// when running the command in a terminal console using "node", then we can save the file using the 'fs' native package
require('fs').writeFileSync('output.pdf', buffer);
});
`
`javascript
const html = htmlToPdfMake(texto in code, {
customTag:function(params) {
let ret = params.ret;
let element = params.element;
let parents = params.parents;
switch(ret.nodeName) {
case "CODE": {
ret = this.applyStyle({ret:ret, parents:parents.concat([element])});
ret.qr = ret.text[0].text;
switch(element.getAttribute("typecode")){
case 'QR':
delete ret.text;
ret.nodeName='QR';
if(!ret.style || !Array.isArray(ret.style)){
ret.style = [];
}
ret.style.push('html-qr');
break;
}
break;
}
}
return ret;
}
});
`
#### removeExtraBlanks
Boolean that will remove extra unwanted blank spaces from the PDF.
In some cases these blank spaces could appear. Using this option could be quite resource consuming.
#### showHidden
Boolean to display the hidden elements (display:none) in the PDF.
#### removeTagClasses
Boolean that permits to remove the html-TAG classes added for each node.
#### ignoreStyles
Array of string to define a list of style properties that should not be parsed.
For example, to ignore font-family:
`javascript
htmlToPdfmake("[the html code here]", { ignoreStyles:['font-family'] })
`
#### fontSizes
Array of 7 integers to overwrite the default sizes for the old HTML4 tag .
#### replaceText
Function with two parameters (text and nodes) to modify the text of all the nodes in your HTML document.
Example:
`javascript
const result = htmlToPdfmake(
Lorem Ipsum is simply d-ummy text of th-e printing and typese-tting industry. Lorem Ipsum has b-een the industry's standard dummy text ever since the 1500s
, {
replaceText:function(text, nodes) {
// 'nodes' contains all the parent nodes for the text
return text.replace(/-/g, "\\u2011"); // it will replace any occurrence of '-' with '\\u2011' in "Lorem Ipsum is simply d-ummy text […] dummy text ever since the 1500s"
}
});
`
Advanced Features
$3
Apply PDFMake-specific properties using the data-pdfmake attribute:
`html
Fixed Width
Fill Space
Auto Width
`
$3
Control page breaks using CSS classes and PDFMake's pageBreakBefore:
![]({"url": "https://example.com/image.jpg", "headers": {"Authorization": "Bearer token"}})