e-pdf-editor

A Vue 2 PDF editor component with Ant Design integration, focusing on PDF signature functionality.

Features

• 📝 PDF document viewing
• ✍️ Signature field placement on PDF document
• 🖱️ Drag-and-drop schema elements

Installation

npm install e-pdf-editor

Introduce Components

// Introduce in main.js

// Note: useComponents needs to be placed at the top to prioritize registration of lazy-loaded components
import { useAntd } from 'e-pdf-editor/packages/core/useComponents'
import EPdfEditor from 'e-pdf-editor/packages/use.js'
import 'e-pdf-editor/lib/e-pdf-editor.css'

useAntd(Vue)
Vue.use(EPdfEditor)

<template>
  <div>
   <e-pdf-editor />
  </div>
</template>

Dynamic add schema

<template>
  <div>
    <e-pdf-editor ref="ePdfEditor" />
  </div>
</template>

<script>
import { nodeSchema } from 'e-pdf-editor'

export default {
  mounted() {
    this.$refs.ePdfEditor.handleLoading(true);
    this.loadPdf();
    setTimeout(() => {
      this.$refs.ePdfEditor.handleLoading(false);
      nodeSchema.addSchemas([
        {
          type: "signBox",
          label: "Mẫu chữ ký 1",
          icon: "icon-pingfen_moren",
          options: {
            width: 300,
            fontSize: 11,
            textColor: "#000000",
            fontFamily: "Times New Roman",
            layout: "left",
            padding: 4,
            info: {
              address: "Công ty cổ phần phần mềm",
              name: "Người ký: Nguyễn Văn B",
              position: "Chức vụ: Trưởng phòng",
              dateSign: "Ngày ký: 2025-01-01"
            },
            signature: {
              img: "base64:image...",
              maxHeight: 60
            }
          },
          key: ""
        },
      ]);
    }, 1000);
  },
  methods: {
    async loadPdf() {
      try {
        // pdfFile is a URL string when imported via webpack
        const response = await fetch(
          "/mastering_javascript_design_patterns_fragment.pdf"
        );
        const blob = await response.blob();
        const file = new File([blob], "document.pdf", {
          type: "application/pdf"
        });

        await this.$refs.ePdfEditor.setPdfFile(file);
      } catch (error) {
        console.error("Error loading PDF:", error);
      }
    }
  }
};
</script>