dom-to-vector-pdf

A tool for converting DOM elements to vector PDFs using jsPDF, dom-to-svg and svg2pdf.js.

Installation

npm install dom-to-vector-pdf

Configuration Options

Export Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | id | string | required | DOM element ID to export | | filename | string | required | Exported PDF file name | | orientation | 'portrait' | 'landscape' | 'portrait' | PDF orientation | | unit | 'px' | Unit for measurements(only px) | | beforeSvgConvert | (svgElement: SVGElement) => void | - | Custom hook for processing SVG elements | | beforePdfSave | (pdf: jsPDF) => void | - | Custom hook for processing PDF document |

Font Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | font | string | required | Font file path or URL | | fontId | string | required | Font ID for identifying the font | | fontStyle | 'normal' | 'italic' | 'normal' | Font style | | fontWeight | string | number | - | Font weight (100-900) |

Lifecycle Hooks

| Hook | Type | Description | |------|------|-------------| | afterDomClone | (clonedElement: HTMLElement) => void | Triggered after DOM clone | | beforeSvgConvert | (svgElement: SVGElement) => void | Triggered before SVG conversion | | beforePdfGenerate | (pdf: jsPDF) => void | Triggered before PDF generation | | beforePdfSave | (pdf: jsPDF) => void | Triggered before PDF save |

Basic Usage

import vectorInstance from "dom-to-vector-pdf";

export const ExportToPDF = (id, title) => {
  vectorInstance.registerFont([
    {
      font: PingFangRegular,
      fontId: "PingFang",
      fontWeight: "400",
      fontStyle: "normal",
    },
    {
      font: PingFangHeavy,
      fontId: "PingFang",
      fontWeight: "700",
      fontStyle: "normal",
    },
  ]);
  vectorInstance.exportPDF({
    id,
    filename: title,
  });
};

Features

• Converts DOM elements to vector PDFs
• Preserves vector graphics and text
• Supports SVG elements
• Maintains font styles and weights
• Handles complex layouts

Todo List

DOM Cloning

• [ ] Inline style handling
  • [ ] Style priority management
• [ ] Shadow DOM support
• [ ] iframe support

Icon Fonts

• [ ] Current implementation uses 16px as base font size for scaling
• [ ] Need to improve icon font size handling

SVG Support

• [ ] Currently only supports inline styles where property names match element attributes
• [ ] Need to enhance SVG style handling

Text Alignment

• [ ] Text appears slightly lower than background
  • Current workaround: Shift all text up by 3 pixels

Unsupported Features

• [ ✅ ] Image background export
• [ ] Canvas export
• [ ] other unit

Font Support

• [ ] Currently limited to single font family
  • Font ID must be consistent during registration
• [ ] Need to add support for multiple fonts
• [ ] Consider WOFF2 format compatibility

Image Export

• [ ] Image export quality needs improvement

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT