Interactive PDF (Portable Document Format) labeled data element feature extraction method and system and medium

Abstract

The invention discloses an interactive PDF labeled data element feature extraction method and system and a medium, and relates to text processing and data elements, and the method comprises the steps: receiving an uploaded PDF document, and carrying out the rendering at a front end through a PDF.js library; in response to an operation of selecting a target field in the field list area by a user, setting the target field as a current activated field; monitoring a text selection operation of a user on the transparent text layer of the labeled area, and when a text selection completion event is detected, obtaining selected area information; on the basis of the current activated field and the selected area information, judging that a cross-page merging condition is met, merging the current selected area with a marking record created for the same field in advance, and updating the merged text content, page number range and offset information; and structuring the bound fields and the annotation records corresponding to the bound fields. According to the invention, automatic and precise extraction of compliance features in the authorization book is realized, and the efficiency and accuracy of compliance detection of the data element are improved.

Description

Technical Field

[0001] This application relates to the fields of text processing and data elements, and in particular to a method, system, and medium for extracting data element features from interactive PDF annotations. Background Technology

[0002] In data processing activities, verifying the legality of authorization documents is a crucial step in determining whether data usage is compliant. Compliance personnel typically need to manually open PDF authorization documents and locate and extract key fields such as the authorizing entity, identification number, authorization validity period, and scope of authorization.

[0003] In existing technologies, there are two main types of solutions: Full-text keyword search Keyword matching relies on the PDF text layer, which is only suitable for well-formatted authorization templates and is difficult to adapt to authorization documents with complex layouts and inconsistent field orders.

[0004] OCR + text regular expression matching OCR converts PDFs to text and then matches fields. However, OCR suffers from high character error rates, messy formatting, and an inability to restore the document structure, failing to meet the precise extraction requirements of compliance scenarios.

[0005] Therefore, the existing structured extraction of authorization documents has the following characteristics: Unable to annotate across pages, making it difficult to handle cross-page authorization statements; Unable to accurately locate the text's position on the page; The lack of a field binding mechanism necessitates extensive manual copying and pasting. The data results lack traceability and cannot meet audit requirements.

[0006] In summary, it is necessary to provide an interactive, location-based, cross-page, and structured PDF annotation and field extraction solution. Summary of the Invention

[0007] This application provides a method, system, and medium for extracting data element features from interactive PDF annotations, enabling automated and accurate extraction of compliance features from authorization documents, and improving the efficiency and accuracy of data element compliance testing.

[0008] This application provides a method for extracting data element features from interactive PDF annotations, including: The program receives uploaded PDF documents and renders them on the front end using the PDF.js library, generating a Canvas visual layer and a transparent text layer overlaid on it. The text nodes in the transparent text layer correspond to the character positions in the PDF source document. A user interface is provided, the user interface including a field list area for displaying one or more preset compliance feature fields, and a annotation area for displaying the PDF document; In response to the user's selection of a target field in the field list area, the target field is set as the currently active field; Listen for the user's text selection operation on the transparent text layer in the marked area. When the text selection completion event is detected, obtain the selection area information, which includes the selected text content, the page number where the text content is located, and the start and end offsets of the text content in the transparent text layer. Based on the currently active field and the selected area information, determine whether the current selected area meets the cross-page merging condition; If the cross-page merging condition is met, the current selection area is merged with the previously created annotation record for the same field, the merged text content, page number range and offset information are updated, and the merging result is bound to the currently active field. The bound fields and their corresponding labeled records are structured to generate structured data containing field identifiers, text content, and location information; and, The structured data is submitted to the backend for compliance verification and storage.

[0009] This application also proposes an interactive PDF annotation data element feature extraction system, including: The rendering module is configured to receive uploaded PDF documents and render them on the front end using the PDF.js library, generating a Canvas visual layer and a transparent text layer overlaid on it. A user interface module configured to provide a user interaction interface, the interface including a field list area and a PDF annotation area; The field activation module is configured to respond to a user's selection of a target field in the field list area and set the target field as the currently active field. The selection area listening and parsing module is configured to listen for the user's text selection operation on the transparent text layer. When a text selection completion event is detected, the module parses and obtains the selection area information. The cross-page merging judgment module is configured to determine whether the current selection area meets the cross-page merging conditions based on the currently active field and the selection area information. The field binding and update module is configured to: if the cross-page merging condition is met, merge the current selection area and the history record and bind them to the currently active field; The data structuring module is configured to assemble bound field data into structured data; and, The data submission module is configured to send the structured data to the backend system.

[0010] This application also proposes a computer-readable storage medium storing a computer program, which, when executed by a processor, implements the steps of the interactive PDF annotation data element feature extraction method described above.

[0011] This application proposes a PDF document annotation method based on PDF.js and a front-end interaction framework. By accurately locating text through TextLayer and combining cross-page merging logic, field binding, and metadata storage mechanisms, it achieves automated and accurate extraction of compliance features in the authorization document, thereby improving the efficiency and accuracy of compliance detection of data elements.

[0012] The above description is only an overview of the technical solution of this application. In order to better understand the technical means of this application and to implement it in accordance with the contents of the specification, and to make the above and other objects, features and advantages of this application more obvious and understandable, specific embodiments of this application are given below. Attached Figure Description

[0013] Various other advantages and benefits will become apparent to those skilled in the art upon reading the following detailed description of preferred embodiments. The accompanying drawings are for illustrative purposes only and are not intended to limit the scope of this application. Furthermore, the same reference numerals denote the same parts throughout the drawings. In the drawings: Figure 1 This is a flowchart illustrating the data element feature extraction method for interactive PDF annotation according to an embodiment of this application; Figure 2 This is a schematic diagram of the architecture of the interactive PDF annotation data element feature extraction system according to an embodiment of this application; Figure 3 This is a schematic diagram of the TextLayer text selection and positioning system for interactive PDF annotation data element feature extraction, as described in an embodiment of this application. Figure 4 This is a flowchart illustrating the cross-page annotation processing of the interactive PDF annotation data element feature extraction system according to an embodiment of this application. Figure 5 This is a diagram illustrating the relationship between field binding and status feedback in the interactive PDF annotation data element feature extraction system of this application embodiment; Figure 6 This is a schematic diagram of the annotation data structure and storage of the interactive PDF annotation data element feature extraction system according to an embodiment of this application. Detailed Implementation

[0014] Exemplary embodiments of the present disclosure will now be described in more detail with reference to the accompanying drawings. While exemplary embodiments of the present disclosure are shown in the drawings, it should be understood that the present disclosure may be implemented in various forms and should not be limited to the embodiments set forth herein. Rather, these embodiments are provided so that this disclosure will be thorough and complete, and will fully convey the scope of the disclosure to those skilled in the art.

[0015] This application provides a method for extracting data element features from interactive PDF annotations, including: The system receives uploaded PDF documents and renders them on the front end using the PDF.js library, generating a Canvas visual layer and a transparent text layer overlaid on it. The text nodes in the transparent text layer correspond to the character positions in the PDF source document.

[0016] In some embodiments, the user interface is implemented using the Vue.js framework; setting the target field as the currently active field and binding the merged result or new annotation record to the currently active field are implemented using Vue.js's reactive data mechanism. The user interface responds to and updates the annotation status of the fields in the field list area and the visual highlighting effect of the corresponding text in the annotation area.

[0017] The system architecture corresponding to the method in this application embodiment is as follows: User interface (Vue.js) Field List: Controls the fields to be bound (located on the right, displaying various compliance fields in the form of multiple cards, such as "Authorizing Party Name," "Identity Identifier," "Authorization Type," etc. Users can click on a card to set that field as the "Current Field to be Annotated"). PDF Canvas Layer: The visual base image (located on the left, rendered using PDF.js to display the PDF page image. The bottom layer is a Canvas layer for visual rendering, and the middle layer is a transparent text layer used to capture the user's text selections.) TextLayer: Responsible for capturing the selection area (text nodes, coordinates, offset). Page number, coordinates, and text content of the selected area; Cross-page annotation module: Standardizes and merges selections across multiple pages; Field binding module: Binds the selected area to a specified field; Data structured storage module: performs JSON storage or uploads to the backend.

[0018] Specifically, the user interface (Vue.js) architecture includes: Field list: Controls the fields to be bound. The field list module is the left side of the user interface. Its main function is to display all the fields required by the system (such as "Authorized Entity Identifier" and "Purpose of Personal Information Processing"). Users can select the fields they want to annotate here.

[0019] Main functions: 1. Field Display: In the Vue component, the field list is iterated through using `v-for`, and all fields are displayed on the left side of the screen. Each field is displayed through... <el-card>Or other UI components can be displayed, including field names and annotation status.

[0020] 2. Field Selection: When a user clicks on a field, the system will activate the annotation mode for that field, meaning that all selected PDF text areas will be bound to that field.

[0021] 3. Annotation status feedback: Each field has an annotation status, which can be: Unannotated (this field has not been bound to any selection area), Annotated (this field has been successfully bound to a selection area, and the selected text is displayed), Annotated across multiple paragraphs (this field is annotated across multiple paragraphs or pages, and multiple selection areas are displayed).

[0022] Vue reactive data management: Use data and v-model to bind and update field state.

[0023] State management: The current labeling status of each field is displayed through the el-card component, and the status is dynamically updated through Vue.

[0024] PDF Canvas Layer: The visual base map. The PDF Canvas layer is the core of the entire system, responsible for presenting PDF files to the user. The PDF.js rendering module is responsible for converting the PDF page into HTML. <canvas>Elements for users to view. Main functions include: PDF page rendering: Each page of the PDF is rendered as a single page. <canvas>The page content is then processed according to the scaling ratio. The getPage() method of the pdfjsLib library retrieves the page content and renders it using a canvas.

[0025] Displaying an image: The canvas element displays an image background for the PDF page, allowing users to directly view the content of the PDF file.

[0026] Zoom support: The Canvas layer provides zoom functionality, allowing users to zoom in or out of PDF pages to view and select text. Zooming is accomplished by adjusting the viewport's scale.

[0027] A user interface is provided, comprising a field list area for displaying one or more preset compliance feature fields, and an annotation area for displaying the PDF document. In a specific example, The user interface (Vue.js) architecture also includes the TextLayer layer: responsible for capturing selections (text nodes, coordinates, offset). The TextLayer is a transparent text layer in PDF.js rendering responsible for displaying text content on the Canvas, and users can capture text selections through this layer.

[0028] Main function: Transparent text layer: The TextLayer acts as a transparent layer overlapping the PDF Canvas. It displays the text through text nodes generated by PDF.js and allows users to select the text.

[0029] Capturing text selection: Using the browser's window.getSelection() interface, TextLayer captures the text selection area on the PDF page and records the page number, offset, and text content of the selected area.

[0030] Supports cross-page annotation: For cross-page annotations, TextLayer can recognize and combine selection information to merge the text selections of multiple pages into a single annotation object, which facilitates subsequent processing.

[0031] In response to the user's selection of a target field in the field list area, the target field is set as the currently active field.

[0032] The system listens for user text selection operations on the transparent text layer in the marked area. When a text selection completion event is detected, the system obtains selection area information, which includes the selected text content, the page number where the text content is located, and the start and end offsets of the text content in the transparent text layer.

[0033] Based on the currently active field and the selected area information, determine whether the current selected area meets the cross-page merging condition; If the cross-page merging condition is met, the current selection area is merged with the previously created annotation record for the same field, the merged text content, page number range, and offset information are updated, and the merging result is bound to the currently active field.

[0034] The user interface (Vue.js) architecture also includes a cross-page annotation module: standardizing and merging multi-page selections. Since users' text selections on PDFs may span multiple pages, a cross-page annotation module is needed to handle the merging of multi-page selections.

[0035] Main function: Handling cross-page selections: If the user's selection involves multiple PDF pages, the system will automatically merge the text selections from different pages into a single logical annotation object.

[0036] Merging selection data from multiple pages: The cross-page selection merging module standardizes the selection data (including coordinates and text content) from multiple pages into a single cross-page annotation object based on the page number order and text content of the user's selections.

[0037] Specifically, cross-page selections can be merged based on the selection coordinates and text content of each page. For each selection, calculate pageNo and offset, and then merge them into a data structure containing multiple pages.

[0038] Field Binding Module: Binds the selection area to a specified field. This module is responsible for binding the selected text to a field in the field list on the left, thus completing the binding between the field and the selection area.

[0039] Main function: Field selection: After the user selects a field from the field list on the left, the system will mark that field as the "currently selected field".

[0040] Text binding: When a user selects text on a PDF page, the system binds that text to the currently selected field.

[0041] Status Update: After binding is complete, the field status will be updated to "Annotated" and the selected text will be displayed.

[0042] Specifically, Vue's reactive data management can be used to bind the selected text content, page number, offset, and other information to the field object. The field state can then be updated using Vue's `v-bind` or `:class` to provide visual feedback.

[0043] The bound fields and their corresponding labeled records are structured to generate structured data containing field identifiers, text content, and location information; and, The structured data is submitted to the backend for compliance verification and storage.

[0044] In some specific examples, such as Figure 1 As shown, the overall processing of user-uploaded documents, front-end parsing, field annotation, and back-end validation mainly involves the following steps: 1. User uploads PDF file: The system first receives the PDF document to be processed uploaded by the user.

[0045] 2. PDF rendering and text layer generation: The front end uses PDF.js to render the PDF file and generate the corresponding TextLayer for visual positioning of the text.

[0046] 3. User selects fields and selects text content: After rendering, the user selects the fields to be extracted in the front-end interface and determines the target text area by selecting the text.

[0047] 4. Parse text, page number, and offset information: The system retrieves the corresponding text content in the TextLayer based on the selected area, and extracts the text's position offset on the page and its corresponding page number.

[0048] 5. Determine if the text spans multiple pages and merge or create new fields: The system determines whether the selected text spans multiple pages; if it does, the text data in adjacent pages is merged; if it does not span multiple pages, new single-page field data is generated directly.

[0049] 6. Field annotation display and backend compliance verification: The frontend displays the annotated fields to the user for confirmation; after the user submits, the backend verifies the field data for structural legality, content completeness, and format rules.

[0050] The user interface (Vue.js) architecture of this application also includes a data structure storage module: for storing or uploading JSON data to the backend. This module is responsible for converting the user's labeled data (including text content, location, cross-page information, etc.) into structured data for subsequent use or uploading to the backend.

[0051] Main functions: Data structuring: Organizes the annotation information (text, coordinates, page number) of each field into a standard JSON data format. Storage and upload: Annotation information can be saved to local storage (such as localStorage or IndexedDB) or uploaded to the backend database via an API.

[0052] Specifically, annotation data can be stored in JSON format and uploaded to the backend interface via a POST request. On the frontend, localStorage or IndexedDB can be used for caching to ensure the persistence of annotation data.

[0053] This application provides precise text selection and annotation capabilities through deep integration of the user interface (Vue.js) and the PDF.js rendering layer (Canvas + TextLayer). The cross-page annotation module ensures the merging and consistency of data across multiple pages, the field binding module provides flexible annotation management, and finally, the user's annotation results are saved through a data structure storage module. Each module is clearly defined and works collaboratively, ensuring the system's efficiency and ease of use.

[0054] In a specific embodiment, this application uses the getPage() method of PDF.js to obtain the page content. The page image is then drawn on a Canvas using render().

[0055] A transparent TextLayer is generated synchronously to restore the actual text position. (While the PDF page is being rendered, PDF.js generates a transparent TextLayer based on the text block information in the page content. Each text node on this transparent layer...) Elements) correspond to actual text blocks in the PDF file, and their positions (coordinates), sizes, font styles will be accurately restored to the same positions on the Canvas. "Real text position restoration" means that each text block on the PDF page will be displayed on the TextLayer layer at exactly the same position, ensuring that the text is consistent with the original layout in the PDF. This allows users to mark PDF text while obtaining the corresponding text position) Text selection listening system, listening to user mouseup event: listening to the user's mouseup event is to capture the user's text selection on the PDF page. When the user completes the selection action (mouse up), the system reads the text content and its position of the current selection area, knows the user's selection range (start position, end position, selected text content, etc.), and passes it to the system for subsequent annotation operations.

[0056] Specific reasons and effects: trigger text selection end: users usually select text by holding down the left mouse button and dragging, when the user releases the mouse, the text selection operation is over. The mouseup event is exactly when this operation ends. Therefore, listening to the mouseup event can accurately obtain the moment when the user completes the selection. Get text selection information: when the mouseup event is triggered, the system can get the selected text range through the browser's Selection API (i.e. window.getSelection()).

[0057] Including: the specific content of the selected text (for example: "authorization subject identification number"), the start and end position of the selection area (for example, x, y coordinates), the page number where the selection area is located, etc. After obtaining this information, the system can bind the selected text to the corresponding business field (such as "authorization subject identification number"), and prepare for subsequent annotation operations.

[0058] Support cross-page annotation: in some cases, users may select text that spans multiple PDF pages. For example, select some text on the first page and continue to select content on the second page. In this case, the listening of the mouseup event will let the system know how many pages the text selection spans, and correctly merge the information of these cross-page selection areas.

[0059] The mouseup event is the trigger point for cross-page annotation merging. When the selection area spans multiple pages, it can automatically merge the selection area according to the current page number, text offset, etc. and pass it to the field binding module.

[0060] User interaction feedback: Once the mouseup event is triggered, the system can give immediate user feedback, such as highlighting the selected text, updating the field binding status, etc. This makes the system more intuitive and responsive during user interaction. The collected data includes: selectedText: text content; pageNo: current PDF page number; startOffset, endOffset: offset in the TextLayer DOM node; rect: page coordinates of the selected area (used for visualizing highlighting).

[0061] The user interface (Vue.js) architecture of this application uses the following three core variables to track the user's annotation status: lastField: represents the user's last selected field. This variable is updated every time the user selects a field from the left field list for annotation. Purpose: to determine whether the user is performing cross-page annotation on the same field. If the last selected field and the currently selected field are the same, the annotation can be merged.

[0062] lastPage: represents the page number where the user last selected text. The system compares the difference between the current page and the last page to determine whether it is cross-page. Purpose: to determine whether the current annotation is cross-page. When the current page number is lastPage + 1, it means that the user is performing cross-page selection, and the system can merge the selected regions.

[0063] currentField: represents the field that the user is currently annotating. Every time the user clicks on the left field, currentField is updated to point to the current annotation target. Purpose: to record the field that the user is currently operating on, to check whether it is the same as the last operation, to prevent cross-field error merging.

[0064] Merge condition: The merge condition is the key factor for the cross-page annotation module to determine whether to merge annotations: lastField == currentField: Ensure that the current annotation and the last annotation are the same field. If the user switches the annotation field (for example, from "authorized subject identification number" to "authorized date"), the two pieces of text cannot be merged. pageNo == lastPage +1: ensures that the current page number is the next page of the last annotation. If the selected region spans two pages (for example, from page 1 to page 2), the system will consider it a cross-page annotation operation and begin merging the selected regions on the two pages.

[0065] Merging: When the cross-page merging condition is met, the system will merge the annotation content. Merged text (mergedText): mergedText = oldText + "\n" + selectedText: Here, oldText is the last selected text content by the user, and selectedText is the currently selected text. By connecting with "\n", we ensure that even if it is cross-page, there will be a line break between the two text segments, maintaining the visual coherence of the text.

[0066] Example: Suppose the user selects "Authorization subject identification number: Zhang San" on page 1 and continues to select "Valid period to: 2025" on page 2. The system will merge these two pieces of text into: Authorization subject identification number: Zhang San, Valid period to: 2025.

[0067] Merged range (mergedRange), mergedRange includes two parts: offset: indicates the position of the text in the page, usually the character position where the text starts. For cross-page annotations, the system will merge the offset of each page to ensure that the merged selection covers the entire cross-page text. pageNo: indicates the page number where the text is located. When crossing pages, the system will record the page number range of the merged text to ensure that subsequent storage can know which pages the annotation spans.

[0068] For example, suppose the user selects "Authorization subject identification number: Zhang San" at offset = 100 on page 1, and then selects "Valid period to: 2025" starting at offset = 150 on page 2. The merged mergedRange will include the start and end offsets of the two selected regions and the page number range.

[0069] In some examples, further comprising: if the cross-page merging condition is not met, creating a new annotation record for the current active field, the annotation record including at least the selected text content, the page number, the start offset, and the end offset.

[0070] When the user is performing cross-page annotation, the system will automatically determine whether the merging condition is met and perform the following steps: Check merging conditions: Check if lastField is the same as currentField to ensure that the user is annotating the same field. At the same time, check if the current page pageNo is lastPage + 1 to confirm whether it is a cross-page annotation.

[0071] Merge text: If the merging conditions are met, the system will merge the previous text (oldText) with the currently selected text (selectedText) into a new text (mergedText).

[0072] Merge selection range: Based on the offset information of the current page and the previous page, update the merged selection range mergedRange to ensure that the selection information across pages is stored correctly.

[0073] Update annotation status: Updates the annotation status of a field. For example, if a user annotates a field across multiple pages, the system will update the field's status to "Annotated Across Multiple Pages." Simultaneously, the selection area on the PDF page will update, and the user will see the text highlighted across multiple pages.

[0074] In some examples, obtaining selection information specifically includes Listen for specified mouse events from the user on the transparent text layer; Get the selected text range object using the browser's Selection API; Parse the selected text content, the starting text node and its corresponding starting offset, and the ending text node and its corresponding ending offset from the text range object; and Extract the corresponding page number information from the DOM element containing the start text node and / or end text node.

[0075] In some examples, determining whether the current selection meets the cross-page merging condition includes: Determine whether the currently activated field is the same as the field annotated in the previous record; and Determine if the page number of the currently selected area is the next page after the page number marked in the previous record; If both are true, then the cross-page merging condition is met.

[0076] This application tracks the field name and page number of the user's last annotation. When the user's selection area matches the previously annotated field and the page numbers are consecutive, it is automatically determined to be continuous content across pages. At this time, the system will automatically merge the text scattered across different pages and update the corresponding field's entry information in the form data, so that it includes text fragments and offset information from multiple pages.

[0077] This application's cross-page continuous annotation logic ensures that even if the text selected by the user spans multiple pages, the system can still merge them into a complete annotation. By judging the conditions of fields and page numbers, the system automatically merges the text and selection area to generate a complete annotation result. This application uses variables such as lastField, lastPage, and currentField to maintain the annotation state and ensure that cross-page annotations do not cause errors.

[0078] When a user selects text in a PDF, the system automatically writes the selected content into the data structure corresponding to that field. (Field binding in the feature management module is achieved through user interaction with the field, PDF text selection, and data structure updates. The following are the specific steps for implementing field binding, including a detailed description of user interaction and data structure updates.) The specific steps are as follows: Field binding associates selected text on a PDF page with specific fields (e.g., identityCode, identityName), ensuring that each field can store the corresponding annotation content. Based on the user's selection, the system automatically writes the selected text into the data structure corresponding to that field.

[0079] 1. Example of preset fields Predefined fields are field types that we predefine in the system. These fields need to be annotated on the PDF page and typically include: identityCode: Authorized entity identifier identityName: Name of the authorizing entity deadline: Expiry date authorizationScope: Authorization Scope organizationName: Authorized organization name signatureDate: Date of signing These fields are usually displayed in the field card (or form) on the right. When the user clicks on them, they enter the "to be annotated" state and are ready to select text.

[0080] 2. The user clicks on the field card to enter the annotation state. When a user clicks on a field card on the right, the system will perform the following actions: 2.1 Triggering the field selection event When a user clicks on a field card, the system will mark that field as "to be marked".

[0081] For example, when you click the field card "Authorized Subject Identifier (identityCode)", the currentField variable will be updated to identityCode, and the interface status will change to "Pending Labeling".

[0082] 2.2 UI Update Status In the UI, `v-bind:class` or `v-if` can dynamically change the style and status of field cards based on the value of `currentField`. The currently selected field will be displayed as "To be labeled", and other fields will be displayed as "Unlabeled" or "Labeled".

[0083] When a user selects text in a PDF, the content is automatically written into the data structure corresponding to the field. When a user selects text on a PDF page, the system automatically binds the selected content to the corresponding field and updates the data structure. The following are the specific steps involved in this process: 3.1 Listen to user selection area Listen for the mouseup event to detect when the user releases the mouse on the PDF page and capture the selected text.

[0084] 3.2 Retrieving Selected Text Use window.getSelection() to get the text content selected by the user and its corresponding position information (such as page number, offset, etc.).

[0085] The getSelectedTextIndex() method returns information such as the coordinates and content of the selected text after the user has made a text selection.

[0086] 3.3 Update Field Data Once the user selects text, the system will automatically write the selected text content into the form data structure of that field based on the currentField variable.

[0087] The form object for this field will contain text content and location information (offset, pageNo, etc.).

[0088] During this process, the form data structure will be updated. `this.form[this.currentField]` stores the text selected by the user, and `this.queryParam[this.currentField]` stores the position information of that field, including: annotationContent: The selected text content offset: The character position (offset) of the text. pageNo: The page number where the text is located crossPage: Marks whether the text is a selection that spans multiple pages. 3.4 Update Field Status It also updates the field's annotation status. For example, when a field's content is successfully annotated, the system updates the field's status to "Annotated". When annotating across multiple pages, the field's status may be updated to "Annotated in multiple paragraphs" because the text in the field spans multiple pages.

[0089] Data persistence and storage After the fields are bound, the annotation results are stored in a structured manner to support subsequent compliance checks and the backfilling of annotation content.

[0090] 4.1 Structured storage saves field content and location information as structured JSON data, facilitating subsequent retrieval, validation, and backfilling. Data can be stored in localStorage, IndexedDB, or uploaded to the backend API. Saving data to localStorage or uploading it to the backend via API... In some embodiments, merging the current selection area with previously created annotation records for the same field includes: Append the text content of the currently selected area to the existing text content of the marked record; Add the page number of the currently selected area to the page number range of the marked record; and, Add the starting and ending offsets of the current selection area to the offset list of the annotation record.

[0091] In some embodiments, the structured data is in JSON format, and each record for a field includes: field name, labeled text content, page range spanned by the text, and an array of offsets; Each element of the offset array includes: page number, starting offset within that page, and ending offset.

[0092] In a specific example, the description is as follows: 1. fieldName: Meaning: `fieldName` is the name or ID of the labeled field, representing the field the user is labeling. The field name is a system default, such as "identityCode", "identityName", or "deadline". In data storage, `fieldName` uses the field name as the key; for example, it can be identified using field names like `identityCode` or `identityName`.

[0093] Function: Serves as a unique identifier for each field, ensuring that the data in each field can be stored independently, facilitating subsequent retrieval and management.

[0094] Example: "identityName": { ...} 2. Content: Meaning: The content field stores the text annotations that the user adds to the PDF page. It saves the text content selected by the user (e.g., "Authorized by: Zhang San").

[0095] Purpose: To record the specific content of the field, facilitating subsequent compliance checks and document content backfilling.

[0096] Example: "content": "Authorized by: Zhang San" Note: The value of content is the text selected by the user from the PDF, such as "Authorizer: Zhang San", which represents the annotation content of this field.

[0097] 3. pageRange: Meaning: `pageRange` stores the page range covered by the selected area of ​​this field. It is an array containing two elements, representing the starting and ending pages of the field label. For example, `[2, 3]` means that the field spans pages 2 and 3.

[0098] Purpose: Used to identify the page range of the field annotation, helping the system to identify whether the annotation content is distributed across multiple pages.

[0099] Example: "pageRange": [2, 3] Note: The first element in the pageRange array is the start page (e.g., page 2), and the second element is the end page (e.g., page 3). If the annotations only exist on the same page, the pageRange array will contain the same page number (e.g., [2, 2]).

[0100] 4. Offsets: Meaning: offsets is an array used to record the start and end offsets of the annotation content on various pages. Each element represents the start and end positions of the annotation content on a specific page.

[0101] startOffset: Indicates the starting character position of the text on the page (relative to the beginning of the page).

[0102] endOffset: Indicates the position of the last character of the text on the page.

[0103] Function: Used to accurately record the character position of field annotation content on each page, facilitating subsequent backfilling and cross-page merging operations.

[0104] Example: "offsets": [ { "page": 2, "startOffset": 11, "endOffset": 49}, { "page": 3, "startOffset": 0, "endOffset": 27} ] Note: The first offset object indicates that the text annotation on page 2 starts from the 11th character and ends at the 49th character.

[0105] The second offset object indicates that the text annotation content on page 3 starts from character 0 and ends at character 27.

[0106] Function: These offsets allow you to accurately mark the position of the annotation content on each page, and support merging the annotation areas of different pages into a continuous annotation when annotating across pages.

[0107] 5. crossPage: Meaning: `crossPage` is a Boolean value (true or false) that indicates whether the field's label spans multiple pages. It is true if the user selects the same field's text content across multiple pages (i.e., cross-page selection); it is false if the selection is only within the same page.

[0108] Function: Helps the system determine whether the field label spans multiple pages, making it easier to merge cross-page selections and maintain accurate label data.

[0109] Example: "crossPage": true Note: When a user selects text, if the selection spans multiple pages, `crossPage` will be set to `true`, indicating that the field's annotation content spans multiple pages. Otherwise, `crossPage` will be `false`, indicating that the field's annotation exists only on a single page.

[0110] 6. Summary of examples: Suppose a user selects a portion of the text "Authorizer: Zhang San" on both pages 2 and 3. The entire selected area contains "Authorizer: Zhang San" and spans two pages. Offsets record the text positions on these two pages. The final storage structure is as follows: { "identityName": { "content": "Authorized by: Zhang San", "pageRange": [2, 3], "offsets": [ { "page": 2, "startOffset": 11, "endOffset": 49}, { "page": 3, "startOffset": 0, "endOffset": 27} ], "crossPage": true } } identityName is the field name, indicating that the user selected "authorized entity name" as the annotation field.

[0111] The content field stores the selected text "Authorizer: Zhang San".

[0112] The pageRange indicates that the text spans pages 2 and 3.

[0113] The offsets list records the precise character position of the text in this field on each page, ensuring text accuracy.

[0114] When crossPage is set to true, it indicates that the field is marked as spanning multiple pages, and the system needs to process the cross-page content when merging data.

[0115] This structured data storage format accurately records the annotation content selected by the user in the PDF, the page number range of the annotation, and the text position information through fields such as content, pageRange, offsets, and crossPage. It supports the merging and accurate backfilling of cross-page annotations and provides structured data support for subsequent compliance testing.

[0116] Specific process examples include: 1. User uploads PDF; 2. The system uses PDF.js to render multiple pages; 3. The user clicks on fields such as "ID Number"; 4. The user selects text within the PDF; 5. The system monitors and records text selections: text content, page number, and offset (the selected text's character position within a text node; offset describes the selection's position within the current page's TextLayer, specifying which text segment it belongs to, its starting and ending characters). This offset is natively provided by the browser; when a user selects text within a PDF's TextLayer (transparent text layer), the browser automatically generates a Selection object containing the starting text node (anchorNode) and the starting character position (anchorOffset). The `focusNode` contains the closing text node, and the `focusOffset` contains the closing character position. You only need to listen for mouse up in Vue and then read the data. Starting point offset = selection.anchorOffset The endpoint offset = selection.focusOffset. These two offsets together constitute the "offset".

[0117] In summary: When the user drags the mouse over the transparent text layer of the PDF, a span within the TextLayer is selected. Releasing the mouse (mouseup) triggers an event. The Vue component retrieves information from `window.getSelection()`: `anchorOffset`, `focusOffset`, and the span containing the `anchorNode`. The system then retrieves the current page number (`pageNum`) from the span's dataset. The final structure is as follows: { page: Current page number startOffset: anchorOffset, endOffset: focusOffset }) 6. Determine if the page spans multiple pages, and update the field data accordingly; (The key to determining whether a text spans multiple pages lies in comparing lastPage and pageNum. If pageNum (current page) and lastPage (previous page) are different, it means the text spans multiple pages.)

[0118] function isCrossPage(startPosition, endPosition, startPage, endPage){ return startPage !== endPage; / / If the start page and end page are different, it's a page span. } Determine if the page spans: lastPage: The page number where the user last selected text (stored in the lastPage variable).

[0119] pageNum: The page number where the currently selected text is located (the current page number is recorded by the pageNum variable).

[0120] Page cross-page detection: If startPage and endPage are the same, it means the selection area is on the same page and is marked as non-page span.

[0121] If startPage and endPage are different, it means that the selection spans multiple pages and is marked as a page span.

[0122] 7. Update field data Once the system determines whether the selected area spans multiple pages, it updates the field information in the form data structure, recording the selected text, position information, page number range, etc.

[0123] The process of updating field data: Text content: Store the selected text (selectedText) in the form data corresponding to the field, named currentField.

[0124] Page range: Record the starting page number startPage and the ending page number endPage of this text, and store them as pageRange.

[0125] Offset: Records the position of the text on each page, including startOffset and endOffset.

[0126] Page crossover flag: Based on the judgment result, set crossPage to true or false to indicate whether the selection area of ​​this field spans multiple pages. 8. Submit to the backend after user confirmation; 9. The backend performs compliance checks and stores the data in the database.

[0127] The method in this application is directly based on the original PDF TextLayer, without relying on OCR, thus eliminating recognition errors and greatly improving recognition accuracy. It automatically handles cross-page and multi-paragraph content, adapting to real-world business environments and supporting complex authorization documents. The WYSIWYG annotation method significantly reduces operational costs for compliance personnel, resulting in an excellent user experience. The system corresponding to this application can be embedded as a component into existing compliance testing platforms, with clear front-end and back-end interfaces and strong integrability.

[0128] This application also proposes an interactive PDF annotation data element feature extraction system, including: The rendering module is configured to receive uploaded PDF documents and render them on the front end using the PDF.js library, generating a Canvas visual layer and a transparent text layer overlaid on it. A user interface module configured to provide a user interaction interface, the interface including a field list area and a PDF annotation area; The field activation module is configured to respond to a user's selection of a target field in the field list area and set the target field as the currently active field. The selection area listening and parsing module is configured to listen for the user's text selection operation on the transparent text layer. When a text selection completion event is detected, the module parses and obtains the selection area information. The cross-page merging judgment module is configured to determine whether the current selection area meets the cross-page merging conditions based on the currently active field and the selection area information. The field binding and update module is configured to: if the cross-page merging condition is met, merge the current selection area and the history record and bind them to the currently active field; The data structuring module is configured to assemble bound field data into structured data; and, The data submission module is configured to send the structured data to the backend system.

[0129] In a specific example, the overall structure of the PDF document annotation and compliance detection system and the data flow between its modules are illustrated. For instance... Figure 2 As shown, the system consists of three parts: a front-end interaction layer, an annotation interaction processing module, and a back-end compliance detection module. The functional relationships between these modules are as follows: 1. Front-end interaction layer (Vue.js) The front-end interaction layer is located in the upper left area of ​​the system and consists of a field list module and a PDF rendering area.

[0130] (1) Field list module The field list displays target fields available for user annotation, such as name, ID number, scope of authorization, and date. When a user clicks on a field, that field enters the "pending annotation state" and becomes the target field associated with subsequent PDF text selections.

[0131] (2) PDF rendering area The PDF rendering area uses a Canvas layer and a TextLayer layer stacked together. The Canvas layer displays the PDF page image content, while the TextLayer layer holds transparent text nodes, enabling users to select the original PDF text. Users can select text within this area, triggering subsequent annotation processing.

[0132] The front-end interaction layer is responsible for the user interface and basic interactive operations, and is the entry point for the entire annotation process.

[0133] 2. Annotation Interaction Processing Module The annotation interaction processing module is located in the upper right area of ​​the structure diagram and is the core business logic layer of the system.

[0134] This module mainly consists of four parts: Text monitoring function By listening to changes in the user's selection area on the TextLayer, the selected text content, offset position, coordinate area, and corresponding page number can be captured.

[0135] cross-page merging function When a user selects text consecutively on adjacent pages, the system automatically determines whether they belong to consecutive selections of the same field and executes cross-page merging logic to merge multiple selections into a single complete field content.

[0136] Field binding function The selected text content is bound to the field that the user is currently in the "to be annotated" state, and the text content, location information, page number range, etc. are written into the corresponding field data structure.

[0137] Status feedback function The field binding results are fed back to the front-end interface in real time, the field status is updated (such as "annotated", "cross-page annotation", etc.), and the annotated areas are highlighted visually.

[0138] The front-end interaction layer and the annotation interaction processing module are connected through data flow: the area selected by the user is sent to the annotation processing module for parsing and merging.

[0139] 3. Backend compliance detection module The backend compliance detection module is located in the area below the structure diagram. It is mainly responsible for receiving structured labeled data uploaded by the frontend and performing compliance verification.

[0140] The backend module includes the following functions: Compliance rules engine The field content is validated for legality, completeness, consistency, and formatting according to business rules.

[0141] Automated verification processing Automatically validate labeled data, such as checking for missing fields, validating cross-page annotations, and verifying text recognition consistency.

[0142] Source traceability record The annotation and verification results are written into the database for subsequent audit tracking, business applications, and compliance filing.

[0143] The structured annotation data output from the annotation interaction processing module is transmitted to the backend module via data stream, triggering compliance judgment and persistent storage.

[0144] Data Flow Description Figure 2 The data transfer process between modules is depicted using arrows: 1. Front-end interaction layer → Annotation interaction processing module When a user selects text in a PDF, the selected content, text position, and target field information are sent to the annotation interaction processing module.

[0145] 2. Annotation and Interaction Processing Module → Backend Compliance Detection Module Structured labeled data that has been integrated across pages and bound to fields is submitted uniformly from the front end to the back end for compliance testing and persistent storage.

[0146] The entire data flow realizes a complete business chain from "document visualization → text selection → field binding → compliance verification".

[0147] like Figure 3 As shown, this application demonstrates the specific process of user text selection and offset positioning when the PDF page is overlaid with a Canvas layer and a TextLayer text layer.

[0148] First, the PDF page renders the original document image using a Canvas layer, overlaid with a transparent TextLayer. Each selectable text node in the TextLayer is arranged in its corresponding visual position according to the parsing results of PDF.js, faithfully reproducing the character layout in the original PDF. The image uses transparent rectangular areas to represent the text blocks of the TextLayer, with the data-offset corresponding to each character shown below, indicating the text's sequential position within the source document's character stream.

[0149] When a user selects text within the interface, the system captures the rectangular selection area defined by the user within the TextLayer and identifies the selected text content from that area. The attached diagram uses a dashed box to represent the user's selection area, which covers the range of characters containing the text "Authorizer Zhang San".

[0150] After parsing the selection area, the system extracts the corresponding information from the TextLayer, including the selected text, the page number, the starting character offset, the ending character offset, and the geometric parameters of the rectangular selection area. The record information area at the bottom of the attached figure exemplifies the structured data extracted by the system: it includes the selected text content "Authorizer Zhang San", the page number as page 2, the starting offset as 1023, the ending offset as 1089, and the coordinates and dimensions of the rectangular selection area.

[0151] Through the above steps, the system can accurately locate the text content selected by the user on the PDF page, providing basic data for subsequent field binding, cross-page merging, and compliance verification.

[0152] Figure 4 The system demonstrates its processing flow when annotating text across pages, including key steps such as field determination, page number determination, and page merging.

[0153] First, the process begins with the user selecting text on page N of the PDF document. After capturing the selection, the system temporarily stores information such as the selected text content, page number, and offset, and simultaneously reads the field currently being annotated by the user (currentField).

[0154] Subsequently, the system proceeds to the field consistency check node, which compares whether the currently labeled field is the same as the lastField field of the previous record: If the two differ, the program proceeds to the "No" branch. The system will create a new field annotation object for the current selection area and record basic information such as the selected text content, page number, and offset range in the object as a new independent annotation entry.

[0155] If the two are the same, the program enters the "Yes" branch. The system then continues to determine whether the page number of the current selection area is the next page of the previous record, that is, whether pageNo is equal to lastPage + 1.

[0156] When the page number meets the continuity condition, the system merges the current selection with the previous record across pages. The merging process includes: appending the newly selected text to the existing text; adding the current page offset information to the offsets list; and setting the crossPage flag of the field to true to indicate that the data in this field consists of multiple consecutive pages.

[0157] Through this process, the present invention achieves automatic identification and continuous merging of cross-page annotations, ensuring unified management and structured storage of field content in multi-page scenarios.

[0158] Figure 5 This demonstrates the interaction between the front-end field list, the PDF text selection area, and the status feedback mechanism when the system performs field binding operations.

[0159] First, the user clicks on a field to be annotated in the field list on the right side of the interface, such as identity code, deadline, or authorization scope. Upon receiving this action, the system sets that field as the currently active field (currentField), indicating that subsequent text annotation operations will be bound to this field.

[0160] Subsequently, when the user selects a piece of text in the PDF text selection area on the left, the system binds the selected text content and its related location information to the data structure of the corresponding field according to the currentField, forming a structured annotation record.

[0161] After field binding is complete, the system will immediately provide visual status feedback. This feedback includes: highlighting the annotated fields in the field list; recording metadata such as offset and pageNo, and marking the corresponding text range of the field with a highlighted rectangle on the PDF page; and marking the field as "annotated" in the field list to help users confirm the annotation progress. Repeat this process to complete annotation for all required fields. Through this process, the system achieves linkage between field selection, text selection, and status feedback, improving the clarity and controllability of document field annotation operations.

[0162] Figure 6 This demonstrates the data structure formed by the system after field annotation in this application, as well as the structured storage method for submission from the front end to the back end.

[0163] Appendix Figure 6 The left side shows the annotation data structure generated by the system for each field. For the field "identityCode", the system records the text content selected by the user in the PDF as the field content and stores it along with the field name in the corresponding data structure item. For the field "deadline", the attached diagram illustrates the structured recording method of multi-page text annotation using cross-page annotation as an example. When the content selected by the user spans pages 2 and 3, the system records the corresponding page number range as [2, 3] and sets the cross-page flag to true. At the same time, the system records the start and end positions of each page and stores them in the form of an offsets array to represent the actual position range of the text on each page.

[0164] Appendix Figure 6 The right side illustrates how the structured data described above is submitted to the backend in JSON format. The annotation content for multiple fields will be organized in key-value pairs, with each field corresponding to an annotation data object. The entire dataset is encapsulated into a structured JSON data packet for subsequent compliance verification and database insertion.

[0165] This application also proposes a computer-readable storage medium, characterized in that a computer program is stored on the computer-readable storage medium, and when the computer program is executed by a processor, it implements the steps of the aforementioned interactive PDF annotation data element feature extraction method.

[0166] It should be noted that, in the embodiments of this application, the terms "comprising," "including," or any other variations thereof are intended to cover non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements includes not only those elements but also other elements not expressly listed, or elements inherent to such a process, method, article, or apparatus. Without further limitations, an element defined by the phrase "comprising one..." does not exclude the presence of other identical elements in the process, method, article, or apparatus that includes that element.

[0167] The sequence numbers of the embodiments in this application are for descriptive purposes only and do not represent the superiority or inferiority of the embodiments.

[0168] Through the above description of the embodiments, those skilled in the art can clearly understand that the methods of the above embodiments can be implemented by means of software plus necessary general-purpose hardware platforms. Of course, they can also be implemented by hardware, but in many cases the former is a better implementation method. Based on this understanding, the technical solution of this application, in essence, or the part that contributes to the prior art, can be embodied in the form of a software product. This computer software product is stored in a storage medium (such as ROM / RAM, magnetic disk, optical disk) and includes several instructions to cause a terminal (which may be a mobile phone, computer, server, air conditioner, or network device, etc.) to execute the methods described in the various embodiments of this application.

[0169] The embodiments of this application have been described above with reference to the accompanying drawings. However, this application is not limited to the specific embodiments described above. The specific embodiments described above are merely illustrative and not restrictive. Those skilled in the art can make many other forms under the guidance of this application without departing from the spirit and scope of the claims. All of these forms are within the protection scope of this application. < / canvas> < / canvas>

Claims

1. A method for extracting features of data elements in interactive PDF annotation, characterized in that, include: The program receives uploaded PDF documents and renders them on the front end using the PDF.js library, generating a Canvas visual layer and a transparent text layer overlaid on it. The text nodes in the transparent text layer correspond to the character positions in the PDF source document. A user interface is provided, the user interface including a field list area for displaying one or more preset compliance feature fields, and a annotation area for displaying the PDF document; In response to the user's selection of a target field in the field list area, the target field is set as the currently active field; Listen for the user's text selection operation on the transparent text layer in the marked area. When the text selection completion event is detected, obtain the selection area information, which includes the selected text content, the page number where the text content is located, and the start and end offsets of the text content in the transparent text layer. Based on the currently active field and the selected area information, determine whether the current selected area meets the cross-page merging condition; If the cross-page merging condition is met, the current selection area is merged with the previously created annotation record for the same field, the merged text content, page number range and offset information are updated, and the merging result is bound to the currently active field. The bound fields and their corresponding labeled records are structured to generate structured data containing field identifiers, text content, and location information; as well as, The structured data is submitted to the backend for compliance verification and storage.

2. The data element feature extraction method for interactive PDF annotation as described in claim 1, characterized in that, Also includes: If the cross-page merging condition is not met, a new annotation record is created for the currently active field. The annotation record includes at least the selected text content, the page number, the starting offset, and the ending offset.

3. The interactive PDF annotation data element feature extraction method as described in claim 1, characterized in that, Obtaining selection area information specifically includes: Listen for specified mouse events from the user on the transparent text layer; Get the selected text range object using the browser's Selection API; Parse the selected text content, the starting text node and its corresponding starting offset, and the ending text node and its corresponding ending offset from the text range object; and, Extract the corresponding page number information from the DOM element containing the start text node and / or end text node.

4. The data element feature extraction method for interactive PDF annotation as described in claim 1, characterized in that, Determining whether the current selection meets the conditions for merging across pages includes: Determine whether the currently active field is the same as the field annotated in the previous record; and, Determine if the page number of the currently selected area is the next page after the page number marked in the previous record; If both are true, then the cross-page merging condition is met.

5. The interactive PDF annotation data element feature extraction method as described in claim 1, characterized in that, Merging the current selection area with previously created annotation records for the same field includes: Append the text content of the currently selected area to the existing text content of the marked record; Add the page number of the currently selected area to the page number range of the marked record; and, Add the starting and ending offsets of the current selection area to the offset list of the annotation record.

6. The interactive PDF annotation data element feature extraction method as described in claim 1, characterized in that, The user interface is implemented using the Vue.js framework; Setting the target field as the currently active field, and binding the merged result or new annotation record to the currently active field, is achieved through Vue.js's reactive data mechanism. The user interface responds to and updates the annotation status of the fields in the field list area and the visual highlighting effect of the corresponding text in the annotation area.

7. The interactive PDF annotation data element feature extraction method as described in claim 1, characterized in that, The structured data is in JSON format, and each record for a field includes: field name, labeled text content, page range spanned by the text, and an array of offsets. Each element of the offset array includes: page number, starting offset within that page, and ending offset.

8. A data element feature extraction system for interactive PDF annotation, characterized in that, include: The rendering module is configured to receive uploaded PDF documents and render them on the front end using the PDF.js library, generating a Canvas visual layer and a transparent text layer overlaid on it. A user interface module configured to provide a user interaction interface, the interface including a field list area and a PDF annotation area; The field activation module is configured to respond to a user's selection of a target field in the field list area and set the target field as the currently active field. The selection area listening and parsing module is configured to listen for the user's text selection operation on the transparent text layer. When a text selection completion event is detected, the module parses and obtains the selection area information. The cross-page merging judgment module is configured to determine whether the current selection area meets the cross-page merging conditions based on the currently active field and the selection area information. The field binding and update module is configured to: if the cross-page merging condition is met, merge the current selection area and the history record and bind them to the currently active field; The data structuring module is configured to assemble bound field data into structured data. as well as, The data submission module is configured to send the structured data to the backend system.

9. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores a computer program that, when executed by a processor, implements the steps of the interactive PDF annotation data element feature extraction method as described in any one of claims 1 to 7.

Images