dpu-digital-sign

v1.0.22

Published

5 months ago

A powerful Web Component for viewing, positioning, and configuring digital signatures on PDF documents

Downloads

0High
0Medium
0Low

pdf digital-signature pdf-signature web-component pdf-viewer signature-placement document-signing pdf-annotation typescript pdfjs

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.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

PDF Digital Sign

✨ Features

📦 Installation

🚀 Quick Start

Basic Usage (Vanilla JavaScript/TypeScript)

React Example

Vue 3 Example

Angular Example

📚 API Reference

Properties (Setters)

setConfig

setInputConfig

setInputPreviewConfig

setExternalStyle

Properties (Getters)

getSignatureData

Methods

destroy()

🎨 Styling

📐 Common Paper Sizes (in PDF points)

🔄 Coordinate System

🎯 Features in Detail

Signature Box Management

Preview Mode

Keyboard Shortcuts

🛠️ Development

📝 TypeScript Support

🤝 Browser Support

📄 License

🐛 Issues & Support

🙏 Acknowledgments

📊 Changelog

`setConfig`

`setInputConfig`

`setInputPreviewConfig`

`setExternalStyle`

`getSignatureData`

`destroy()`