Package Exports

dpu-digital-sign

Readme

PDF Digital Sign

A powerful Web Component for viewing, positioning, and configuring digital signatures on PDF documents. Built with TypeScript and PDF.js, this component provides an intuitive interface for managing signature placements across PDF pages.

✨ Features

📄 PDF Viewing - Render and navigate PDF documents with lazy loading
✍️ Signature Positioning - Drag, drop, and resize signature boxes on PDF pages
🎯 Multi-page Support - Place signatures across multiple pages with range selection
👁️ Preview Mode - View signature placements without editing capabilities
🔄 Rotation Support - Handle rotated PDF pages correctly
📏 Multiple Paper Sizes - Support for different paper sizes in the same document
🎨 Customizable - Style customization through external CSS
📦 Lightweight - Built as a native Web Component with minimal dependencies

📦 Installation

npm install dpu-digital-sign

yarn add dpu-digital-sign

🚀 Quick Start

Basic Usage (Vanilla JavaScript/TypeScript)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>PDF Digital Sign Demo</title>
  </head>
  <body>
    <pdf-signature-viewer id="viewer"></pdf-signature-viewer>

    <script type="module">
      import "dpu-digital-sign";

      const viewer = document.querySelector("#viewer");

      // Set configuration
      viewer.setConfig = {
        templateUrl: "https://example.com/document.pdf",
        templateUserSigns: [
          {
            userSignId: "user-001",
            img: "https://example.com/signature1.png",
            priority: 1,
            fullName: "John Doe",
            rotate: 0,
            userSignPos: [],
          },
        ],
        paperSize: { width: 595, height: 842 }, // A4 size in points
      };

      // Listen for export events
      viewer.addEventListener("export", (event) => {
        console.log("Signature data:", viewer.getSignatureData);
      });
    </script>
  </body>
</html>

React Example

import React, { useEffect, useRef } from "react";
import "pdf-digital-sign";

function PdfSignatureComponent() {
  const viewerRef = useRef<any>(null);

  useEffect(() => {
    if (viewerRef.current) {
      viewerRef.current.setConfig = {
        templateUrl: "https://example.com/document.pdf",
        templateUserSigns: [
          {
            userSignId: "user-001",
            img: "https://example.com/signature1.png",
            priority: 1,
            fullName: "John Doe",
            rotate: 0,
            userSignPos: [],
          },
        ],
        paperSize: { width: 595, height: 842 },
      };
    }
  }, []);

  const handleExport = () => {
    if (viewerRef.current) {
      const data = viewerRef.current.getSignatureData;
      console.log("Signature data:", data);
    }
  };

  return (
    <div>
      <pdf-signature-viewer ref={viewerRef}></pdf-signature-viewer>
      <button onClick={handleExport}>Export Data</button>
    </div>
  );
}

export default PdfSignatureComponent;

Vue 3 Example

<template>
  <div>
    <pdf-signature-viewer ref="viewer"></pdf-signature-viewer>
    <button @click="handleExport">Export Data</button>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import "pdf-digital-sign";

const viewer = ref<any>(null);

onMounted(() => {
  if (viewer.value) {
    viewer.value.setConfig = {
      templateUrl: "https://example.com/document.pdf",
      templateUserSigns: [
        {
          userSignId: "user-001",
          img: "https://example.com/signature1.png",
          priority: 1,
          fullName: "John Doe",
          rotate: 0,
          userSignPos: [],
        },
      ],
      paperSize: { width: 595, height: 842 },
    };
  }
});

const handleExport = () => {
  if (viewer.value) {
    const data = viewer.value.getSignatureData;
    console.log("Signature data:", data);
  }
};
</script>

Angular Example

// app.component.ts
import { Component, ViewChild, ElementRef, AfterViewInit } from "@angular/core";
import "pdf-digital-sign";

@Component({
  selector: "app-root",
  template: `
    <pdf-signature-viewer #viewer></pdf-signature-viewer>
    <button (click)="handleExport()">Export Data</button>
  `,
})
export class AppComponent implements AfterViewInit {
  @ViewChild("viewer") viewer!: ElementRef;

  ngAfterViewInit() {
    this.viewer.nativeElement.setConfig = {
      templateUrl: "https://example.com/document.pdf",
      templateUserSigns: [
        {
          userSignId: "user-001",
          img: "https://example.com/signature1.png",
          priority: 1,
          fullName: "John Doe",
          rotate: 0,
          userSignPos: [],
        },
      ],
      paperSize: { width: 595, height: 842 },
    };
  }

  handleExport() {
    const data = this.viewer.nativeElement.getSignatureData;
    console.log("Signature data:", data);
  }
}

📚 API Reference

Properties (Setters)

`setConfig`

Sets the basic configuration for creating signature positions.

interface PdfSignatureConfig {
  templateUrl: string;
  templateUserSigns: TemplateUserSign[];
  paperSize: PaperSize;
}

interface TemplateUserSign {
  userSignId: string;
  img: string;
  rotate: number;
  priority: number;
  userSignPos: SignaturePosition[];
  fullName: string;
}

interface PaperSize {
  width: number; // in points (1 point = 1/72 inch)
  height: number; // in points
}

Example:

viewer.setConfig = {
  templateUrl: "https://example.com/document.pdf",
  templateUserSigns: [
    {
      userSignId: "user-001",
      img: "https://example.com/signature.png",
      priority: 1,
      fullName: "John Doe",
      rotate: 0,
      userSignPos: [],
    },
  ],
  paperSize: { width: 595, height: 842 }, // A4
};

`setInputConfig`

Sets configuration for documents with multiple paper sizes and predefined signature positions.

interface PdfSetSignatureConfig {
  fileUrl: string;
  templateConfig: Array<{
    paperSize: PaperSize;
    templateUserSigns: TemplateUserSign[];
  }>;
}

interface SignaturePosition {
  coorX: number; // X coordinate in PDF points
  coorY: number; // Y coordinate in PDF points
  width: number; // Signature width in PDF points
  height: number; // Signature height in PDF points
  startPage: number; // Starting page number (1-indexed)
  endPage: number; // Ending page number (1-indexed)
}

Example:

viewer.setInputConfig = {
  fileUrl: "https://example.com/document.pdf",
  templateConfig: [
    {
      paperSize: { width: 595, height: 842 }, // A4
      templateUserSigns: [
        {
          userSignId: "user-001",
          img: "https://example.com/signature1.png",
          priority: 1,
          rotate: 0,
          fullName: "John Doe",
          userSignPos: [
            {
              coorX: 100,
              coorY: 700,
              width: 70,
              height: 70,
              startPage: 1,
              endPage: 1,
            },
          ],
        },
      ],
    },
    {
      paperSize: { width: 420, height: 594 }, // A5
      templateUserSigns: [
        {
          userSignId: "user-002",
          img: "https://example.com/signature2.png",
          priority: 2,
          rotate: 0,
          fullName: "Jane Smith",
          userSignPos: [
            {
              coorX: 50,
              coorY: 500,
              width: 70,
              height: 70,
              startPage: 2,
              endPage: 3,
            },
          ],
        },
      ],
    },
  ],
};

`setInputPreviewConfig`

Sets configuration for preview mode (read-only view of signature positions).

interface PdfPreviewSignatureConfig {
  fileUrl: string;
  templateUserSigns: Array<{
    userSignId: string;
    img: string;
    priority: number;
    rotate: number;
    userSignPos: SignaturePosition[];
  }>;
}

Example:

viewer.setInputPreviewConfig = {
  fileUrl: "https://example.com/document.pdf",
  templateUserSigns: [
    {
      userSignId: "user-001",
      img: "https://example.com/signature.png",
      priority: 1,
      rotate: 270,
      userSignPos: [
        {
          coorX: 412,
          coorY: 2178,
          width: 70,
          height: 70,
          startPage: 1,
          endPage: 1,
        },
      ],
    },
  ],
};

`setExternalStyle`

Applies custom CSS styles to the component.

viewer.setExternalStyle = `
  .pdf-action-menu {
    background: #1a1a1a !important;
  }

  .signature-box {
    border: 2px solid #00ff00 !important;
  }
`;

Properties (Getters)

`getSignatureData`

Returns the current signature configuration with updated positions.

const data = viewer.getSignatureData;
console.log(data);
// Returns: PdfSignatureConfig object with updated userSignPos

Methods

`destroy()`

Cleans up and removes the component from the DOM.

viewer.destroy();

🎨 Styling

The component uses CSS variables for easy customization:

pdf-signature-viewer {
  --color-primary: #007bff;
  --color-success: #28a745;
  --color-danger: #dc3545;
  --color-secondary: #6c757d;
  --color-dark: #263238;
  --color-border: #999;
  --color-border-active: #000;
  --color-white: #ffffff;
  --color-background: #f1f4f5;
  --color-text-muted: #aaa;

  --sidebar-width: 300px;
  --border-width: 2px;
  --border-radius: 4px;
}

📐 Common Paper Sizes (in PDF points)

Size	Width	Height	Description
A0	2384	3370	Largest standard size
A1	1684	2384	Half of A0
A2	1191	1684	Half of A1
A3	842	1191	Half of A2
A4	595	842	Standard letter size
A5	420	594	Half of A4
Letter	612	792	US Letter
Legal	612	1008	US Legal

Note: 1 PDF point = 1/72 inch

🔄 Coordinate System

The component uses PDF coordinate system where:

Origin (0,0) is at the bottom-left corner
X increases to the right
Y increases upward
Units are in PDF points (1/72 inch)

The component automatically converts between screen coordinates and PDF coordinates.

🎯 Features in Detail

Signature Box Management

Drag & Drop: Click and drag signature boxes to reposition
Resize: Use the resize handle in the bottom-right corner
Icon Positioning: Drag the signature image within the box
Multi-page Range: Set start and end pages for signature placement
Priority: Assign priority numbers to signatures
Duplicate: Create copies of existing signature configurations
Delete: Remove unwanted signature boxes

Preview Mode

Preview mode provides a read-only view:

No editing capabilities
No resize/drag handles
Transparent borders
Full-screen PDF view
Sidebar hidden

Keyboard Shortcuts

ESC: Exit preview mode

🛠️ Development

# Install dependencies
npm install

# Run development server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

📝 TypeScript Support

The package includes full TypeScript definitions. Import types:

import type {
  PdfSignatureConfig,
  PdfSetSignatureConfig,
  PdfPreviewSignatureConfig,
  TemplateUserSign,
  SignaturePosition,
  PaperSize,
  SignatureBox,
} from "dpu-digital-sign";

🤝 Browser Support

Chrome/Edge (latest)
Firefox (latest)
Safari (latest)
Opera (latest)

📄 License

🐛 Issues & Support

If you encounter any issues or have questions, please file an issue on GitHub Issues.

🙏 Acknowledgments

Built with PDF.js
Powered by Vite
Written in TypeScript

📊 Changelog

See CHANGELOG.md for version history.