A browser-based PDF file parsing method, system and storage medium

Abstract

The application relates to a browser-based PDF file parsing method, system and storage medium, which comprises the following steps: loading and parsing a PDF file to obtain description text associated with the PDF file; according to a PDF format rule, extracting a cross-reference table of the PDF file from the description text, and parsing a plurality of object data of the PDF file according to the cross-reference table; finding and reading the object data, and composing content elements according to position information and / or size information of the object data; according to a rendering rule of the browser, converting corresponding content in the content elements into document object model (DOM) nodes described in a hypertext markup language (HTML) + cascading style sheets (CSS) format; and rendering the content corresponding to the PDF file according to the document object model (DOM) nodes described in the hypertext markup language (HTML) + cascading style sheets (CSS) format through the browser to obtain content presented by the PDF file.

Description

Technical Field

[0001] This invention relates to the field of PDF file parsing, specifically to a browser-based PDF file parsing method, system, and storage medium. Background Technology

[0002] PDF stands for Portable Document Format. It is a file format developed by Adobe Systems for exchanging files in a way that is independent of applications, operating systems, and hardware. PDF files are based on the PostScript language image model, which ensures accurate colors and printing results on any printer. In other words, PDF faithfully reproduces every character, color, and image of the original document.

[0003] The conventional method for reading or parsing PDF files is to install PDF reading software and then use that software to open the corresponding PDF file. This method is limited by the client's environment and may not run smoothly on computers with lower performance. Furthermore, when switching to a computer without the necessary software installed, the PDF file cannot be opened. A browser is an essential program for almost every terminal, but current browsers do not have the functionality to parse PDF files.

[0004] The purpose of this invention is to design a browser-based PDF file parsing method, system, and storage medium to address the problems existing in the prior art. Summary of the Invention

[0005] To address the problems existing in the prior art, the present invention provides a browser-based PDF file parsing method, system, and storage medium, which can effectively solve the problems existing in the prior art.

[0006] The technical solution of this invention is:

[0007] A browser-based PDF file parsing method includes the following steps:

[0008] Load and parse the PDF file to obtain the descriptive text associated with the PDF file;

[0009] According to the PDF format rules, extract the cross-reference table of the PDF file from the description text, and parse out several object data of the PDF file based on the cross-reference table;

[0010] Locate and read the object data, and compose content elements based on the location and / or size information of the object data;

[0011] According to the browser's rendering rules, the corresponding content in the content element is converted into a Document Object Model (DOM) node described in Hypertext Markup Language (HTML) + Cascading Style Sheets (CSS).

[0012] The content of the PDF file is rendered by the browser based on the Document Object Model (DOM) nodes described in Hypertext Markup Language (HTML) and Cascading Style Sheets (CSS).

[0013] Furthermore, the process of loading and parsing the PDF file to obtain the descriptive text associated with the PDF file includes:

[0014] The PDF file is loaded by a browser, and the browser's FileReader.readAsString interface is called to parse the PDF file and obtain the descriptive text associated with the PDF file.

[0015] Furthermore, the object data includes at least one or more of image elements, vector elements, and text elements.

[0016] Furthermore, if the object data includes image elements, the step of converting the corresponding content in the content elements into Document Object Model (DOM) nodes described in Hypertext Markup Language (HTML) + Cascading Style Sheets (CSS) format according to the browser's rendering rules includes:

[0017] The image element is drawn on the browser's HTMLCanvasElement canvas using the browser's CanvasRenderingContext2D.putImageData interface, and the Uniform Resource Locator (URL) of the image element is obtained by calling the browser's HTMLCanvasElement.toDataURL interface.

[0018] The URL is converted into the node type of the DOM node described in HTML, and the image attributes in the image element are converted into CSS format description content.

[0019] Further, if the object data includes text elements and / or vector elements, the step of converting the corresponding content in the content elements into Document Object Model (DOM) nodes described in Hypertext Markup Language (HTML) + Cascading Style Sheets (CSS) format includes:

[0020] Convert the element type corresponding to the text element and / or vector element to the node type of the DOM node described in HTML, and convert the information attributes in the text element and / or vector element to description content in CSS format.

[0021] Furthermore, the process of finding and reading the object data includes:

[0022] Read the element ID of the object data according to the cross-reference table, and find and read the object data according to the element ID.

[0023] Furthermore, the step of composing content elements based on the location information and / or size information of the object data includes:

[0024] If the object data contains a font, then the font is read and combined with the other object data to form a content element.

[0025] Furthermore, the process of rendering the content of the PDF file by the browser based on the Document Object Model (DOM) nodes described in Hypertext Markup Language (HTML) and Cascading Style Sheets (CSS) includes:

[0026] The browser's HTMLElement.appendChild function is invoked to render the DOM node onto the browser's page, thus obtaining the content corresponding to the PDF file.

[0027] A browser-based PDF file parsing system includes the following modules:

[0028] The description text acquisition module is used to load and parse the PDF file to obtain the description text associated with the PDF file;

[0029] The object data parsing module is used to extract the cross-reference table of the PDF file from the description text according to the PDF format rules, and parse out several object data of the PDF file according to the cross-reference table;

[0030] The content element construction module is used to find and read the object data, and to assemble content elements based on the location information and / or size information of the object data.

[0031] The webpage format conversion module is used to convert the corresponding content in the content element into a Document Object Model (DOM) node described in Hypertext Markup Language (HTML) + Cascading Style Sheets (CSS) format according to the browser's rendering rules.

[0032] The rendering module is used by the browser to render the content of the PDF file corresponding to the DOM nodes described in the format of Hypertext Markup Language (HTML) and Cascading Style Sheets (CSS).

[0033] A computer-readable storage medium storing a computer program that, when executed by a processor, implements the aforementioned browser-based PDF file parsing method.

[0034] Therefore, the present invention provides the following effects and / or advantages:

[0035] This application obtains a cross-reference table by parsing the descriptive text associated with the PDF file, then parses the cross-reference table to obtain the object data contained in the PDF file, and finally transforms the object data using Document Object Model (DOM) nodes described in Hypertext Markup Language (HTML) and Cascading Style Sheets (CSS) format, thereby importing it into a browser to obtain the corresponding content of the PDF file. Therefore, PDF files can be viewed without PDF reading software. This invention allows users to view PDF files without any related software; as long as they have a browser, they can view PDF files. This solution processes the PDF file in the browser environment, directly outputting the corresponding HTML structure for the browser to render, saving the trouble of installing software and enabling better cross-device and cross-platform compatibility. Any device with a browser (phone, tablet, etc.) can open the file.

[0036] This application employs different conversion strategies for different content within PDF object data. It utilizes the browser's `CanvasRenderingContext2D.putImageData` interface to draw image elements onto the browser's `HTMLCanvasElement` canvas, and calls the browser's `HTMLCanvasElement.toDataURL` interface to obtain the Uniform Resource Locator (URL) of the image element. The URL is then converted to the node type of the DOM node described in HTML, and the image attributes in the image element are converted to CSS format descriptions. For text or vector graphics, the element type of the text element and / or vector element is converted to the node type of the DOM node described in HTML, and the information attributes in the text element and / or vector element are converted to CSS format descriptions. This conversion yields content in a format that the browser can render and recognize.

[0037] It should be understood that the above summary and the following detailed description of the invention are exemplary and explanatory, and are intended to provide further explanation of the invention as claimed. Attached Figure Description

[0038] Figure 1 This is a schematic diagram of the process of the present invention.

[0039] Figure 2-3 This is a schematic diagram of the PDF file structure.

[0040] Figure 4 This is a screenshot showing how a PDF reader renders a PDF file to be parsed.

[0041] Figure 5 The rendered image is drawn using the CanvasRenderingContext2D.putImageData interface.

[0042] Figure 6 This is a schematic diagram of the browser processing procedure of the present invention. Detailed Implementation

[0043] To facilitate understanding by those skilled in the art, the present invention will now be described in further detail with reference to the accompanying drawings. It should be understood that, unless otherwise specified, the order of the steps mentioned in this embodiment can be adjusted according to actual needs, and they may even be performed simultaneously or partially simultaneously.

[0044] refer to Figure 1 Or 6, a browser-based PDF file parsing method, comprising the following steps:

[0045] S1, Load and parse the PDF file to obtain the descriptive text associated with the PDF file;

[0046] In this embodiment, PDF stands for Portable Document Format, a file format developed by Adobe Systems for exchanging files in a way that is independent of applications, operating systems, and hardware. Based on the PostScript language's image model, PDF files guarantee accurate colors and print quality on any printer; that is, PDF faithfully reproduces every character, color, and image of the original document. Furthermore, PDF files contain descriptive text, including the file header, body, cross-reference table, and footer.

[0047] S2, according to the PDF format rules, extract the cross-reference table of the PDF file from the description text, and parse out several object data of the PDF file according to the cross-reference table;

[0048] In step S1, we obtained the description text, referencing Figure 2-3 The PDF file includes its header, body, cross-reference table, and footer. At this point, the cross-reference table of the descriptive text is extracted. The PDF cross-reference table is a crucial part of the PDF file; it stores the physical offset addresses of all descriptive objects within the PDF file and contains information about indirect objects within the file. Typically, cross-reference tables begin with the word "xref". The purpose of the cross-reference table is to allow random access to objects within the file, so we don't need to read the entire PDF document to locate a specific object.

[0049] After extracting the cross-reference table in this step, several object data can be parsed from the PDF file according to the PDF format rules.

[0050] Specifically, the object data includes at least one or more of image elements, vector elements, and text elements. See the following example for details:

[0051] Example of file header information:

[0052] %PDF-1.4

[0053] Font information example:

[0054] 70 ob j

[0055] <<

[0056] / Type / Font

[0057] / Subtype / Type1

[0058] / Name / F1

[0059] / BaseFont / Helvetica

[0060] >>

[0061] Endob j

[0062] Example of drawing board information:

[0063] 40 ob j

[0064] <<

[0065] / Type / Page

[0066] / Parent30R

[0067] / Resources<< / Font<< / F170R>> / ProcSet60R>>

[0068] / MediaBox[00612792]

[0069] / Contents 50R

[0070] >>

[0071] endob j

[0072] Example of element information:

[0073] 5 0ob j

[0074] << / Length 44>>

[0075] stream

[0076] BT

[0077] / F1 24Tf

[0078] 100 100 Td(Hello World)Tj

[0079] ET

[0080] endstream

[0081] endobj

[0082] In order to match the actual situation of different elements in the object data, such as content and parameters, this application can adopt different strategies for different object data and perform the required steps.

[0083] S3, locate and read the object data, and compose content elements based on the location information and / or size information of the object data;

[0084] In step S2, we obtained the object data. In this step, we further retrieve the specific content from the object data. A PDF file contains information such as images and text from the object data, as well as information such as the placement and size of these images and text. This allows the PDF reader to reconstruct a page based on this information and display it to the user. Therefore, the images, text, and other information in the object data, including the placement and size of these images and text, are important content that the browser needs to obtain and parse. For example... Figure 4 The PDF file shown includes a blank background as a graphic layer, a cat image smaller than the background as an image, and the text "I am a cat" as text.

[0085] Then, this step corresponds the location of this information with the canvas information, which is used to determine the size of the final displayed image and the position of the elements on the image. Through this step, a complete content element can be formed.

[0086] S4. Based on the browser's rendering rules, convert the corresponding content in the content element into a Document Object Model (DOM) node described in Hypertext Markup Language (HTML) + Cascading Style Sheets (CSS).

[0087] Specifically, in S4.1, if the object data includes image elements, converting the corresponding content in the content elements into Document Object Model (DOM) nodes described in Hypertext Markup Language (HTML) + Cascading Style Sheets (CSS) format according to the browser's rendering rules includes:

[0088] The image element is drawn on the browser's HTMLCanvasElement canvas using the browser's CanvasRenderingContext2D.putImageData interface, and the Uniform Resource Locator (URL) of the image element is obtained by calling the browser's HTMLCanvasElement.toDataURL interface.

[0089] The URL is converted into the node type of the DOM node described in HTML, and the image attributes in the image element are converted into CSS format description content.

[0090] In this step, `CanvasRenderingContext2D.putImageData` is a Canvas 2D API method that draws data from an existing `ImageData` object to a bitmap. For example, you can set the image's drawing area, drawing path, and drawing style in the browser. See [reference needed]. Figure 5 You can draw an image using the CanvasRenderingContext2D.putImageData interface. Figure 5 The image shows rectangles, lines, numbers, etc., with a width of w and a height of h. The HTMLCanvasElement interface provides properties and methods for manipulating the layout and representation of the <canvas> element.

[0091] The CanvasRenderingContext2D.putImageData interface can draw a corresponding rectangle on the HTMLCanvasElement canvas based on information such as the canvas size of the layer list. This rectangle is then used to fill the corresponding layer.

[0092] The `HTMLCanvasElemen.toDataURL` interface returns a data URI containing an image. The `type` parameter specifies the image type, which defaults to PNG. In this step, the image parsed in the previous steps is used to obtain the corresponding URL via the `HTMLCanvasElemen.toDataURL` interface. This URL is then used by the browser to retrieve the image, allowing it to read the corresponding image.

[0093] The pixel data is drawn onto the HTMLCanvasElement canvas by calling the browser's CanvasRenderingContext2D.putImageData, and then the image address (base64 URL) is obtained by calling HTMLCanvasElement.toDataURL.

[0094] In this step, Figure 4 The image obtained from the image conversion process is converted into the corresponding DOM node as follows:

[0095] <imgsrc="image address" / >

[0096] The corresponding CSS style is:

[0097]

[0098] S4.2, if the object data includes text elements and / or vector elements, the step of converting the corresponding content in the content elements into Document Object Model (DOM) nodes described in Hypertext Markup Language (HTML) + Cascading Style Sheets (CSS) format includes:

[0099] Convert the element type corresponding to the text element and / or vector element to the node type of the DOM node described in HTML, and convert the information attributes in the text element and / or vector element to description content in CSS format.

[0100] In this step, text elements and / or vector elements can be directly converted in the browser. For text elements, simply call the browser's `document.createElement` interface to create a `span` HTML element, fill the text content into the `span` element, and then add the corresponding CSS styles for the text, adjusting its size, font, color, and other properties. For vector elements, you can also directly draw a corresponding shape, such as a rectangle, using the browser's canvas drawing interface. Based on the information in the layer list, adjust the rectangle's size, deformation, and other parameters to obtain the corresponding CSS styles.

[0101] For example, in this step, Figure 4 The text in the document is converted into its corresponding DOM node as follows:

[0102] I am a cat

[0103] The corresponding CSS style is:

[0104]

[0105] S5, the browser renders the content corresponding to the PDF file based on the Document Object Model (DOM) nodes described in Hypertext Markup Language (HTML) and Cascading Style Sheets (CSS).

[0106] Furthermore, the process of rendering the content of the PDF file by the browser based on the Document Object Model (DOM) nodes described in Hypertext Markup Language (HTML) and Cascading Style Sheets (CSS) includes:

[0107] The browser's HTMLElement.appendChild function is invoked to render the DOM node onto the browser's page, thus obtaining the content corresponding to the PDF file.

[0108] The `HTMLElement.appendChild` interface can modify the runtime content of an HTML file in various ways through the HTML Document Object Model (DOM). It's used to add new elements to an existing document or move elements on the page. Ultimately, this is reflected in the browser. Figure 4 The same visual effect.

[0109] Furthermore, the process of finding and reading the object data includes:

[0110] If the object data includes font data and / or media data, read the element ID of the font data and / or media data according to the cross-reference table, and find and read the font data and / or media data according to the element ID.

[0111] The content elements composed based on the location information and / or size information of the object data include:

[0112] The font data and / or media data, together with the position information and / or size information and / or canvas information of the object data, form a content element.

[0113] In this step, the data of each object is first read. If the object data contains fonts or media, the corresponding fonts or media are found using the ID of the element according to the cross-reference table in the second step, and then inserted into the element. Finally, a complete content element is formed by matching the position and size information on these data with the position of the canvas information.

[0114] Furthermore, the process of rendering the content of the PDF file by the browser based on the Document Object Model (DOM) nodes described in Hypertext Markup Language (HTML) and Cascading Style Sheets (CSS) includes:

[0115] The browser's HTMLElement.appendChild function is invoked to render the DOM node onto the browser's page, thus obtaining the content corresponding to the PDF file.

[0116] The `HTMLElement.appendChild` interface can modify the runtime content of an HTML file in various ways through the HTML Document Object Model (DOM). It's used to add new elements to an existing document or move elements on the page. Ultimately, this is reflected in the browser. Figure 4 The same visual effect.

[0117] A browser-based PDF file parsing system includes the following modules:

[0118] The description text acquisition module is used to load and parse the PDF file to obtain the description text associated with the PDF file;

[0119] The object data parsing module is used to extract the cross-reference table of the PDF file from the description text according to the PDF format rules, and parse out several object data of the PDF file according to the cross-reference table;

[0120] The content element construction module is used to find and read the object data, and to assemble content elements based on the location information and / or size information of the object data.

[0121] The webpage format conversion module is used to convert the corresponding content in the content element into a Document Object Model (DOM) node described in Hypertext Markup Language (HTML) + Cascading Style Sheets (CSS) format according to the browser's rendering rules.

[0122] The rendering module is used by the browser to render the content of the PDF file corresponding to the DOM nodes described in the format of Hypertext Markup Language (HTML) and Cascading Style Sheets (CSS).

[0123] A computer-readable storage medium storing a computer program that, when executed by a processor, implements the aforementioned browser-based PDF file parsing method.

[0124] Those skilled in the art will understand that embodiments of the present invention can be provided as methods, systems, or computer program products. Therefore, the present invention can take the form of a completely hardware embodiment, a completely software embodiment, or an embodiment combining software and hardware aspects. Furthermore, the present invention can take the form of a computer program product embodied on one or more computer-usable storage media (including, but not limited to, disk storage, CD-ROM, optical storage, etc.) containing computer-usable program code.

[0125] This invention is described with reference to flowchart illustrations and / or block diagrams of methods, apparatus (systems), and computer program products according to embodiments of the invention. It will be understood that each block of the flowchart illustrations and / or block diagrams, and combinations of blocks in the flowchart illustrations and / or block diagrams, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, special-purpose computer, embedded processor, or other programmable data processing apparatus to produce a machine, such that the instructions, which execute via the processor of the computer or other programmable data processing apparatus, generate instructions for implementing the flowchart illustrations and / or block diagrams. Figure 1 One or more processes and / or boxes Figure 1 A device that provides the functions specified in one or more boxes.

[0126] These computer program instructions may also be stored in a computer-readable storage medium that can direct a computer or other programmable data processing device to function in a particular manner, such that the instructions stored in the computer-readable storage medium produce an article of manufacture including instruction means, which are implemented in a process Figure 1 One or more processes and / or boxes Figure 1 The function specified in one or more boxes.

[0127] These computer program instructions may also be loaded onto a computer or other programmable data processing equipment to cause a series of operational steps to be performed on the computer or other programmable equipment to produce a computer-implemented process, thereby providing instructions that execute on the computer or other programmable equipment for implementing the process. Figure 1 One or more processes and / or boxes Figure 1 The steps of the function specified in one or more boxes.

[0128] Although preferred embodiments of the invention have been described, those skilled in the art, upon learning the basic inventive concept, can make other changes and modifications to these embodiments. Therefore, the appended claims are intended to be interpreted as including both the preferred embodiments and all changes and modifications falling within the scope of the invention.

[0129] Obviously, those skilled in the art can make various modifications and variations to this invention without departing from its spirit and scope. Therefore, if these modifications and variations fall within the scope of the claims of this invention and their equivalents, this invention also intends to include these modifications and variations.

Claims

1. A browser-based PDF file parsing method, characterized in that: Includes the following steps: Load and parse the PDF file to obtain the descriptive text associated with the PDF file; According to the PDF format rules, extract the cross-reference table of the PDF file from the description text, and parse out several object data of the PDF file based on the cross-reference table; The process involves finding and reading the object data, and assembling content elements based on the location information and / or size information and / or canvas information of the object data. The process of finding and reading the object data includes: if the object data includes font data and / or media data, reading the element ID of the font data and / or media data based on the cross-reference table, and finding and reading the font data and / or media data based on the element ID. The content elements composed based on the location information and / or size information of the object data include: The font data and / or media data are combined with the position information and / or size information and / or canvas information of the object data to form content elements; According to the browser's rendering rules, the corresponding content in the content element is converted into a Document Object Model (DOM) node described in Hypertext Markup Language (HTML) + Cascading Style Sheets (CSS). Wherein, if the object data includes image elements, the step of converting the corresponding content in the content elements into Document Object Model (DOM) nodes described in Hypertext Markup Language (HTML) + Cascading Style Sheets (CSS) format according to the browser's rendering rules includes: The image element is drawn on the browser's HTMLCanvasElement canvas using the browser's CanvasRenderingContext2D.putImageData interface, and the Uniform Resource Locator (URL) of the image element is obtained by calling the browser's HTMLCanvasElement.toDataURL interface. The URL is converted into the node type of the DOM node described in HTML, and the image attributes in the image element are converted into CSS format description content; Wherein, if the object data includes text elements and / or vector elements, the step of converting the corresponding content in the content elements into Document Object Model (DOM) nodes described in Hypertext Markup Language (HTML) + Cascading Style Sheets (CSS) format includes: Convert the element type corresponding to the text element and / or vector element to the node type of the DOM node described in HTML, and convert the information attributes in the text element and / or vector element to description content in CSS format; The content of the PDF file is rendered by the browser based on the Document Object Model (DOM) nodes described in the format of Hypertext Markup Language (HTML) and Cascading Style Sheets (CSS). Specifically, the browser's HTMLElement.appendChild function is called to render the DOM nodes onto the browser's page, thereby obtaining the content of the PDF file.

2. The PDF file parsing method based on a browser according to claim 1, characterized in that: The process of loading and parsing the PDF file to obtain the descriptive text associated with the PDF file includes: The PDF file is loaded by a browser, and the browser's FileReader.readAsString interface is called to parse the PDF file and obtain the descriptive text associated with the PDF file.

3. The PDF file parsing method based on a browser according to claim 1, characterized in that: The object data includes at least one or more of the following: image elements, vector elements, and text elements.

4. A browser-based PDF file parsing system, characterized in that: Includes the following modules: The description text acquisition module is used to load and parse the PDF file to obtain the description text associated with the PDF file; The object data parsing module is used to extract the cross-reference table of the PDF file from the description text according to the PDF format rules, and parse out several object data of the PDF file according to the cross-reference table; A content element construction module is used to find and read the object data, and to compose content elements according to the position information and / or size information of the object data. The process of finding and reading the object data includes: if the object data includes font data and / or media data, reading the element ID of the font data and / or media data according to the cross-reference table, and finding and reading the font data and / or media data according to the element ID. The content elements composed based on the location information and / or size information of the object data include: The font data and / or media data are combined with the position information and / or size information and / or canvas information of the object data to form content elements; A webpage format conversion module is used to convert the corresponding content in the content element into a Document Object Model (DOM) node described in Hypertext Markup Language (HTML) + Cascading Style Sheets (CSS) format according to the browser's rendering rules; wherein, if the object data includes image elements, the conversion of the corresponding content in the content element into a DOM node described in HTML + CSS format according to the browser's rendering rules includes: The image element is drawn on the browser's HTMLCanvasElement canvas using the browser's CanvasRenderingContext2D.putImageData interface, and the Uniform Resource Locator (URL) of the image element is obtained by calling the browser's HTMLCanvasElement.toDataURL interface. The URL is converted into the node type of the DOM node described in HTML, and the image attributes in the image element are converted into CSS format description content; Wherein, if the object data includes text elements and / or vector elements, the step of converting the corresponding content in the content elements into Document Object Model (DOM) nodes described in Hypertext Markup Language (HTML) + Cascading Style Sheets (CSS) format includes: Convert the element type corresponding to the text element and / or vector element to the node type of the DOM node described in HTML, and convert the information attributes in the text element and / or vector element to description content in CSS format; The rendering module is used to render the content corresponding to the PDF file through the browser based on the Document Object Model (DOM) nodes described in the format of Hypertext Markup Language (HTML) and Cascading Style Sheets (CSS). Specifically, it is used to: call the browser's HTMLElement.appendChild function to render the DOM nodes onto the browser's page to obtain the content corresponding to the PDF file.

5. A computer-readable storage medium storing a computer program, characterized in that, When the computer program is executed by the processor, it implements a browser-based PDF file parsing method according to any one of claims 1 to 3.

Images