dom-to-vector-pdf 1.0.0 → 1.0.2

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2025 XZ
+Copyright (c) 2025 xzboss
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -1,2 +1,117 @@
 # dom-to-vector-pdf
-DOM转矢量PDF
+
+A tool for converting DOM elements to vector PDFs using jsPDF, dom-to-svg and svg2pdf.js.
+
+## Installation
+
+```bash
+npm install dom-to-vector-pdf
+```
+
+## Configuration Options
+
+### Export Options
+
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| selector | string | required | CSS selector for DOM element 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
+
+```javascript
+import vectorInstance from "dom-to-vector-pdf";
+
+export const ExportToPDF = (selector, title) => {
+  vectorInstance.registerFont([
+    {
+      font: PingFangRegular,
+      fontId: "PingFang",
+      fontWeight: "400",
+      fontStyle: "normal",
+    },
+    {
+      font: PingFangHeavy,
+      fontId: "PingFang",
+      fontWeight: "700",
+      fontStyle: "normal",
+    },
+  ]);
+  vectorInstance.exportPDF({
+    selector,
+    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

package/README.zh-CN.md

@@ -0,0 +1,117 @@
+# dom-to-vector-pdf
+
+一个使用 jsPDF、dom-to-svg 和 svg2pdf.js 将 DOM 元素转换为矢量 PDF 的工具。
+
+## 安装
+
+```bash
+npm install dom-to-vector-pdf
+```
+
+## 配置选项
+
+### 导出选项
+
+| 选项 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| selector | string | 必填 | 要导出的DOM元素的CSS选择器 |
+| filename | string | 必填 | 导出的PDF文件名 |
+| orientation | 'portrait' \| 'landscape' | 'portrait' | PDF方向 |
+| unit | 'px' | 测量单位（只支持px） |
+| beforeSvgConvert | (svgElement: SVGElement) => void | - | SVG元素处理钩子 |
+| beforePdfSave | (pdf: jsPDF) => void | - | PDF文档处理钩子 |
+
+### 字体选项
+
+| 选项 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| font | string | 必填 | 字体文件路径或URL |
+| fontId | string | 必填 | 字体ID |
+| fontStyle | 'normal' \| 'italic' | 'normal' | 字体样式 |
+| fontWeight | string \| number | - | 字体粗细(100-900) |
+
+### 生命周期钩子
+
+| 钩子 | 类型 | 说明 |
+|------|------|------|
+| afterDomClone | (clonedElement: HTMLElement) => void | DOM克隆后触发 |
+| beforeSvgConvert | (svgElement: SVGElement) => void | SVG转换前触发 |
+| beforePdfGenerate | (pdf: jsPDF) => void | PDF生成前触发 |
+| beforePdfSave | (pdf: jsPDF) => void | PDF保存前触发 |
+
+## 基本用法
+
+```javascript
+import vectorInstance from "dom-to-vector-pdf";
+
+export const ExportToPDF = (selector, title) => {
+  vectorInstance.registerFont([
+    {
+      font: PingFangRegular,
+      fontId: "PingFang",
+      fontWeight: "400",
+      fontStyle: "normal",
+    },
+    {
+      font: PingFangHeavy,
+      fontId: "PingFang",
+      fontWeight: "700",
+      fontStyle: "normal",
+    },
+  ]);
+  vectorInstance.exportPDF({
+    selector,
+    filename: title,
+  });
+};
+```
+
+## 特性
+
+- 将DOM元素转换为矢量PDF
+- 保持矢量图形和文本
+- 支持SVG元素
+- 保持字体样式和粗细
+- 处理复杂布局
+
+## 待办事项
+
+### DOM克隆
+- [ ] 内联样式处理
+  - [ ] 样式优先级管理
+- [ ] Shadow DOM支持
+- [ ] iframe支持
+
+### 图标字体
+- [ ] 当前实现使用16px作为基础字体大小进行缩放
+- [ ] 需要改进图标字体大小处理
+
+### SVG支持
+- [ ] 目前仅支持属性名与元素属性匹配的内联样式
+- [ ] 需要增强SVG样式处理
+
+### 文本对齐
+- [ ] 文本位置略低于背景
+  - 当前解决方案：将所有文本向上偏移3像素
+
+### 不支持的功能
+- [ ✅ ] 图片背景导出
+- [ ] Canvas导出
+- [ ] 其他单位支持
+
+### 字体支持
+- [ ] 目前仅限于单个字体系列
+  - 注册时字体ID必须保持一致
+- [ ] 需要添加多字体支持
+- [ ] 考虑WOFF2格式兼容性
+
+### 图片导出
+- [ ] 图片导出质量需要改进
+
+## 贡献
+
+欢迎贡献！请随时提交Pull Request。
+
+## 许可证
+
+MIT 

package/dist/index.d.ts

@@ -0,0 +1,23 @@
+import type { ExportPdfOptions, FontRegisterOptions, LifecycleHooks } from './types';
+export type { ExportPdfOptions, FontRegisterOptions, LifecycleHooks } from './types';
+/**
+ * DOM to PDF tool instance
+ */
+declare class DOMToPDF {
+    private converter;
+    private fontManager;
+    constructor();
+    /**
+     * Export PDF
+     * @param options Export configuration
+     * @param hooks Lifecycle hooks
+     */
+    exportPDF(options: ExportPdfOptions, hooks?: LifecycleHooks): Promise<void>;
+    /**
+     * Register font
+     * @param options Font registration options
+     */
+    registerFont(options: FontRegisterOptions | FontRegisterOptions[]): void;
+}
+export declare const instance: DOMToPDF;
+export default instance;

package/dist/index.esm.js

@@ -0,0 +1,349 @@
+import { jsPDF } from 'jspdf';
+import { elementToSVG } from 'dom-to-svg';
+import { svg2pdf } from 'svg2pdf.js';
+
+/**
+ * Convert font weight
+ * @param weight Font weight
+ * @returns Normalized font weight
+ */
+function normalizeFontWeight(weight) {
+    const weightMap = {
+        normal: '400',
+        bold: '700',
+    };
+    return weightMap[weight?.toString() || 'normal'] || weight?.toString() || '400';
+}
+/**
+ * Calculate SVG symbol scale ratio
+ */
+function calculateSymbolScale(symbol) {
+    const viewBox = symbol.getAttribute('viewBox');
+    if (!viewBox) {
+        return 1;
+    }
+    const [, , width] = viewBox.split(' ').map(Number);
+    // 1em 通常计算的像素值
+    const expectedSize = 16;
+    return expectedSize / width;
+}
+/**
+ * Symbol element in inline SVG
+ */
+function inlineSvgSymbols(element) {
+    const uses = element.querySelectorAll('use');
+    uses.forEach((use) => {
+        const href = use.getAttribute('xlink:href') || use.getAttribute('href');
+        if (!href) {
+            return;
+        }
+        const symbol = document.querySelector(href);
+        if (!symbol) {
+            return;
+        }
+        // Create <g> container preserving all attributes
+        const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+        // Copy all attributes except href
+        Array.from(use.attributes).forEach((attr) => {
+            if (attr.name !== 'xlink:href' && attr.name !== 'href') {
+                g.setAttribute(attr.name, attr.value);
+            }
+        });
+        // Insert scaled path
+        g.innerHTML = `
+        <g transform="scale(${calculateSymbolScale(symbol)})">
+          ${symbol.innerHTML}
+        </g>
+      `;
+        // Replace and preserve parent SVG dimensions
+        use.replaceWith(g);
+    });
+}
+/**
+ * Recursively process SVG element font attributes
+ */
+function processSvgFonts(element, fontManager) {
+    if (element.classList.contains('no-print')) {
+        element.remove();
+        return;
+    }
+    if (element.tagName === 'text' || element.tagName === 'tspan') {
+        // Parse style string
+        const style = element.getAttribute('style');
+        if (style) {
+            style.split(';').forEach((css) => {
+                const [key, value] = css.split(':');
+                if (!key)
+                    return;
+                element.setAttribute(key.trim(), value?.trim());
+            });
+        }
+        element.removeAttribute('style');
+        const fontFamily = element.getAttribute('font-family');
+        const fontWeight = element.getAttribute('font-weight');
+        // TODO
+        if (fontFamily) {
+            element.setAttribute('font-family', fontManager.getFontId());
+            element.setAttribute('font-weight', normalizeFontWeight(fontWeight));
+        }
+        // Adjust y coordinate
+        const y = element.getAttribute('y');
+        if (y) {
+            element.setAttribute('y', String(Number(y) - 3));
+        }
+    }
+    // Recursively process child elements
+    Array.from(element.children).forEach((child) => processSvgFonts(child, fontManager));
+}
+
+/**
+ * Font manager
+ */
+class FontManager {
+    constructor() {
+        this.registeredFonts = new Map();
+        this.callbackList = [];
+        this.fontId = 'PingFang';
+    }
+    /**
+     * Get font ID
+     */
+    getFontId() {
+        return this.fontId;
+    }
+    /**
+     * Get font manager singleton
+     */
+    static getInstance() {
+        if (!FontManager.instance) {
+            FontManager.instance = new FontManager();
+        }
+        return FontManager.instance;
+    }
+    /**
+     * Set PDF instance
+     */
+    setPdfInstance(pdf) {
+        this.pdfInstance = pdf;
+        this.callbackList.forEach((callback) => callback());
+        this.callbackList = [];
+    }
+    /**
+     * Register font
+     */
+    registerFont(options) {
+        this.fontId = options.fontId;
+        this.addFontToPdf(options);
+    }
+    /**
+     * Batch register fonts
+     */
+    registerFonts(options) {
+        options.map((font) => this.registerFont(font));
+    }
+    /**
+     * Add font to PDF instance
+     */
+    addFontToPdf(options) {
+        if (!this.pdfInstance) {
+            this.callbackList.push(() => this.addFontToPdf(options));
+            return;
+        }
+        this.pdfInstance.addFont(options.font, options.fontId, options.fontStyle || 'normal', normalizeFontWeight(options.fontWeight));
+    }
+}
+
+const isNullOrUndefined = (value) => {
+    return value === null || value === undefined;
+};
+
+/**
+ * DOM to PDF Converter
+ */
+class DomToPdfConverter {
+    constructor() {
+        this.resourceQueue = [];
+        this.exportOptions = null;
+        this.fontManager = FontManager.getInstance();
+    }
+    setExportOptions(options) {
+        this.exportOptions = options;
+    }
+    /**
+     * Export PDF
+     */
+    async exportPdf(options, hooks) {
+        try {
+            this.setExportOptions(options);
+            // 1. Get and clone DOM element
+            const { element, parentElement } = this.prepareDomElement(options.selector);
+            console.log(1);
+            // Call lifecycle hook
+            hooks?.afterDomClone?.(element);
+            console.log(2);
+            // 2. Process SVG symbols
+            inlineSvgSymbols(element);
+            console.log(3);
+            // 3. Load resource
+            await this.loadResource(element);
+            console.log(4);
+            // 4. Convert to SVG
+            const svgDocument = elementToSVG(element);
+            parentElement?.removeChild(element);
+            console.log(5);
+            const svgElement = svgDocument.documentElement;
+            document.body.appendChild(svgElement);
+            this.prepareSvgElement(svgElement);
+            console.log(6);
+            // 5. Process SVG fonts
+            processSvgFonts(svgElement, this.fontManager);
+            console.log(7);
+            // Call lifecycle hook
+            hooks?.beforeSvgConvert?.(svgElement);
+            console.log(8);
+            // 6. Create PDF document
+            const pdf = this.createPdfDocument(svgElement);
+            this.fontManager.setPdfInstance(pdf);
+            console.log(9);
+            // 7. Draw SVG content to PDF
+            await this.renderSvgToPdf(svgElement, pdf);
+            console.log(10);
+            // Call lifecycle hook
+            hooks?.beforePdfGenerate?.(pdf);
+            hooks?.beforePdfSave?.(pdf);
+            console.log(11);
+            // 8. Save PDF
+            pdf.save(`${options.filename}.pdf`);
+            console.log(12);
+            // 9. Clean up temporary elements
+            svgElement.remove();
+            this.fontManager.setPdfInstance(null);
+            console.log(13);
+        }
+        catch (error) {
+            console.error('生成PDF失败:', error);
+            throw error;
+        }
+    }
+    /**
+     * Prepare DOM element
+     */
+    prepareDomElement(selector) {
+        const originElement = document.querySelector(selector);
+        if (!originElement) {
+            throw new Error(`Element with selector "${selector}" not found`);
+        }
+        const parentElement = originElement.parentElement;
+        const element = originElement.cloneNode(true);
+        // Set cloned element styles
+        element.style.cssText = `
+          z-index: -999999;
+          position: absolute;
+          top: 0;
+          left: 0;
+        `;
+        parentElement?.appendChild(element);
+        return { element, parentElement };
+    }
+    /**
+     * Prepare SVG element
+     */
+    prepareSvgElement(svgElement) {
+        svgElement.style.cssText = `
+      all: unset;
+      width: 100%;
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: -999999;
+    `;
+        // Add XML declaration
+        const utf8Declaration = document.createTextNode('<?xml version="1.0" encoding="utf-8"?>');
+        svgElement.insertBefore(utf8Declaration, svgElement.firstChild);
+    }
+    /**
+     * Create PDF document
+     */
+    createPdfDocument(svgElement) {
+        const { width, height } = svgElement.getBoundingClientRect();
+        return new jsPDF({
+            orientation: 'portrait',
+            unit: 'px',
+            format: [width, height],
+        });
+    }
+    /**
+     * Render SVG to PDF
+     */
+    async renderSvgToPdf(svgElement, pdf) {
+        await svg2pdf(svgElement, pdf, {
+            x: 0,
+            y: 0,
+            width: pdf.internal.pageSize.getWidth(),
+            height: pdf.internal.pageSize.getHeight(),
+        });
+    }
+    /**
+     * Load resource
+     */
+    async loadResource(element) {
+        this.resourceQueue = [];
+        const resources = element.querySelectorAll('img');
+        resources.forEach((resource) => {
+            this.resourceQueue.push(new Promise((resolve) => {
+                let done = false;
+                resource.onload = () => {
+                    done = true;
+                    resolve(resource.src);
+                };
+                resource.onerror = () => {
+                    done = true;
+                    resolve();
+                };
+                setTimeout(() => {
+                    if (!done) {
+                        resolve(void 0);
+                    }
+                }, isNullOrUndefined(this.exportOptions?.resourceTimeout)
+                    ? 5000
+                    : this.exportOptions?.resourceTimeout);
+            }));
+        });
+        console.log(this.resourceQueue, 'this.resourceQueue');
+        return Promise.allSettled(this.resourceQueue);
+    }
+}
+
+/**
+ * DOM to PDF tool instance
+ */
+class DOMToPDF {
+    constructor() {
+        this.converter = new DomToPdfConverter();
+        this.fontManager = FontManager.getInstance();
+    }
+    /**
+     * Export PDF
+     * @param options Export configuration
+     * @param hooks Lifecycle hooks
+     */
+    async exportPDF(options, hooks) {
+        await this.converter.exportPdf(options, hooks);
+    }
+    /**
+     * Register font
+     * @param options Font registration options
+     */
+    registerFont(options) {
+        if (Array.isArray(options)) {
+            this.fontManager.registerFonts(options);
+        }
+        else {
+            this.fontManager.registerFont(options);
+        }
+    }
+}
+// Export singleton instance
+const instance = new DOMToPDF();
+
+export { instance as default, instance };