#dom-to-vector-pdf

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

#Online Demo

Online Demo

#Installation

npm install dom-to-vector-pdf

#Basic Usage

import fontTTF from '@/assets/your-font.ttf'

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

export const ExportToPDF = (selector, title) => {
  vectorInstance.registerFont([
    {
      font: fontTTF,
      fontWeight: "400",
      fontStyle: "normal",
    },
    {
      font: fontTTF,
      fontWeight: "700",
      fontStyle: "normal",
    },
  ]);
  vectorInstance.exportPDF({
    selector,
    filename: title,
  });
};

#Configuration Options

#Export Options

#Font Options

#Lifecycle Hooks

#Features

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

Supported styles can be seen in the online demo.

#FAQ

1. Only TTF fonts are supported. You can use a local project import or an online CDN URL.
2. Font files can be subsetted. A subset containing common characters is usually under 1MB. ⚠️⚠️⚠️ Many online subsetting tools omit the space character, which causes rendering to fail. It is recommended to use a library for subsetting. Common Chinese character sets are available on the Chinese Character Sets page.
3. Export speed is affected by font size and network speed. Resources must finish loading before the export begins — the larger and more numerous the fonts, the slower the export and the larger the resulting PDF.

#Pipeline

This library is built on dom-to-svg and svg2pdf. The flow is DOM → SVG → PDF, so there is some SVG serialization overhead, but it generally does not affect performance. Export is typically fast; if it is slow, the font file is likely too large and should be subsetted.

#Contributing

#Setup

pnpm i

#Run demo

pnpm dev:vue

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

#License

MIT