Visual document presentation method, apparatus, electronic device, and medium

Abstract

A visual document display method and device, electronic equipment and medium are disclosed, and the method comprises the following steps: when a visual document to be displayed is acquired, jumping to a bearing page provided with a canvas label; acquiring binary data of the visual document; converting the binary data into a document object model of the canvas, and configuring the document object model under drawing parameters in a display configuration file of a document parsing plug-in; rendering the document object model to the canvas based on the drawing parameters, and displaying on the bearing page. The binary data of the visual document is restored into the DOM of the canvas on the bearing page through the canvas label of the bearing page, so that the compatibility of the visual document is improved.

Description

Technical Field

[0001] This invention relates to the field of data processing technology, and further to methods, apparatus, electronic devices, and media for visualizing documents. Background Technology

[0002] PDF files, due to their powerful functionality and excellent user experience, are widely used in areas such as review, credentials, and sharing, serving as an important medium for users to access information online. File streaming is a common file processing method on the internet; compared to traditional files, file streaming offers greater flexibility and higher security. Combining the advantages of PDF files, PDF file streaming is widely used online, such as for file downloads, online review, and secure credentials.

[0003] As a tool for information dissemination on the internet, browsers have emerged in countless forms since the internet's inception. With the rise of mobile internet, various apps have also appeared, but they are essentially browsers. However, due to differing browser standards or even different versions of the same browser, file compatibility issues can arise. This means the same PDF file may appear differently to users on different browsers or versions. Since some files contain important information, such as a PDF's official seal, this information may be lost in some browsers. This can lead to customer distrust and negatively impact customer satisfaction. Summary of the Invention

[0004] The purpose of this invention is to provide a method, apparatus, electronic device, and computer-readable storage medium for displaying visual documents. By using the canvas tag of the hosting page to restore the binary data of the visual document into the DOM of the canvas and rendering and displaying it on the hosting page, the compatibility of the visual document is improved.

[0005] In a first aspect, to achieve the above objectives, embodiments of the present invention provide a method for visualizing document display, comprising:

[0006] When a visual document to be displayed is obtained, the user is redirected to the page with the canvas label.

[0007] Obtain the binary data of the visualization document;

[0008] The binary data is converted into a document object model for the canvas, and the document object model is configured in the drawing parameters of the display configuration file of the document parsing plugin.

[0009] The document object model is rendered onto the canvas based on the drawing parameters and displayed on the hosting page.

[0010] In a second aspect, to address the same technical problem, embodiments of the present invention provide a visual document display device, comprising:

[0011] The page navigation module is used to navigate to the loading page with a canvas label when a visual document to be displayed is obtained;

[0012] The data acquisition module is communicatively connected to the page redirection module and is used to acquire the binary data of the visualization document;

[0013] The parameter analysis module is communicatively connected to the data acquisition module and is used to convert the binary data into a document object model of the canvas and configure the document object model under the drawing parameters in the display configuration file of the document parsing plugin.

[0014] The document display module is communicatively connected to the page navigation module and the parameter analysis module, and is used to render the document object model onto the canvas based on the drawing parameters and display it on the hosting page.

[0015] In a third aspect, in order to solve the same technical problem, embodiments of the present invention provide an electronic device, including a processor, a memory, and a computer program stored in the memory and configured to be executed by the processor, the memory being coupled to the processor, and the processor executing the computer program to implement the steps in the visual document display method described above.

[0016] In a fourth aspect, in order to solve the same technical problem, embodiments of the present invention provide a computer-readable storage medium storing a computer program, wherein, when the computer program is executed, it controls the device where the computer-readable storage medium is located to perform the steps of the visualization document display method described above.

[0017] This invention provides a method, apparatus, electronic device, and computer-readable storage medium for displaying visual documents. When a visual document to be displayed is obtained, leveraging the W3C canvas standard supported by almost all browser vendors, the binary data of the visual document is restored to the canvas DOM structure using the canvas tag of the hosting page, and the visual document is then displayed accurately on the hosting page. Through this low-level restoration operation, the visual document will not suffer from compatibility issues due to browser differences. Attached Figure Description

[0018] The preferred embodiments will now be described in a clear and easy-to-understand manner, in conjunction with the accompanying drawings, to further explain the above-mentioned characteristics, technical features, advantages, and implementation methods of the present invention.

[0019] Figure 1 A flowchart illustrating a visual document display method provided in an embodiment of this application;

[0020] Figure 2 Another flowchart illustrating the visual document display method provided in this application embodiment;

[0021] Figure 3 Another flowchart illustrating the visual document display method provided in this application embodiment;

[0022] Figure 4 Another flowchart illustrating the visual document display method provided in this application embodiment;

[0023] Figure 5 Another flowchart illustrating the visual document display method provided in this application embodiment;

[0024] Figure 6 Another flowchart illustrating the visual document display method provided in this application embodiment;

[0025] Figure 7 Another flowchart illustrating the visual document display method provided in this application embodiment;

[0026] Figure 8 A schematic diagram of the structure of an electronic device provided in an embodiment of this application;

[0027] Figure 9 This is another structural schematic diagram of the electronic device provided in the embodiments of this application. Detailed Implementation

[0028] In the following description, specific details such as particular system architectures and techniques are set forth for illustrative purposes and not for limitation, in order to provide a thorough understanding of the embodiments of this application. However, those skilled in the art will understand that this application can also be implemented in other embodiments without these specific details. In other instances, detailed descriptions of well-known systems, apparatuses, circuits, and methods have been omitted so as not to obscure the description of this application with unnecessary detail.

[0029] It should be understood that, when used in this specification and the appended claims, the term "comprising" indicates the presence of the described features, integrals, steps, operations, elements and / or components, but does not exclude the presence or addition of one or more other features, integrals, steps, operations, elements, components and / or sets.

[0030] To keep the drawings concise, only the parts relevant to the invention are shown schematically in each figure, and they do not represent the actual structure of the product. Furthermore, for ease of understanding, in some figures, only one of components with the same structure or function is shown schematically, or only one is labeled. In this document, "one" can mean not only "only one" but also "more than one".

[0031] It should also be further understood that the term “and / or” as used in this application specification and the appended claims means any combination of one or more of the associated listed items and all possible combinations, and includes such combinations.

[0032] Furthermore, in the description of this application, the terms "first," "second," etc., are used only to distinguish descriptions and should not be construed as indicating or implying relative importance.

[0033] To more clearly illustrate the technical solutions in the embodiments of the present invention or the prior art, the specific implementation methods of the present invention will be described below with reference to the accompanying drawings. Obviously, the drawings described below are merely some embodiments of the present invention. For those skilled in the art, other drawings and other implementation methods can be obtained based on these drawings without any creative effort.

[0034] Please see Figure 1 , Figure 1 This is a flowchart illustrating a visual document display method provided in an embodiment of the present invention, including steps S101 to S104.

[0035] When S101 obtains the visualization document to be displayed, it jumps to the carrying page with the canvas label;

[0036] Specifically, visualized documents include, but are not limited to, PDF (Portable Document Format) documents. The canvas tag is the H5 canvas tag. Almost all browser vendors support the W3C canvas standard. Therefore, when a visualized document to be displayed is obtained, the user is redirected to the page with the canvas tag. H5 is short for HTML5, which is the fifth generation of HTML. HTML stands for Hyper Text Markup Language, a markup language used to create web pages.

[0037] The hosting page incorporates a third-party open-source project document parsing plugin (e.g., pdf.js). The document parsing plugin includes a document parsing file (e.g., pdf.worker.js) and a corresponding display configuration file (viewer.js). The document parsing file is used to parse the visual document to be displayed, and the display configuration file is used to configure the parameters when the hosting page displays the visual document to be displayed.

[0038] Please see Figure 2 , Figure 2 The flowchart of the visualization document display method provided in the embodiment of the present invention, which jumps to the carrier page with a canvas label when a visualization document to be displayed is obtained, includes steps S201 to S202.

[0039] S201 When a visual document to be displayed is obtained, the target document format that the current browser supports for direct display is obtained;

[0040] Specifically, differences in browser standards or even different versions of the same browser can lead to file compatibility issues. The same visual document may appear differently to users on different browsers or versions; for example, a visual document might display different data (such as watermarks or official seals) when opened directly in a particular browser. Therefore, when obtaining a visual document to be displayed, it's crucial to determine the target document format that the current browser supports for direct display. The current browser is the one the user uses to view the visual document; opening the document in the target format directly in the current browser will not result in data loss or display anomalies.

[0041] The target document format that the current browser supports for direct display is pre-set and can be written into the browser's configuration parameters. The target document format can be determined by comparing the complete target document opened with a specific reader with the same target document opened by the browser to be identified. If the content of the displayed target documents is the same, then the target document's format is a target document format supported by the browser to be identified. Furthermore, it is possible to manually observe and determine which document formats the browser to be identified loses data, and record this information to obtain the browser's target document format.

[0042] S202 If the target document format does not include the document format of the visualization document, then jump to the carrying page with the canvas label;

[0043] Specifically, when a visualization document to be displayed is obtained, its document format can be determined, for example, by the document's name suffix or attribute information. If the target document format does not include the visualization document's format, it means that the current browser does not support directly opening the visualization document. If the current browser directly opens the visualization document, it may cause data loss. Therefore, the user is redirected to a hosting page with a canvas tag, and the visualization document is displayed on the hosting page through canvas rendering.

[0044] S102 Obtain the binary data of the visualized document;

[0045] Specifically, the document parsing file (e.g., pdf.worker.js) needs to receive binary data, which is then converted into a canvas to obtain the binary data of the visualization document. Initially, the page retrieves the binary data from the server file stream via an AJAX request; alternatively, methods like fetch can be used to request the binary data, but this example does not specify a particular method. The AJAX request is crucial and must be configured in the request header, for example, `mimeType:'text / plain;charset=x-user-defined'`, to ensure that the returned data is the binary data of the visualization document.

[0046] Please see Figure 3 , Figure 3 The flowchart of the visualization document display method provided in the embodiment of the present invention for obtaining the binary data of the visualization document includes steps S301 to S303.

[0047] S301 Obtain the description text of the visualization document;

[0048] S302 Extracts several object data and the location information of each object data from the visualization document based on the description text;

[0049] S303 obtains the binary data of the visualization document based on the object data and the location information.

[0050] A specific visualization document contains descriptive text, which includes the document's header, body, cross-reference table, and footer. For example, the cross-reference table is a crucial part of the visualization document; it stores the physical offset addresses of all introductory objects within the document and contains information about objects between files. 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 document. Therefore, several object data points and their location information can be extracted from the visualization document based on the descriptive text. Object data includes at least one or more of the following: image elements, vector elements, and text elements. Location information includes the placement and size of each object data point within the visualization document, allowing for the reconstruction of a page and its presentation to the user. Finally, the binary data of the visualization document is obtained from the object data and location information; this binary data contains the necessary information for displaying the visualization document.

[0051] Please see Figure 4 , Figure 4 The flowchart of the visualization document display method provided in the embodiment of the present invention, which obtains the binary data of the visualization document and then stores the binary data, includes steps S401 to S403.

[0052] S401 allocates a contiguous storage space and establishes a data view of the visual document in the contiguous storage space, wherein the size of the contiguous storage space is the same as the size of the binary data;

[0053] Specifically, when binary data is acquired, contiguous storage space is allocated to store it. Therefore, the size of the contiguous storage space is the same as the size of the binary data. However, the binary data cannot be directly stored and accessed within the contiguous storage space. Instead, a data view for a visual document needs to be created within the contiguous storage space. This data view represents the format in which the binary information is stored.

[0054] S402 stores the binary data in a contiguous storage space with the data view, and references the address of the data view through preset variable parameters;

[0055] Specifically, binary data is stored in a contiguous storage space with a data view, and the stored binary data is subsequently retrieved through the data view. Furthermore, preset variable parameters are set, and these preset variable parameters are used to reference the address of the data view to facilitate data location during subsequent calls.

[0056] S403 configures the file address parameter to be previewed in the display configuration file as the preset variable parameter.

[0057] Specifically, the file address parameter to be previewed in the display configuration file will be configured as this preset variable parameter. For example, the preset variable parameter pdfRawData references the address of the data view. When the binary data is stored, the configuration item :defaultUrl: / / pdfRawData is set for the imported viewer.js, which contains the view data in memory.

[0058] In this embodiment, a preset variable parameter is set to reference the address of the data view of the contiguous storage space storing binary data, and this variable parameter is configured under the address parameter of the file to be previewed in the display configuration file, so as to determine the correct location of the binary data for calling and realize the display of the visual document.

[0059] Please see Figure 5 , Figure 5 The flowchart illustrating the process of determining the data view of the visualized document in the visualized document display method provided in the embodiment of the present invention includes steps S501 to S502.

[0060] S501 Obtain the document format of the visualized document;

[0061] S502 determines the data view of the visualized document based on the correspondence between the document format and the preset information storage format.

[0062] Specifically, the document format of the visualization document is obtained, for example, by determining the document format through the document's name suffix or attribute information. The preset information storage format mapping includes the correspondence between the document format and the data view format. The data view is a binary storage format; the number of binary bits used to store information varies depending on the file. For example, the data view of a PDF document is a Uint8Array. Therefore, the data view of the visualization document is determined based on the document format and the preset information storage format mapping.

[0063] S103 converts the binary data into a document object model for the canvas and configures the document object model under the drawing parameters in the display configuration file of the document parsing plugin;

[0064] Specifically, the document parsing file (e.g., pdf.worker.js) receives binary data, then converts it into a canvas, that is, converts the binary data into the canvas's Document Object Model (DOM). The DOM is then placed under the drawing parameters in the document parsing plugin's display configuration file. For example, once the binary data is stored, the imported viewer.js is configured with the option: `printContainer(drawing parameter) : / / canvas DOM element`.

[0065] One method for converting binary data into a document object model for a canvas is as follows: using the current browser's CanvasRenderingContext2D.putImageData interface to draw each object data in the binary data onto the current browser's HTMLCanvasElement canvas, and calling the current browser's HTMLCanvasElement.toDataURL interface to obtain the Uniform Resource Locator (URL) for each object data, converting the URL into the node type of the DOM node described in HTML, and converting the information in each object data into CSS format description content.

[0066] In this embodiment, the visual documents to be displayed are restored to their corresponding original binary files and converted into binary views in the browser's memory. Then, using the canvas standard supported by almost all browser manufacturers from the W3C, the binary views in memory are restored to the canvas DOM structure through the canvas tag of the webpage, thus solving the problem of incompatibility between various files.

[0067] Please see Figure 6 , Figure 6 The flowchart of the visualization document display method provided in the embodiment of the present invention, which converts the binary data into a document object model of the canvas and configures the document object model under the drawing parameters in the display configuration file of the document parsing plugin, includes steps S601 to S602.

[0068] S601 configures preset data at a preset address;

[0069] S602 assigns the Uniform Resource Locator (URL) of the preset data to the trusted certificate of the document parsing file of the document parsing plugin.

[0070] Specifically, the source code of the document parsing plugin's document parsing file (pdf.worker.js) has a `trustedCerts` variable, which could be a file or an image. `pdf.worker.js` uses this variable to perform various processing on the binary data; if it cannot read the trusted certificate, it will throw an error. After configuring the drawing parameters and the address of the file to be previewed in the document parsing plugin's display configuration file, you might find that the trusted certificate in `pdf.worker.js` is throwing an error, requiring you to modify the certificate address referenced in `pdf.worker.js`. Therefore, place preset data (images, files, etc. are not restricted) at a preset address, and assign the Uniform Resource Locator (URL) of this preset data to the trusted certificate of the document parsing plugin's document parsing file. The preset address can be set as needed.

[0071] S104 Renders the document object model onto the canvas based on the drawing parameters and displays it on the hosting page;

[0072] Specifically, the document object model is rendered onto the canvas based on drawing parameters, and then displayed on the hosting page via a document parsing plugin. Afterwards, UI.js and CSS can be designed to manipulate the canvas according to business needs or for a better user experience, processing the displayed document and providing a superior user experience for customers.

[0073] Furthermore, after the visual document is displayed on the hosting page, the DOM can be manipulated via API, such as page turning, rotation, and scaling, which improves customer satisfaction. Specifically, by configuring the file address parameter to be previewed in the display configuration file as a preset variable parameter, which references the address of the data view storing binary data, when adjustment instructions for the visual document displayed on the hosting page are obtained (including but not limited to zoom in, zoom out, and scroll), the binary data is located based on the file address parameter, and the document object model is adjusted according to the adjustment instructions, thereby adjusting the visual document displayed on the hosting page.

[0074] Please see Figure 7 , Figure 7 The flowchart illustrating the determination and rendering of the canvas container in the visualization document display method provided in this embodiment of the invention includes steps S701 to S705.

[0075] S701 Obtain the document page number of the visualized document;

[0076] S702 creates the same number of canvas containers according to the document page number;

[0077] S703 renders the document object model to the canvas container based on the drawing parameters;

[0078] S704 Obtain the page number of the visual document to be displayed;

[0079] S705 displays the page to be displayed on the carrying page according to the rendered canvas container and the page number.

[0080] Specifically, upon navigating to the hosting page with a canvas label, the number of pages in the visualization document is determined. A total of one number of canvas containers are created to display the visualization document, with each page corresponding to a specific canvas container. Based on the drawing parameters, the document object model of each page is rendered into its corresponding canvas container. When the visualization document has many pages, the page number to be displayed is obtained, the corresponding canvas container is determined, and then the page corresponding to that page is displayed on the hosting page.

[0081] Furthermore, if the visualization document has too many pages, creating the same number of canvas containers and rendering them simultaneously would require processing a large amount of data at the same time, placing high demands on the device. However, the current browser does not actually need to, nor can it, display all of them at once, resulting in inefficient resource utilization. Therefore, based on the current browser's display parameters and the user's display requirements, a preset number of canvas containers is set to be created. Only the page to be displayed, along with a preset range of pages before and after it, is rendered into the preset number of canvas containers, thereby reducing the amount of data that needs to be rendered at the same time.

[0082] This invention addresses the compatibility issues of visual documents using canvas. When requesting a visual document over the network, the returned binary data is converted into a binary view in the browser's memory. Then, leveraging the W3C canvas standard, which is supported by almost all browser vendors, the binary view in memory is restored to the canvas's DOM structure using the webpage's canvas tag, displaying the accurate visual document to the client. Through this low-level restoration operation, the visual document avoids compatibility issues caused by browser differences. After obtaining the canvas's DOM, developers can utilize canvas's powerful APIs to manipulate the DOM, such as page turning, rotation, and scaling, thus improving customer satisfaction.

[0083] Based on the method described in the above embodiments, this embodiment will be further described from the perspective of a visual document display device. The visual document display device can be implemented as an independent entity or integrated into an electronic device, such as a terminal, which may include a mobile phone, a tablet computer, etc.

[0084] In addition, this application also provides a visual document display device, including:

[0085] The page navigation module is used to navigate to the loading page with a canvas label when a visual document to be displayed is obtained;

[0086] The data acquisition module is communicatively connected to the page redirection module and is used to acquire the binary data of the visualization document;

[0087] The parameter analysis module is communicatively connected to the data acquisition module and is used to convert the binary data into a document object model of the canvas and configure the document object model under the drawing parameters in the display configuration file of the document parsing plugin.

[0088] The document display module is communicatively connected to the page navigation module and the parameter analysis module, and is used to render the document object model onto the canvas based on the drawing parameters and display it on the hosting page.

[0089] In specific implementation, the above modules and / or units can be implemented as independent entities, or they can be arbitrarily combined and implemented as the same or several entities. For the specific implementation of the above modules and / or units, please refer to the previous method embodiments. For the specific beneficial effects that can be achieved, please also refer to the beneficial effects in the previous method embodiments, which will not be repeated here.

[0090] Additionally, please see Figure 8 , Figure 8 This is a schematic diagram of an electronic device provided in an embodiment of the present invention. The electronic device can be a mobile terminal such as a smartphone or tablet computer. Figure 8 As shown, the electronic device 800 includes a processor 801 and a memory 802. The processor 801 and the memory 802 are electrically connected.

[0091] The processor 801 is the control center of the electronic device 800. It connects various parts of the electronic device through various interfaces and lines. By running or loading the application program stored in the memory 802 and calling the data stored in the memory 802, it executes various functions of the electronic device 800 and processes data, thereby performing overall monitoring of the electronic device 800.

[0092] In this embodiment, the processor 801 in the electronic device 800 loads the instructions corresponding to the processes of one or more application programs into the memory 802 according to the following steps, and the processor 801 runs the application programs stored in the memory 802 to realize various functions:

[0093] When a visual document to be displayed is obtained, the user is redirected to the page with the canvas label.

[0094] Obtain the binary data of the visualization document;

[0095] The binary data is converted into a document object model for the canvas, and the document object model is configured in the drawing parameters of the display configuration file of the document parsing plugin.

[0096] The document object model is rendered onto the canvas based on the drawing parameters and displayed on the hosting page.

[0097] The electronic device 800 can implement the steps in any embodiment of the visual document display provided in the embodiments of the present invention. Therefore, it can achieve the beneficial effects that any visual document display provided in the embodiments of the present invention can achieve, as detailed in the preceding embodiments, which will not be repeated here.

[0098] Please see Figure 9 , Figure 9 A detailed structural block diagram of an electronic device provided in an embodiment of this application is shown. This electronic device can be used to implement the visual document display method provided in the above embodiments. The electronic device 900 can be a mobile terminal such as a smartphone or a laptop computer.

[0099] RF circuit 910 is used to receive and transmit electromagnetic waves, converting electromagnetic waves into electrical signals and vice versa, thereby enabling communication with communication networks or other devices. RF circuit 910 may include various existing circuit elements used to perform these functions, such as antennas, radio frequency transceivers, digital signal processors, encryption / decryption chips, Subscriber Identity Module (SIM) cards, memory, etc. RF circuit 910 can communicate with various networks such as the Internet, corporate intranets, and wireless networks, or communicate with other devices via wireless networks. The aforementioned wireless networks may include cellular telephone networks, wireless local area networks (WLANs), or metropolitan area networks (MANs). The aforementioned wireless networks may use various communication standards, protocols, and technologies, including but not limited to Global System for Mobile Communication (GSM), Enhanced Data GSM Environment (EDGE), Wideband Code Division Multiple Access (WCDMA), Code Division Multiple Access (CDMA), Time Division Multiple Access (TDMA), Wireless Fidelity (Wi-Fi) (such as IEEE 802.11a, IEEE 802.11b, IEEE 802.11g, and / or IEEE 802.11n), Voice over Internet Protocol (VoIP), Worldwide Interoperability for Microwave Access (Wi-Max), other protocols for email, instant messaging, and short messages, and any other suitable communication protocols, including those that have not yet been developed.

[0100] The memory 920 can be used to store software programs and modules, such as the program instructions / modules corresponding to the visualization document display method in the above embodiment. The processor 980 executes the visualization document display process as follows by running the software programs and modules stored in the memory 920:

[0101] When a visual document to be displayed is obtained, the user is redirected to the page with the canvas label.

[0102] Obtain the binary data of the visualization document;

[0103] The binary data is converted into a document object model for the canvas, and the document object model is configured in the drawing parameters of the display configuration file of the document parsing plugin.

[0104] The document object model is rendered onto the canvas based on the drawing parameters and displayed on the hosting page.

[0105] Memory 920 may include high-speed random access memory, and may also include non-volatile memory, such as one or more magnetic storage devices, flash memory, or other non-volatile solid-state memory. In some instances, memory 920 may further include memory remotely located relative to processor 980, which can be connected to electronic device 900 via a network. Examples of such networks include, but are not limited to, the Internet, intranets, local area networks, mobile communication networks, and combinations thereof.

[0106] The input unit 930 can be used to receive input digital or character information, and to generate keyboard, mouse, joystick, optical, or trackball signal inputs related to user settings and function control. Specifically, the input unit 930 may include a touch-sensitive surface 931 and other input devices 932. The touch-sensitive surface 931, also known as a touch display screen or touchpad, can collect touch operations performed by the user on or near it (such as operations performed by the user using a finger, stylus, or any suitable object or accessory on or near the touch-sensitive surface 931), and drive the corresponding connection device according to a pre-set program. Optionally, the touch-sensitive surface 931 may include two parts: a touch detection device and a touch controller. The touch detection device detects the user's touch position and the signal generated by the touch operation, and transmits the signal to the touch controller; the touch controller receives touch information from the touch detection device, converts it into touch point coordinates, sends it to the processor 980, and can receive and execute commands from the processor 980. In addition, the touch-sensitive surface 931 can be implemented using various types such as resistive, capacitive, infrared, and surface acoustic wave. In addition to the touch-sensitive surface 931, the input unit 930 may also include other input devices 932. Specifically, other input devices 932 may include, but are not limited to, one or more of the following: physical keyboard, function keys (such as volume control buttons, power buttons, etc.), trackball, mouse, joystick, etc.

[0107] Display unit 940 can be used to display information input by the user or information provided to the user, as well as various graphical user interfaces of electronic device 900. These graphical user interfaces can be composed of graphics, text, icons, video, and any combination thereof. Display unit 940 may include display panel 941, which may optionally be configured as an LCD (Liquid Crystal Display), OLED (Organic Light-Emitting Diode), or similar form. Further, touch-sensitive surface 931 may cover display panel 941. When touch-sensitive surface 931 detects a touch operation on or near it, it transmits the information to processor 980 to determine the type of touch event. Subsequently, processor 980 provides corresponding visual output on display panel 941 according to the type of touch event. Although in the figures, touch-sensitive surface 931 and display panel 941 are implemented as two separate components to achieve input and output functions, in some embodiments, touch-sensitive surface 931 and display panel 941 can be integrated to achieve input and output functions.

[0108] Electronic device 900 may also include at least one sensor 950, such as a light sensor, a motion sensor, and other sensors. Specifically, the light sensor may include an ambient light sensor and a proximity sensor, wherein the ambient light sensor can adjust the brightness of the display panel 941 according to the ambient light level, and the proximity sensor can generate an interruption when the flip is closed or shut down. As a type of motion sensor, a gravity acceleration sensor can detect the magnitude of acceleration in various directions (generally three axes), and can detect the magnitude and direction of gravity when stationary. It can be used for applications that recognize the phone's posture (such as landscape / portrait switching, related games, magnetometer posture calibration), vibration recognition related functions (such as pedometer, tapping), etc. Other sensors that electronic device 900 may be configured with, such as gyroscopes, barometers, hygrometers, thermometers, and infrared sensors, will not be described in detail here.

[0109] Audio circuitry 960, speaker 961, and microphone 962 provide an audio interface between the user and electronic device 900. Audio circuitry 960 converts received audio data into electrical signals and transmits them to speaker 961, where speaker 961 converts them into sound signals for output. Conversely, microphone 962 converts collected sound signals into electrical signals, which are then received by audio circuitry 960, converted back into audio data, and processed by processor 980. The audio data is then transmitted via RF circuitry 910 to, for example, another terminal, or output to memory 920 for further processing. Audio circuitry 960 may also include an earphone jack to facilitate communication between peripheral headphones and electronic device 900.

[0110] Electronic device 900, through transmission module 970 (e.g., Wi-Fi module), can help users receive requests, send information, etc., providing users with wireless broadband internet access. Although transmission module 970 is shown in the figure, it is understood that it is not an essential component of electronic device 900 and can be omitted as needed without changing the essence of the invention.

[0111] The processor 980 is the control center of the electronic device 900. It connects various parts of the phone via various interfaces and lines, and performs various functions and processes data of the electronic device 900 by running or executing software programs and / or modules stored in the memory 920, and by calling data stored in the memory 920, thereby providing overall monitoring of the electronic device. Optionally, the processor 980 may include one or more processing cores; in some embodiments, the processor 980 may integrate an application processor and a modem processor, wherein the application processor mainly handles the operating system, user interface, and applications, and the modem processor mainly handles wireless communication. It is understood that the modem processor may also not be integrated into the processor 980.

[0112] The electronic device 900 also includes a power supply 990 (such as a battery) that supplies power to various components. In some embodiments, the power supply may be logically connected to the processor 980 through a power management system, thereby enabling functions such as managing charging, discharging, and power consumption through the power management system. The power supply 990 may also include one or more DC or AC power supplies, recharging systems, power fault detection circuits, power converters or inverters, power status indicators, and other arbitrary components.

[0113] Although not shown, the electronic device 900 also includes cameras (such as front-facing cameras and rear-facing cameras), Bluetooth modules, etc., which will not be described in detail here. Specifically, in this embodiment, the display unit of the electronic device is a touch screen display, and the mobile terminal also includes a memory and one or more programs, wherein one or more programs are stored in the memory and configured to be executed by one or more processors. One or more programs contain instructions for performing the following operations:

[0114] When a visual document to be displayed is obtained, the user is redirected to the page with the canvas label.

[0115] Obtain the binary data of the visualization document;

[0116] The binary data is converted into a document object model for the canvas, and the document object model is configured in the drawing parameters of the display configuration file of the document parsing plugin.

[0117] The document object model is rendered onto the canvas based on the drawing parameters and displayed on the hosting page.

[0118] In practice, the above modules can be implemented as independent entities or combined in any way to be implemented as the same or several entities. For the specific implementation of the above modules, please refer to the previous method implementation examples, which will not be repeated here.

[0119] Those skilled in the art will understand that all or part of the steps in the various methods of the above embodiments can be implemented by instructions, or by instructions controlling related hardware. These instructions can be stored in a computer-readable storage medium and loaded and executed by a processor. Therefore, embodiments of this application provide a storage medium storing multiple instructions that can be loaded by a processor to execute the steps of any embodiment of the visual document display method provided in this application.

[0120] The storage medium may include: read-only memory (ROM), random access memory (RAM), disk or optical disk, etc.

[0121] Since the instructions stored in the storage medium can execute the steps in any embodiment of the visual document display method provided in this application, the beneficial effects that any visual document display method provided in this application can achieve can be realized. For details, please refer to the previous embodiments, which will not be repeated here.

[0122] The foregoing has provided a detailed description of a visual document display device, electronic device, and storage medium provided in the embodiments of this application. Specific examples have been used to illustrate the principles and implementation methods of this application. The descriptions of the embodiments above are merely for the purpose of helping to understand the methods and core ideas of this application. Furthermore, those skilled in the art will recognize that, based on the ideas of this application, there will be changes in the specific implementation methods and application scope. Therefore, the content of this specification should not be construed as a limitation of this application. Moreover, those skilled in the art can make several improvements and modifications without departing from the principles of this application, and these improvements and modifications are also considered to be within the protection scope of this application.

Claims

1. A method for visualizing document display, characterized in that, include: When a visualization document to be displayed is obtained, the user is redirected to a page with a canvas label; wherein, the visualization document contains descriptive text, which includes the file header information, file body, cross-reference table and file footer of the visualization document; Obtain the binary data of the visualization document; The binary data is converted into a document object model of the canvas, and the document object model is configured in the drawing parameters of the display configuration file of the document parsing plugin; wherein, the display configuration file is viewer.js, the drawing parameters are the printContainer configuration item in viewer.js, and the printContainer configuration item is configured as the DOM element of the canvas; The document object model is rendered onto the canvas based on the drawing parameters and displayed on the hosting page; The step of obtaining the binary data of the visualization document includes: obtaining the descriptive text of the visualization document; extracting several object data and position information of each object data from the visualization document based on the descriptive text; wherein the object data includes one or more of image elements, vector elements, and text elements, and the position information is the placement position and size information of each object data in the visualization document; and obtaining the binary data of the visualization document based on the object data and the position information. After obtaining the binary data of the visualization document, the process includes: allocating contiguous storage space and establishing a data view of the visualization document in the contiguous storage space, wherein the size of the contiguous storage space is the same as the size of the binary data; storing the binary data in the contiguous storage space with the data view, calling the stored binary data through the data view, and referencing the address of the data view through preset variable parameters; configuring the file address parameter to be previewed in the display configuration file as the preset variable parameter. The step of obtaining the binary data of the visualization document includes: converting the binary data received from the document parsing file into a canvas to obtain the binary data of the visualization document.

2. The visual document display method according to claim 1, characterized in that, After rendering the document object model onto the canvas based on the drawing parameters and displaying it on the hosting page, the process further includes: Obtain adjustment instructions for the visual document displayed on the page; The binary data is located based on the address parameter of the file to be previewed, and the document object model is adjusted according to the adjustment instruction.

3. The visual document display method according to claim 2, characterized in that, Before allocating contiguous storage space and establishing a data view of the visualized document in the contiguous storage space, the method further includes: Obtain the document format of the visualized document; The data view of the visualized document is determined based on the correspondence between the document format and the preset information storage format.

4. The visual document display method according to claim 1 or 2, characterized in that, After converting the binary data into a document object model for the canvas and configuring the document object model under the drawing parameters in the display configuration file of the document parsing plugin, the method further includes: Configure preset data at the preset address; Assign the Uniform Resource Locator (URL) of the preset data to the trusted certificate of the document parsing file of the document parsing plugin.

5. The visual document display method according to claim 1, characterized in that, When a visual document to be displayed is obtained, the process of navigating to a loading page with a canvas label includes: When a visual document to be displayed is obtained, the target document format that the current browser supports for direct display is determined. If the target document format does not include the document format of the visualization document, then redirect to the hosting page with the canvas tab.

6. The visual document display method according to claim 1, characterized in that, When a visual document to be displayed is obtained, after navigating to the hosting page with a canvas label, the process further includes: Obtain the document page number of the visualized document; Create the same number of canvas containers as the document's page number; The process of rendering the document object model onto the canvas based on the drawing parameters and displaying it on the hosting page includes: The document object model is rendered onto the canvas container based on the drawing parameters. Obtain the page number of the visualization document to be displayed; Based on the rendered canvas container and the page number, the page to be displayed is shown on the carrying page.

7. A visual document display device, characterized in that, include: The page navigation module is used to navigate to a page with a canvas label when a visualization document to be displayed is obtained; wherein, the visualization document contains descriptive text, which includes the file header information, file body, cross-reference table and file footer of the visualization document; The data acquisition module is communicatively connected to the page redirection module and is used to acquire the binary data of the visualization document; The parameter analysis module, which is connected to the data acquisition module, is used to convert the binary data into a document object model of the canvas and configure the document object model under the drawing parameters in the display configuration file of the document parsing plugin; wherein, the display configuration file is viewer.js, the drawing parameters are the printContainer configuration item in viewer.js, and the printContainer configuration item is configured as a DOM element of the canvas; The document display module is communicatively connected to the page navigation module and the parameter analysis module, and is used to render the document object model onto the canvas based on the drawing parameters and display it on the carrying page; The step of obtaining the binary data of the visualization document includes: obtaining the descriptive text of the visualization document; extracting several object data and position information of each object data from the visualization document based on the descriptive text; wherein the object data includes one or more of image elements, vector elements, and text elements, and the position information is the placement position and size information of each object data in the visualization document; and obtaining the binary data of the visualization document based on the object data and the position information. After obtaining the binary data of the visualization document, the process includes: allocating contiguous storage space and establishing a data view of the visualization document in the contiguous storage space, wherein the size of the contiguous storage space is the same as the size of the binary data; storing the binary data in the contiguous storage space with the data view, calling the stored binary data through the data view, and referencing the address of the data view through preset variable parameters; configuring the file address parameter to be previewed in the display configuration file as the preset variable parameter. The step of obtaining the binary data of the visualization document includes: converting the binary data received from the document parsing file into a canvas to obtain the binary data of the visualization document.

8. An electronic device, characterized in that, The method includes a processor, a memory, and a computer program stored in the memory and configured to be executed by the processor, the memory being coupled to the processor, and the processor executing the computer program to implement the steps of the visual document display method as described in any one of claims 1 to 6.

9. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores a computer program, wherein, when the computer program is executed, it controls the device on which the computer-readable storage medium is located to perform the steps of the visual document display method as described in any one of claims 1 to 6.

Images