`, `
` to `

` - ``, ``, ``, ``, ``, `
`, `
` - `
`

### Inline Elements
- ``, ``, ``, ``, ``, ``
- `` (with support for external and internal links)
- `_{`, `^{`
- ``, `
`, ``

### CSS Properties Support

The library handles these CSS properties:

| Property | Support Details |
|----------|----------------|
| `background-color` | Good support |
| `border` | Including individual borders |
| `color` | Good support, including opacity |
| `font-family` | Basic support |
| `font-style` | Support for `italic` |
| `font-weight` | Support for `bold` |
| `height` | For tables and images |
| `width` | For tables and images |
| `margin` | Including individual margins |
| `text-align` | Good support |
| `text-decoration` | Support for `underline`, `line-through` |
| `text-indent` | Basic support |
| `white-space` | Support for `nowrap`, `pre`, `break-spaces` |
| `line-height` | Basic support |
| `list-style-type` | Good support |

## Configuration Options

The `htmlToPdfmake` function accepts an options object as its second parameter:

```javascript
const options = {
  defaultStyles: {
    // Override default element styles that are defined below
    b: {bold:true},
    strong: {bold:true},
    u: {decoration:'underline'},
    del: {decoration:'lineThrough'},
    s: {decoration: 'lineThrough'},
    em: {italics:true},
    i: {italics:true},
    h1: {fontSize:24, bold:true, marginBottom:5},
    h2: {fontSize:22, bold:true, marginBottom:5},
    h3: {fontSize:20, bold:true, marginBottom:5},
    h4: {fontSize:18, bold:true, marginBottom:5},
    h5: {fontSize:16, bold:true, marginBottom:5},
    h6: {fontSize:14, bold:true, marginBottom:5},
    a: {color:'blue', decoration:'underline'},
    strike: {decoration: 'lineThrough'},
    p: {margin:[0, 5, 0, 10]},
    ul: {marginBottom:5,marginLeft:5},
    table: {marginBottom:5},
    th: {bold:true, fillColor:'#EEEEEE'}
  },
  tableAutoSize: false,  // Enable automatic table sizing
  imagesByReference: false,  // Handle images by reference
  removeExtraBlanks: false,  // Remove extra whitespace
  removeTagClasses: false,  // Keep HTML tag classes
  window: window,  // Required for Node.js usage
  ignoreStyles: [],  // Style properties to ignore
  fontSizes: [10, 14, 16, 18, 20, 24, 28], // Font sizes for legacy  tag
  customTag: function(params) { /* Custom tag handler */ }
};

const converted = htmlToPdfmake(html, options);
```

### Options Explained

#### defaultStyles

Object to override the default element styling. Useful for consistent document appearance:

```javascript
const options = {
  defaultStyles: {
    h1: { fontSize: 24, bold: true, marginBottom: 10 },
    p: { margin: [0, 5, 0, 10] },
    a: { color: 'purple', decoration: null }
  }
};
```

#### tableAutoSize

Boolean that enables automatic table sizing based on content and CSS properties

Example:
```html
const result = htmlToPdfmake(`
  
    height:100px / width:250px
    height:100px / width:'auto'
  
  
    Here it will use 250px for the width because we have to use the largest col's width
    height:200px / width:'auto'
  
`, { tableAutoSize:true });
```

#### imagesByReference

*For Web browser only, not for Node*

Boolean that enables the images handling by reference instead of embedding. It will automatically load your images in your PDF using the [`{images}` option of PDFMake](https://pdfmake.github.io/docs/document-definition-object/images/).

Using this option will change the output that will return an object with `{content, images}`.

```javascript
const html = ``;
const result = htmlToPdfmake(html, { imagesByReference:true });
// 'result' contains:
//  {
//    "content":[
//      [
//        {
//          "nodeName":"IMG",
//          "image":"img_ref_0",
//          "style":["html-img"]
//        }
//      ]
//    ],
//    "images":{
//      "img_ref_0":"https://picsum.photos/seed/picsum/200"
//    }
//  }

pdfMake.createPdf(result).download();
```

#### customTag

Function to handle custom HTML tags or modify existing tag behavior:

```javascript
const options = {
  customTag: function({ element, ret, parents }) {
    if (element.nodeName === 'CUSTOM-TAG') {
      // Handle custom tag
      ret.text = 'Custom content';
      ret.style = ['custom-style'];
    }
    return ret;
  }
};
```

Example with a QR code generator:

```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](https://github.com/Aymkdn/html-to-pdfmake/issues/145) 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

### Custom Styling with data-pdfmake

Apply PDFMake-specific properties using the `data-pdfmake` attribute:

```html


  
    Fixed Width
    Fill Space
    Auto Width
  




```

### Page Breaks

Control page breaks using CSS classes and PDFMake's [`pageBreakBefore`](https://pdfmake.github.io/docs/document-definition-object/page/):

```javascript
const html = `
  
    First Page
    Second Page
  
`;

const docDefinition = {
  content: htmlToPdfmake(html),
  pageBreakBefore: function(node) {
    return node.style && node.style.includes('page-break');
  }
};
```

### Image Handling

Support for various image formats and references:

```html










```

For Base64 encoded image, please refer to the [PDFMake documentation](https://pdfmake.github.io/docs/document-definition-object/images/) and [here](https://github.com/Aymkdn/html-to-pdfmake/issues/109#issue-932953144). And you can check [this Stackoverflow question](https://stackoverflow.com/questions/934012/get-image-data-in-javascript/42916772#42916772) to know the different ways to get a base64 encoded content from an image.

## Common Use Cases

### Tables with Complex Layouts

```html

  
    
      Header
    
  
  
    
      Cell 1
      Cell 2
    
    
      Cell 3
    
  

```

### Styled Lists

```html

  First item
  Second item
  
    Nested list:
    
      Sub-item a
      Sub-item b
    
  

```

### Links and Anchors

```html}}Visit Website


Jump to Section
Section 1
```

### Columns

PDFMake has a concept of [`columns`](https://pdfmake.github.io/docs/0.1/document-definition-object/columns/). We use `` to identify it.
  
Example to center a table in the page:
```html

  
  
    Table
Centered
  
  

```

## Examples

You can find more examples in [example.js](example.js) which will create [example.pdf](example.pdf):

```bash
npm install
node example.js
```

## Donate

You can support my work by [making a donation](https://www.paypal.me/aymkdn), or by visiting my [Github Sponsors page](https://github.com/sponsors/Aymkdn). Thank you!
Sample Document

` to `

First Page

Second Page

Section 1
