Web-Based PDF Editing: Implementation for Electronic Contract Platform

This article introduces the implementation of web-based PDF editing capabilities from both business scenarios and technical perspectives. The context is Bilibili's electronic contract platform, which aims to move traditional offline paper contract signing processes online.

The article begins by explaining the business background, where the platform handles electronic signing for various Bilibili scenarios. A typical signing process involves uploading a PDF contract template containing form fields, which parties fill out and then apply electronic signatures to create legally binding contracts.

The author identifies problems with using commercial PDF editors like Adobe Acrobat Pro DC and Foxit PDF Editor, including licensing costs, inability to meet specific business customization needs, inconsistent styling, lack of platform constraints, and high maintenance costs for business partners.

To address these issues, the article proposes a customized web-based PDF editor tailored to Bilibili's signing scenarios. This approach standardizes the process by encapsulating complex business rules within the platform, providing users with a simple, limited set of necessary functions that improve both system stability and user experience.

The implemented editor consists of three main panels: a canvas panel for in-place editing (drag, resize, edit default values, delete, select, copy-paste), a left-side component list panel providing basic editable components (text forms, checkboxes, selects, plain text) and business-customized components (company names, phone numbers, seal positions, OA review information), and a right-side property editing panel for real-time parameter adjustments and fine-tuning.

The technical architecture is built around a schema layer that describes all editing information, where the relationship is: original PDF + schema data = synthesized PDF. This schema serves as a single store for global state management, enabling features like secondary editing, workspace recovery, undo/redo functionality, and extensibility.

The data flow follows a single store and unidirectional pattern, ensuring that component panels, property panels, canvas, and PDF generator have no direct data flow or coupling mechanisms, only interacting through the store. This design supports modular, pluggable capabilities.

For undo/redo functionality, the article implements a Vuex plugin using immutable.js to maintain state history, allowing pointer-based navigation through state objects. The plugin includes a