Document display method, electronic equipment, computer storage medium and computer program product

By combining web rendering and native rendering technologies, a cross-platform and multi-end unified PDF document display is achieved, solving the problems of inconsistent user experience and high development costs in the existing technology, and improving performance and user experience.

CN119883450APending Publication Date: 2025-04-25UC MOBILE CHINA CO LTD
View PDF 0 Cites 0 Cited by

Patent Information

Application Number
CN202411678003.0
Authority / Receiving Office
CN · China
Patent Type
Applications(China)
Current Assignee / Owner
Filing Date
2024-11-21
Publication Date
2025-04-25

AI Technical Summary

Technical Problem

The existing PDF document solutions have inconsistent user experiences on different operating systems and devices, and are costly to develop and maintain.

Method used

Using a hybrid rendering method combining web rendering and native rendering, the document rendering engine is used to render the document content natively, and the interactive components are loaded into the web view using web rendering technology.

Benefits of technology

It realizes cross-platform and multi-end unified document display, reduces adaptation work for different platforms, reduces development costs, and improves page loading speed and first-screen rendering second opening rate.

✦ Generated by Eureka AI based on patent content.

Smart Images

  • Figure CN119883450A_ABST
    Figure CN119883450A_ABST
Patent Text Reader

Abstract

The embodiment of the invention provides a document display method, electronic equipment, a computer storage medium and a computer program product. The document display method comprises the steps of creating a webpage view in response to a document display request for a target document; interactive component rendering is carried out in a webpage rendering mode, and the rendered interactive component is loaded to an interactive component display area in the webpage view; and performing document content native rendering based on the document source file of the target document through a document rendering engine to obtain a native rendering result, and loading the native rendering result to a document content display area in the webpage view. According to the embodiment of the invention, a mixed rendering mode of combining webpage rendering and native rendering is adopted, document display of the target document is realized, the method has the advantages of cross-platform, multi-terminal unification and small development workload, and the page loading speed can be increased.
Need to check novelty before this filing date? Find Prior Art

Description

Technical Field

[0001] The embodiments of the present application relate to the field of computer technology, and in particular to a document display method, an electronic device, a computer storage medium, and a computer program product. Background Art

[0002] With the rapid development of information technology and the advent of the digital age, PDF (Portable Document Format) has become a widely used document format because of its advantages of maintaining format consistency on different devices and platforms and facilitating sharing and storage.

[0003] The development and maintenance costs of related PDF document solutions are high, and the user experience is often inconsistent for different operating systems and devices. Summary of the invention

[0004] In view of this, an embodiment of the present application provides a document display method, including:

[0005] In response to a document display request for a target document, creating a web page view;

[0006] Rendering the interactive component in a web page rendering manner, and loading the rendered interactive component into an interactive component display area within the web page view;

[0007] The document content is natively rendered based on the target document through the document rendering engine to obtain a native rendering result, and the native rendering result is loaded into the document content display area inside the web page view.

[0008] According to a second aspect of an embodiment of the present application, another document display method is provided, which is applied to a client device, and the method includes:

[0009] In response to a document display request for a target document, create a web page view, and obtain the target document from a server device;

[0010] Rendering the interactive component in a web page rendering manner, and loading the rendered interactive component into an interactive component display area within the web page view;

[0011] The document content is natively rendered based on the target document through the document rendering engine to obtain a native rendering result, and the native rendering result is loaded into the document content display area inside the web page view.

[0012] According to the third aspect of an embodiment of the present application, there is provided an electronic device, comprising: a processor, a memory, a communication interface and a communication bus, wherein the processor, the memory and the communication interface communicate with each other via the communication bus; the memory is used to store at least one executable instruction, and the executable instruction enables the processor to perform an operation corresponding to the method described in the first aspect or the second aspect.

[0013] According to a fourth aspect of an embodiment of the present application, a computer storage medium is provided, on which a computer program is stored. When the program is executed by a processor, the method described in the first aspect or the second aspect is implemented.

[0014] According to the document display solution provided in the embodiment of the present application, when a document display request is received, a web page view is created; thereafter, on the one hand, an interactive component for receiving interactive information is loaded in the above-created web page view by means of web page rendering; on the other hand, a native rendering method is adopted to perform native rendering of the document content, and the native rendering result is simultaneously added to the document content display area in the above-mentioned web page view.

[0015] The above document display solution adopts a hybrid rendering method that combines web page rendering and native rendering to realize the document display of the target document. Specifically, web page rendering is used for interactive component rendering, and native rendering is used for document content rendering. Among them, the advantages of using web page rendering to render interactive components are: first, this method is based on front-end page technology, which can achieve the effect of one-time development and multi-terminal adaptation. The development product can achieve consistent user interface and functions on multiple platforms, that is, it has the advantages of cross-platform and multi-terminal unification; secondly, compared with native technology development, the use of web page rendering can reduce the adaptation work for different platforms, that is, reduce the development workload.

[0016] The advantage of using native rendering to render document content is that native rendering uses the rendering engine that comes with the system or platform to perform rendering operations, rather than being implemented through a third-party middle-layer plug-in (such as a browser's software renderer, etc.). Native rendering can be accelerated by the underlying graphics processing hardware unit, so the document loads faster, that is, it has fast and smooth rendering performance. In addition, since the native rendering process in the embodiments of the present application does not need to rely on any external plug-ins, the rendering of document content can also be achieved across platforms.

[0017] In summary, the embodiment of the present application adopts a hybrid rendering method that combines web page rendering and native rendering to achieve document display of the target document. It has the advantages of cross-platform, multi-terminal unification and low development workload. It has the characteristics of architectural consistency, functional consistency and experience consistency on different platforms. It is suitable for multi-terminal iteration scenarios. When it is necessary to perform code iteration and upgrade, a code modification operation can be performed once to achieve synchronous updates of multiple platforms, effectively reducing the cost of later architecture maintenance. In addition, it can also improve the page loading speed and the first screen rendering opening rate. Especially for the scenario of fast sliding of large documents, it can improve the frame rate of page sliding while improving the web page rendering opening rate. BRIEF DESCRIPTION OF THE DRAWINGS

[0018] In order to more clearly illustrate the embodiments of the present application or the technical solutions in the prior art, the drawings required for use in the embodiments or the description of the prior art will be briefly introduced below. Obviously, the drawings described below are only some embodiments recorded in the embodiments of the present application. For ordinary technicians in this field, other drawings can also be obtained based on these drawings.

[0019] Figure 1 A flowchart of a document display method according to an embodiment of the present application;

[0020] Figure 2 A schematic diagram of the basic architecture of a document reader according to an embodiment of the present application;

[0021] Figure 3 A schematic diagram of the core architecture of a document reader according to an embodiment of the present application;

[0022] Figure 4 A schematic diagram of an exemplary system applicable to the document display method of an embodiment of the present application;

[0023] Figure 5 A schematic diagram of an offline document loading process according to an embodiment of the present application;

[0024] Figure 6 A flowchart of another document display method provided according to an embodiment of the present application;

[0025] Figure 7 A schematic diagram of an online document loading process according to an embodiment of the present application;

[0026] Figure 8 A structural block diagram of a document display device provided according to an embodiment of the present application;

[0027] Fig. 9 A structural block diagram of another document display device provided according to an embodiment of the present application;

[0028] Fig.10 The present invention is a schematic diagram of the structure of an electronic device provided according to an embodiment of the present application. DETAILED DESCRIPTION

[0029] In order to enable those skilled in the art to better understand the technical solutions in the embodiments of the present application, the technical solutions in the embodiments of the present application will be clearly and completely described below in conjunction with the drawings in the embodiments of the present application. Obviously, the described embodiments are only part of the embodiments of the present application, not all of the embodiments. All other embodiments obtained by ordinary technicians in this field based on the embodiments in the embodiments of the present application should fall within the scope of protection of the embodiments of the present application.

[0030] The specific implementation of the embodiment of the present application is further explained below in conjunction with the accompanying drawings of the embodiment of the present application.

[0031] Reference Figure 1 , Figure 1 The following is a flowchart of a method for displaying a document according to an embodiment of the present application. The method for displaying a document according to an embodiment of the present application may include the following steps:

[0032] Step 102: Create a web page view in response to a document display request for a target document.

[0033] Specifically, when a user wants to preview or read a target document, a preset document preview operation can be performed. When the device executing the document display method provided in the embodiment of the present application detects the above-mentioned document preview operation, it is determined that a document display request for the above-mentioned target document has been received. In the embodiment of the present application, the specific content of the document preview operation is not limited, and can be customized according to actual conditions or user usage habits. Exemplarily, the document preview operation for the target document can be a single-click operation, a double-click operation, or a drag operation on the icon corresponding to the target document, or a document preview virtual icon can be displayed in the display interface in advance. When a single-click, double-click, or drag operation of the user on the document preview virtual icon is detected, it is determined that the document preview operation is detected, and so on.

[0034] The target document in the embodiment of the present application may be a document in any format, for example, a document in Portable Document Format (PDF), a document in Word format, a document in Presentation Document (PowerPoint, PPT) format, and so on.

[0035] Step 104 , rendering the interactive component by means of web page rendering, and loading the rendered interactive component into the interactive component display area inside the web page view.

[0036] Specifically, an interactive component display area can be planned in the created web page view, and the area is used to display the interactive components to the user. During the user's reading of the target document, the interactive components in the above-mentioned interactive component display area can interact with the device to achieve dynamic updating of the page content, so that the content finally displayed in the page is closer to the user's reading needs. In the embodiment of the present application, there is no limitation on the specific representation form of the interactive component, and the interactive intention represented by the interactive component, which can be customized according to the actual situation. Exemplarily, it can include interactive components for further processing of the target document (such as save processing, save processing, export processing, print processing, etc.), and it can also include interactive components for editing the document content displayed on the page (such as font adjustment, font size adjustment, etc.), and so on.

[0037] In some of the embodiments, the above step 104 can be specifically implemented as follows: obtaining an HTML (Hypertext Markup Language) file containing interactive component information; parsing the HTML file, and rendering the Web page based on the parsing result to obtain an interactive component rendering result; creating an interactive component instance, and loading the instance into the interactive component display area inside the web page view.

[0038] Step 106, using the document rendering engine, natively renders the document content based on the target document to obtain a native rendering result, and loads the native rendering result into the document content display area inside the web page view.

[0039] Specifically, in this step, the document rendering engine for executing document rendering tasks provided by the device corresponding system or platform can be used to perform native rendering of the document content. After obtaining the native rendering result, the result is loaded into the document content display area in the web page view created in the above step 102. Thus, the user can read or preview the document content in the interface, and can further interact with the displayed document content through the interactive components in the interactive component display area.

[0040] The above-mentioned document display scheme of the embodiment of the present application adopts a hybrid rendering method that combines web page rendering and native rendering to realize the document display of the target document. Specifically, the web page rendering method is used for interactive component rendering, and the native rendering method is used for document content rendering. Among them, the advantages of using web page rendering to render interactive components are: first, this method is based on front-end page technology, which can achieve the effect of one-time development and multi-terminal adaptation. The development product can achieve consistent user interface and functions on multiple platforms, that is: it has the advantages of cross-platform and multi-terminal unification; secondly, compared with native technology development, the use of web page rendering can reduce the adaptation work for different platforms, that is, reduce the development workload.

[0041] The advantage of using native rendering to render document content is that native rendering uses the rendering engine built into the system or platform to perform rendering operations, rather than being implemented through a third-party middle-layer plug-in (such as a browser's software renderer, etc.). Native rendering can be accelerated by the underlying graphics processing hardware unit, so the document loads faster, that is, it has fast and smooth rendering performance. In addition, since the native rendering process in the embodiments of the present application does not need to rely on any external plug-ins, the rendering of document content can also be achieved across platforms.

[0042] In summary, the embodiment of the present application adopts a hybrid rendering method that combines web page rendering and native rendering to achieve document display of the target document. It has the advantages of cross-platform, multi-terminal unification and low development workload. It has the characteristics of architectural consistency, functional consistency and experience consistency on different platforms. It is suitable for multi-terminal iteration scenarios. When it is necessary to perform code iteration and upgrade, a code modification operation can be performed once to achieve synchronous updates of multiple platforms, effectively reducing the cost of later architecture maintenance. In addition, it can also improve the page loading speed and the first screen rendering opening rate. Especially for the scenario of fast sliding of large documents, it can improve the frame rate of page sliding while improving the web page rendering opening rate.

[0043] The document display method provided in the embodiment of the present application can be executed by any appropriate device with data processing capabilities, including but not limited to: a PC and a server.

[0044] Optionally, in some of the embodiments, loading the native rendering result into the document content display area inside the web page view includes:

[0045] Generate native document view based on native rendering results;

[0046] Use the embedded view method to embed the native document view into the document content display area inside the web view.

[0047] Specifically, in the above embodiment of the present application, after obtaining the native rendering result by native rendering, a native document view can be generated first, and then the generated native document view can be embedded into the document content display area in the web page view by using an embedded view, i.e., Embed View. Through the above view embedding operation, the native document reading view has been embedded into the web page view, so that the user can access and use the native document reader function in the web browser without downloading and installing a separate document reader application. Therefore, the complexity of the user operation process can be reduced, the convenience of use can be improved, and the user stickiness can be increased.

[0048] Optionally, in some of the embodiments, the process of embedding the native document view into the document content display area inside the web page view by using the embedded view may specifically include:

[0049] Create an embed tag in the document content display area inside the web view;

[0050] The native document view is used to replace the embed tag in the document content display area, so as to embed the native document view into the document content display area inside the web page view.

[0051] Specifically, in the above embodiment of the present application, by embedding a tag (ie: <embed> Tags) to embed the external native document view into the web page view. During the embedding process, the uniform resource locator and type of the native document view can be specified without complex JavaScript or other codes. Therefore, the embedding process is relatively simple. In addition, <embed> The tag element usually has good compatibility in different browsers and operating systems, and can achieve the effect of displaying the same content in multiple environments, so it has good cross-platform compatibility.

[0052] Optionally, in some of the embodiments, the target document may be a document in a portable document format; correspondingly, the process of performing native rendering of the document content using the target document by the document rendering engine to obtain the native rendering result may specifically include:

[0053] Get the target document; parse the target document through the PDFium open source rendering engine, and perform native rendering of the document content based on the parsing result to obtain the native rendering result.

[0054] Specifically, PDFium is an open source PDF document rendering engine used to render PDF files in browsers. PDFium uses vector graphics rendering technology to ensure that PDF files are presented with high fidelity, and supports hardware acceleration mode, which uses the GPU instead of the CPU to complete rendering tasks, improving rendering performance. In addition, PDFium supports iOS, Android, macOS, and Web platforms, and native rendering based on PDFium can achieve cross-platform rendering of document content.

[0055] In addition, PDFium also provides a rich API for developers to customize and expand functions. Therefore, in the embodiment of the present application, the basic framework of the PDF reader kernel can be built based on PDFium, and the API provided by PDFium can be used to expand rich functions such as editing and version rearrangement, thereby providing users with a high-performance, highly available cross-platform PDF reader.

[0056] Optionally, in some of the embodiments, the document display method may further include:

[0057] Create a text editing layer in the document content display area;

[0058] Extract the original text content displayed in the document content display area, and use web page rendering to draw the text content inside the editing display layer;

[0059] In response to a text editing operation in the editing display layer, displaying edited text content in the editing display layer, and modifying the target document based on the edited text content;

[0060] The document rendering engine uses the modified document to render the document, obtains the edited native rendering result, and updates the native rendering result in the document content display area.

[0061] Specifically, after the display of the target document content is completed, the above embodiment of the present application also extracts the original text content of the target document, and then converts the extracted content into HTML elements through web page rendering in the display layer and displays it in the newly created text editing layer, so that the user can perform text editing operations. After the text editing operation is detected, the HTML elements displayed in the text editing layer can be reformatted (edited) according to the operation, and then the target document is modified based on the HTML elements (edited text content) obtained by the reformatting, and then the document is rendered based on the modified document using native rendering, so as to display the updated native rendering result to the user.

[0062] Through the above process, in addition to realizing the document preview and reading functions, function customization is also carried out to expand the editing and writing back functions of the document, further enriching the scalability and maintainability of the solution and improving the user experience. In addition, since the above process only converts the native rendering results and HTML elements at the display layer in order to receive editing interaction information, and does not adopt the "import-export" rendering method of converting the entire document to other formats and then rendering based on other formats, it can effectively improve the response speed to user editing operations.

[0063] Optionally, in some of the embodiments, the document display method may further include:

[0064] Create a reading layer in the document content display area and obtain the layout information corresponding to the preset reading mode;

[0065] Extract the original text content displayed in the document content display area;

[0066] Using web page rendering, the text content is drawn inside the reading layer according to the layout information, so as to display the document content according to the preset reading mode.

[0067] Specifically, in the above-mentioned embodiments of the present application, after the display of the target document content is completed, the displayed content can also be rearranged to provide different reading modes to the user, thereby further improving the user's usage experience.

[0068] The above-mentioned typesetting information may be information pre-set according to different reading modes for representing the arrangement position relationship between the original texts, etc. In the embodiment of the present application, the specific content of the typesetting information is not limited, and it can be customized according to the corresponding reading mode.

[0069] See also Figure 2 , Figure 2 Schematic diagram of the basic structure of the document reader according to the embodiment of the present application. Figure 2 The basic architecture of the document reader used to implement the document display method provided by this application is explained:

[0070] In terms of the application platform, the document reader used to implement the document display method provided by the present application can be applied to the PC side or the mobile side. As for the mobile side, it can also be applied to different operating systems, such as: Android system, IOS system, H5 system, etc.

[0071] At the service level, a hybrid rendering service combining web page rendering and native rendering is provided. In addition, the original text content can be extracted and converted into HTML elements by web page rendering, and then the above HTML elements are rearranged according to the user's editing interaction information.

[0072] In terms of functions, the embodiment of the present application adopts a hybrid rendering method that combines web page rendering and native rendering to provide users with basic document reading preview display functions. In addition, by expanding the document rendering engine, it is also possible to further provide users with text editing functions, multiple different reading mode functions, and functions such as copying and searching the original text content.

[0073] In terms of platform embedding, the document reader used to implement the document display method provided by this application can also embed external service logic, thereby further improving and enriching the service functions of the document reader. This application embodiment does not limit the specific content of the external service logic to be embedded, and can be customized according to actual needs and the functions to be implemented. Figure 2 , for example, the embeddable external service logic may include: Android JNI (Java Native Interface), IOS Objective-C and WebAssembly (wasm for short), etc. Among them, JNI can realize the interaction between Java code and other language codes (such as C or C++), that is, through the access of this interface, Java layer code and native code can be called each other; IOSObjective-C is a programming language used to develop IOS and macOS applications. This language allows developers to access a large number of frameworks and interfaces in IOS, which can provide powerful support for building graphical user interfaces and processing files and data; WebAssembly is a virtual instruction set architecture that aims to provide near-native performance, so that programs written in languages ​​such as C / C++ can run efficiently on the Web platform.

[0074] As far as the document reader kernel level is concerned, the first thing to explain is that the document reader kernel is the part of the document reader that is responsible for implementing the core functions of the document reader (such as web page rendering, script execution, and network requests). For PDF documents, the embodiments of this application can mainly build the basic framework of the document reader kernel part based on the open source PDFium kernel, so as to realize basic functions such as document parsing and page native rendering. Furthermore, functional expansion can also be carried out on the basis of the above basic functions provided by the PDFium kernel, such as: edit write-back function, different reading mode functions, and so on.

[0075] See also Figure 3 , Figure 3 Schematic diagram of the core architecture of the document reader according to the embodiment of the present application. Figure 3 right Figure 2 The core part of the basic architecture of the document reader is further explained as follows:

[0076] Figure 3 The core part of the document reader shown uses the open source PDFium as the basic framework, and implements the document preview function through the capabilities of PDFium itself. At the same time, PDFium can also be extended to enable the document reader to further have the functions of editing and saving, as well as other customized extension capabilities set according to actual conditions, such as: image editing, extraction, different reading modes, adding watermarks, adding font libraries, multi-threaded processing, etc.

[0077] In addition to the PDFium framework, other PDF document processing libraries can be added to the document reader core. Figure 3 As shown, PDFKit can be added. PDFKit is a JavaScript PDF generation library. PDFKit can be used to easily create more complex and multi-page PDF documents. PDFKit provides simple PDF-related APIs to help developers easily generate high-quality PDF files. In addition, PDFKit also provides functions such as online block loading, font library cropping and decompression. Among them, the online block loading function can be used to solve the problem of slow loading of large-volume PDF files when browsing online, and improve the user experience; the font library cropping function and decompression mainly involve font subsetting, which is used to reduce the size of PDF files. This function is especially useful for large documents or documents that need to embed multiple fonts. It can significantly reduce the size of the file, making the generated PDF file more compact.

[0078] See also Figure 4 , Figure 4 This is a schematic diagram of an exemplary system for the document display method of the embodiment of the present application. For ease of understanding, first combine Figure 4 The application scenario of the document display method provided in the embodiment of the present application is explained.

[0079] like Figure 4 As shown, the system 400 may include a server 402, a communication network 404 and / or one or more user devices (ie, client devices) 406. Figure 4 The example in FIG. 1 is a plurality of user devices.

[0080] The server 402 may be any suitable device storing the original document corresponding to the document, including but not limited to a server cluster, a computing cloud server cluster, etc. In some embodiments, the server 402 may perform any suitable function. For example, in some embodiments, the server 402 may receive a target document acquisition request sent by the user device 406 to return the corresponding target document to the user device 406 for the user to view.

[0081] In some embodiments, the communication network 404 can be any suitable combination of one or more wired and / or wireless networks. For example, the communication network 404 can include any one or more of the following: the Internet, an intranet, a wide area network (WAN), a local area network (LAN), a wireless network, a digital subscriber line (DSL) network, a frame relay network, an asynchronous transfer mode (ATM) network, a virtual private network (VPN) and / or any other suitable communication network. The user device 406 can be connected to the communication network 404 via one or more communication links (e.g., communication link 412), and the communication network 404 can be linked to the service end 402 via one or more communication links (e.g., communication link 414). The communication link can be any communication link suitable for transmitting data between the user device 406 and the service end 402, such as a network link, a dial-up link, a wireless link, a hard-wired link, any other suitable communication link or any suitable combination of such links.

[0082] User equipment 406 may include any one or more user equipment suitable for document presentation. In some embodiments, user equipment 406 may include equipment of any suitable type. For example, in some embodiments, user equipment 406 may include a mobile device, a tablet computer, a laptop computer, a desktop computer, and / or any other suitable type of user equipment.

[0083] The document display method provided in the above embodiment of the present application can be Figure 4The client device 406 in the system shown is executed. Further, in combination with actual application situations, the document display method executed by the client device 406 can be divided into two different scenarios: an offline document loading scenario, and an online document loading scenario. Among them, the online document loading scenario refers to the target document being stored in the server device, and during the document display process, the client device 406 obtains the document from the server device, and then displays the target document through the above-mentioned document display method. The offline document loading scenario refers to the scenario where the target document is stored locally on the client device 406, and during the document display process, there is no need to make a document request to the server device.

[0084] See also Figure 5 , Figure 5 Schematic diagram of offline document loading process according to an embodiment of the present application. Figure 5 The following is an example of the document display process in the offline document loading scenario:

[0085] When the user wants to preview or read a PDF document stored locally in the client device 406, a preset document preview operation can be performed. When the client device 406 detects the above document preview operation, it is determined that a document display request for the above PDF document has been received. After that, a Web container (a container for running native code in a Web browser) can be loaded, a web page view can be created through the Web container, and interactive components are rendered in a web page rendering manner, and the rendered interactive components are loaded into the interactive component display area inside the web page view; at the same time, the Web container can also send an instruction to load an embedded view to the PDF reader kernel part, so that the PDF reader kernel part performs an embedded view loading operation, specifically: through PDFium in the PDF reader kernel part, the document content is parsed based on the target document, and native rendering is performed according to the parsing result, and a native document view is generated based on the native rendering result; after obtaining the native document view, the native document view is loaded into the document content display area inside the web page view in an embedded view manner, so that the embedded view loading process is completed, and the PDF reader kernel can return a loading completion notification to the Web container, thereby achieving the purpose of displaying the complete PDF document content to the user.

[0086] Reference Figure 6 , Figure 6 The document display method provided in the embodiment of the present application can be performed by Figure 4 The client device 406 in the system shown in the figure executes. Specifically, the document display method provided in this embodiment includes the following steps:

[0087] Step 602: Create a web page view in response to a document display request for a target document.

[0088] Step 604, obtaining the target document from the server device.

[0089] Specifically, the target document is stored in the server device, so the client device 406 needs to obtain the document from the server device.

[0090] In some of the embodiments, the specific process of obtaining the target document from the server device may include: sending a document acquisition request for the target document to the server device; receiving document download address information returned by the server device; and obtaining the target document based on the document download address information.

[0091] Step 606, rendering the interactive component in a web page rendering manner, and loading the rendered interactive component into the interactive component display area within the web page view.

[0092] Step 608, using the document rendering engine, natively renders the document content based on the target document to obtain a native rendering result, and loads the native rendering result into the document content display area inside the web page view.

[0093] Optionally, in some of the embodiments, the document display method may further include:

[0094] Extract the original text content displayed in the document content display area, and draw the text content in the document content display area using a web page rendering method; in response to a text editing operation, display the edited text content, and modify the target document based on the edited text content; use the modified document to perform document rendering through a document rendering engine to obtain a native rendering result after editing, and update the native rendering result in the document content display area; return the modified document to the server device so that the server device updates the target document.

[0095] Optionally, in some of the above embodiments, the process of extracting the original text content displayed in the document content display area and drawing the text content in the document content display area by using a web page rendering method may specifically include:

[0096] Perform text extraction on the target document displayed in the document display area to obtain the original text content information and original text layout information contained in the target text; create a text editing layer in the document display area; and draw the text content in the text editing layer in accordance with the original text content information and original text layout information using web page rendering.

[0097] Correspondingly, in response to the text editing operation, the process of displaying the edited text content may specifically include:

[0098] In response to a text editing operation in the text editing layer, the edited text content is displayed in the text editing layer.

[0099] Specifically, in the above embodiment of the present application, a text editing layer is created in the document display area to cover the document content originally obtained by native rendering. After that, the original text content information and original text layout information of the target document are extracted, and then based on the above information extracted, the document content originally obtained by native rendering is restored in the above text editing layer by web rendering, that is: the extracted original text content information is converted into HTML elements by web rendering in the display layer and displayed in the newly created text editing layer so that users can perform text editing operations. When a text editing operation is detected, the HTML elements displayed in the text editing layer can be rearranged according to the operation, and then the target document is modified based on the HTML elements (edited text content) obtained by the rearrangement, and then the document is rendered based on the modified document by native rendering, so as to display the updated native rendering result to the user.

[0100] Since the above process only converts the native rendering results and HTML elements at the display layer in order to receive editing interaction information, and does not adopt the "import-export" rendering method of converting the entire document into other formats and then rendering based on other formats, it can effectively improve the response speed to user editing operations.

[0101] Optionally, in some of the embodiments, after returning the modified document to the server device so that the server device updates the target document, the document display method may further include:

[0102] Send a document acquisition request for a target document to a server device; receive document download address information returned by the server device; based on the document download address information, acquire an updated target document, and display the document based on the updated target document.

[0103] Specifically, after the server device updates the target document according to the modified document, if the client device sends a document acquisition request for the target document to the server device again, the updated target document can be obtained according to the document download address, and the new version of the target document after editing can be displayed to the user in a timely manner.

[0104] Optionally, in some of the embodiments, the document display method may further include:

[0105] Detecting a user's reading mode selection operation and determining typesetting information corresponding to the target reading mode selected by the user;

[0106] Create a reading layer in the document content display area;

[0107] Extract the original text content displayed in the document content display area;

[0108] Using web page rendering, the text content is drawn inside the reading layer according to the typesetting information and original text content.

[0109] Specifically, after the target document content is displayed, the displayed content can also be rearranged to provide different reading modes to the user, further improving the user experience. The above-mentioned layout information can be information pre-set according to different reading modes for characterizing the arrangement position relationship between the original texts. In the embodiment of the present application, the specific content of the layout information is not limited, and can be customized according to the corresponding reading mode.

[0110] Optionally, in some of the embodiments, the interactive component display area may include multiple reading mode interactive components, and one reading mode interactive component corresponds to one reading mode.

[0111] Correspondingly, the above process of detecting the user's reading mode determination operation and determining the typesetting information corresponding to the target reading mode selected by the user may include:

[0112] In response to detecting a component interaction operation by a user in the interactive component display area, determining from a plurality of reading mode interactive components in the interactive component display area;

[0113] According to the preset configuration information, the layout information corresponding to the target reading mode interaction component is obtained.

[0114] Specifically, in the above embodiment, in the interactive component display area, multiple different reading mode interactive components corresponding to different reading modes are displayed by web page rendering. When the user wants to read the target document according to a target reading mode, the target reading mode interactive component corresponding to the target reading mode can be subjected to a preset component interaction operation (such as single click, double click, drag, etc.). At this time, the client device can obtain the typesetting information corresponding to the above target reading mode interactive component (that is, the typesetting information corresponding to the target reading mode) according to the preset configuration information, and then draw the text content contained in the target document in the reading layer by web page rendering according to the above typesetting information.

[0115] In the above-mentioned embodiments of the present application, by providing reading mode interaction components corresponding to different reading modes, users can conveniently provide relevant information of the target reading mode they want, so that the client can better display the target document to the user according to the reading mode the user wants, thereby effectively improving the user's reading experience.

[0116] The document display method provided in the above embodiment of the present application is Figure 4 The document display solution in the online document loading scenario executed by the client device 406 in the system shown.

[0117] See also Figure 7 , Figure 7 Schematic diagram of online document loading process according to an embodiment of the present application. Figure 7 The document display process in the above online document loading scenario is exemplified as follows:

[0118] When the user wants to preview or read a PDF document in the network disk, a preset document preview operation can be performed. When the client device 406 detects the above document preview operation, it is determined that a document display request for the above PDF document is received. Afterwards, the Web container can be loaded, a web page view can be created through the Web container, and interactive components can be rendered using web page rendering, and the rendered interactive components can be loaded into the interactive component display area inside the web page view; at the same time, the Web container can also send the identification information of the above-mentioned online document to the server device to obtain the download address of the PDF document from the server device, and then the Web container passes the above-mentioned download address to the PDF reader kernel part, and sends an instruction to load the embedded view to the PDF reader kernel part, so that the PDF reader kernel part performs the embedded view loading operation, specifically: the PDF reader kernel part first requests PDF document data from the server device according to the above-mentioned download address; after obtaining the PDF document data, the document content is parsed based on the PDF document data through PDFium, and native rendering is performed according to the parsing result, and a native document view is generated based on the native rendering result; after obtaining the native document view, the native document view is loaded into the document content display area inside the web page view using the embedded view method, at this point, the embedded view loading process is completed, and the PDF reader kernel can return a loading completion notification to the Web container, thereby achieving the purpose of displaying the complete PDF document content to the user.

[0119] In the above-mentioned document display scheme of the embodiment of the present application, the client device 406 adopts a hybrid rendering method that combines web page rendering and native rendering to realize the document display of the target document. Specifically, the web page rendering method is used for interactive component rendering, and the native rendering method is used for document content rendering. Among them, the advantages of using web page rendering to render interactive components are: first, this method is based on the front-end page technology, which can achieve the effect of one-time development and multi-terminal adaptation. The development product can achieve consistent user interface and functions on multiple platforms, that is: it has the advantages of cross-platform and multi-terminal unification; secondly, compared with native technology development, the use of web page rendering can reduce the adaptation work for different platforms, that is, reduce the development workload.

[0120] The advantage of using native rendering to render document content is that native rendering uses the rendering engine that comes with the system or platform to perform rendering operations, rather than being implemented through a third-party middle-layer plug-in (such as a browser's software renderer, etc.). Native rendering can be accelerated by the underlying graphics processing hardware unit, so the document loads faster, that is, it has fast and smooth rendering performance. In addition, since the native rendering process in the embodiments of the present application does not need to rely on any external plug-ins, the rendering of document content can also be achieved across platforms.

[0121] In addition, more importantly, as mentioned above, the above-mentioned document display method is implemented by native rendering when rendering document content, and the native rendering process can be implemented across platforms and has fast and smooth rendering performance. Therefore, for online document loading scenarios, through the document display solution provided by the embodiment of the present application, the native rendering results are loaded on the page end for display, which can well achieve the cross-platform and multi-end unified effect, so that the architecture, experience and functions of each end are consistent. Moreover, with the help of native rendering capabilities, the loading speed of online documents can be effectively improved, so that the performance of online document loading can be aligned with the performance of local document loading.

[0122] Figure 8 The document display device provided in the embodiment of the present application includes:

[0123] A first webpage view creation module 802, configured to create a webpage view in response to a document display request for a target document;

[0124] A first web page rendering module 804 is used to render the interactive component by using a web page rendering method, and load the rendered interactive component into an interactive component display area inside the web page view;

[0125] The first native rendering module 806 is used to perform native rendering of the document content based on the target document through the document rendering engine, obtain a native rendering result, and load the native rendering result into the document content display area inside the web page view.

[0126] Optionally, in some of the embodiments, the first native rendering module 806, when executing the step of loading the native rendering result into the document content display area inside the web page view, is specifically used to:

[0127] Generate native document view based on native rendering results;

[0128] Use the embedded view method to embed the native document view into the document content display area inside the web view.

[0129] Optionally, in some of the embodiments, the first native rendering module 806, when executing the step of embedding the native document view into the document content display area inside the web page view in an embedded view manner, is specifically configured to:

[0130] Create an embed tag in the document content display area inside the web view;

[0131] The native document view is used to replace the embed tag in the document content display area, so as to embed the native document view into the document content display area inside the web page view.

[0132] Optionally, in some of the embodiments, the target document is a document in a portable document format; the first native rendering module 806, when executing the step of performing native rendering of the document content based on the target document by the document rendering engine to obtain a native rendering result, is specifically used to:

[0133] Get the target document; parse the target document through the PDFium open source rendering engine, and perform native rendering of the document content based on the parsing result to obtain the native rendering result.

[0134] Optionally, in some of the embodiments, the document display device further includes:

[0135] The first editing module is used to create a text editing layer in the document content display area; extract the original text content displayed in the document content display area, and use web page rendering to draw the text content inside the editing display layer; in response to the text editing operation in the editing display layer, display the edited text content in the editing display layer, and modify the target document based on the edited text content; through the document rendering engine, use the modified document to render the document, obtain the edited native rendering result, and update the native rendering result in the document content display area.

[0136] Optionally, in some of the embodiments, the document display device further includes:

[0137] The layout rearrangement module is used to create a reading layer in the document content display area and obtain the layout information corresponding to the preset reading mode; extract the original text content displayed in the document content display area; use the web page rendering method to draw the text content inside the reading layer according to the layout information, so as to display the document content according to the preset reading mode.

[0138] Optionally, in some embodiments, the first webpage rendering module 804 is specifically configured to:

[0139] Get the HTML file containing the interactive component information;

[0140] Parse the HTML file, render the web page based on the parsing result, and obtain the interactive component rendering result;

[0141] Create an interactive component instance and load the instance into the interactive component display area inside the web view.

[0142] The document display device of this embodiment is used to implement the corresponding document display method in the aforementioned embodiment, and has the beneficial effects of the corresponding method embodiment, which will not be repeated here. In addition, the functional implementation of each module in the document display device of this embodiment can refer to the description of the corresponding part in the aforementioned method embodiment, which will not be repeated here.

[0143] Fig. 9 The document display device provided in the embodiment of the present application is applied to a client device and includes:

[0144] A second web page view creation module 902, for creating a web page view in response to a document display request for a target document, and obtaining the target document from a server device;

[0145] The second web page rendering module 904 is used to render the interactive component by using the web page rendering method, and load the rendered interactive component into the interactive component display area in the web page view;

[0146] The second native rendering module 906 is used to perform native rendering of the document content based on the target document through the document rendering engine, obtain a native rendering result, and load the native rendering result into the document content display area inside the web page view.

[0147] Optionally, in some of the embodiments, the second webpage view creating module 902, when executing the step of acquiring the target document from the server device, is specifically configured to:

[0148] Sending a document acquisition request for a target document to a server device;

[0149] Receive the document download address information returned by the server device;

[0150] Get the target document based on the document download address information.

[0151] Optionally, in some of the embodiments, the document display device further includes:

[0152] The second editing module is used to extract the original text content displayed in the document content display area, and draw the text content in the document content display area using a web page rendering method; in response to a text editing operation, the edited text content is displayed, and a target document is modified based on the edited text content; through a document rendering engine, the modified document is used for document rendering to obtain a native rendering result after editing, and the native rendering result in the document content display area is updated; and the modified document is returned to the server device so that the server device updates the target document.

[0153] The document display device of this embodiment is used to implement the corresponding document display method in the aforementioned embodiment, and has the beneficial effects of the corresponding method embodiment, which will not be repeated here. In addition, the functional implementation of each module in the document display device of this embodiment can refer to the description of the corresponding part in the aforementioned method embodiment, which will not be repeated here.

[0154] Reference Fig.10 , shows a schematic diagram of the structure of an electronic device according to an embodiment of the present application. The specific embodiment of the present application does not limit the specific implementation of the electronic device.

[0155] like Fig.10 As shown, the electronic device may include: a processor (processor) 1002 , a communication interface (Communications Interface) 1004 , a memory (memory) 1006 , and a communication bus 1008 .

[0156] in:

[0157] The processor 1002 , the communication interface 1004 , and the memory 1006 communicate with each other via a communication bus 1008 .

[0158] The communication interface 1004 is used to communicate with other electronic devices or servers.

[0159] The processor 1002 is used to execute the program 1010, and specifically can execute the relevant steps in the above method embodiment.

[0160] Specifically, the program 1010 may include program codes, which include computer operation instructions.

[0161] The processor 1002 may be a CPU, or an application specific integrated circuit ASIC (Application Specific Integrated Circuit), or one or more integrated circuits configured to implement the embodiments of the present application. The one or more processors included in the smart device may be processors of the same type, such as one or more CPUs; or processors of different types, such as one or more CPUs and one or more ASICs.

[0162] The memory 1006 is used to store the program 1010. The memory 1006 may include a high-speed RAM memory, and may also include a non-volatile memory (non-volatile memory), such as at least one disk memory.

[0163] The program 1010 may include multiple computer instructions. Specifically, the program 1010 may enable the processor 1002 to execute operations corresponding to the method described in any of the aforementioned method embodiments through the multiple computer instructions.

[0164] The specific implementation of each step in program 1010 can refer to the corresponding description of the corresponding steps and units in the above method embodiment, and has corresponding beneficial effects, which will not be repeated here. Those skilled in the art can clearly understand that for the convenience and simplicity of description, the specific working process of the above-described devices and modules can refer to the corresponding process description in the above method embodiment, which will not be repeated here.

[0165] The present application also provides a computer storage medium on which a computer program is stored, and when the program is executed by a processor, the method described in any of the above-mentioned multiple method embodiments is implemented. The computer storage medium includes but is not limited to: a compact disc read-only memory (CD-ROM), a random access memory (RAM), a floppy disk, a hard disk or a magneto-optical disk, etc.

[0166] An embodiment of the present application also provides a computer program product, including computer instructions, which instruct a computing device to execute operations corresponding to any one of the above-mentioned multiple method embodiments.

[0167] In addition, it should be noted that the user-related information (including but not limited to user device information, user personal information, etc.) and data (including but not limited to sample data used to train the model, data used for analysis, stored data, displayed data, etc.) involved in the embodiments of the present application are all information and data authorized by the user or fully authorized by all parties, and the collection, use and processing of relevant data need to comply with the relevant laws, regulations and standards of the relevant countries and regions, and provide corresponding operation entrances for users to choose to authorize or refuse.

[0168] It should be pointed out that, according to the needs of implementation, the various components / steps described in the embodiments of the present application can be split into more components / steps, or two or more components / steps or partial operations of components / steps can be combined into new components / steps to achieve the purpose of the embodiments of the present application.

[0169] The above-mentioned method according to the embodiment of the present application can be implemented in hardware, firmware, or implemented as software or computer code that can be stored in a recording medium (such as a CD-ROM, RAM, floppy disk, hard disk or magneto-optical disk), or implemented as a computer code originally stored in a remote recording medium or a non-temporary machine-readable medium downloaded through a network and stored in a local recording medium, so that the method described herein can be stored in such software processing on a recording medium using a general-purpose computer, a dedicated processor or programmable or dedicated hardware (such as an application-specific integrated circuit (ASIC) or a field programmable gate array (FPGA)). It can be understood that a computer, a processor, a microprocessor controller or programmable hardware includes a storage component (e.g., a random access memory (RAM), a read-only memory (ROM), a flash memory, etc.) that can store or receive software or computer code, and when the software or computer code is accessed and executed by a computer, a processor or hardware, the method described herein is implemented. In addition, when a general-purpose computer accesses the code for implementing the method shown here, the execution of the code converts the general-purpose computer into a dedicated computer for executing the method shown here.

[0170] Those of ordinary skill in the art will appreciate that the units and method steps of each example described in conjunction with the embodiments disclosed herein can be implemented in electronic hardware, or a combination of computer software and electronic hardware. Whether these functions are performed in hardware or software depends on the specific application and design constraints of the technical solution. Professional and technical personnel can use different methods to implement the described functions for each specific application, but such implementation should not be considered to be beyond the scope of the embodiments of the present application.

[0171] The above implementation methods are only used to illustrate the embodiments of the present application, and are not limitations on the embodiments of the present application. Ordinary technicians in the relevant technical field can make various changes and modifications without departing from the spirit and scope of the embodiments of the present application. Therefore, all equivalent technical solutions also belong to the scope of the embodiments of the present application. The scope of patent protection of the embodiments of the present application should be limited by the claims.

Claims

1. A document display method, comprising: In response to a document display request for a target document, creating a web page view; Rendering the interactive component in a web page rendering manner, and loading the rendered interactive component into an interactive component display area within the web page view; The document content is natively rendered based on the target document through the document rendering engine to obtain a native rendering result, and the native rendering result is loaded into the document content display area inside the web page view.

2. The method according to claim 1, wherein: The step of loading the native rendering result into the document content display area within the webpage view includes: Generate a native document view according to the native rendering result; The native document view is embedded into the document content display area within the web page view by using an embedded view.

3. The method according to claim 2, wherein: The method of embedding the native document view into the document content display area inside the web page view by using an embedded view includes: Creating an embed tag in a document content display area within the web page view; The embedding tag in the document content display area is replaced with the native document view to embed the native document view into the document content display area within the web page view.

4. The method according to any one of claims 1 to 3, wherein: The target document is a document in a portable document format; The document rendering engine uses the target document to perform native rendering of the document content to obtain a native rendering result, including: Acquire the target document; The target document is parsed by the PDF i um open source rendering engine, and the document content is natively rendered based on the parsing result to obtain a native rendering result.

5. The method according to any one of claims 1 to 3, wherein: The method further comprises: Creating a text editing layer in the document content display area; Extracting the original text content displayed in the document content display area, and drawing the text content inside the editing display layer by using a web page rendering method; In response to a text editing operation in the editing display layer, displaying edited text content in the editing display layer, and modifying the target document based on the edited text content; The document rendering engine uses the modified document to perform document rendering, obtains the edited native rendering result, and updates the native rendering result in the document content display area.

6. The method according to any one of claims 1 to 3, wherein: The method further comprises: Creating a reading layer in the document content display area and obtaining typesetting information corresponding to a preset reading mode; Extracting the original text content displayed in the document content display area; The web page rendering method is adopted to draw the text content inside the reading layer according to the typesetting information, so as to display the document content according to the preset reading mode.

7. A document display method, applied to a client device, the method comprising: In response to a document display request for a target document, create a web page view, and obtain the target document from a server device; Rendering the interactive component in a web page rendering manner, and loading the rendered interactive component into an interactive component display area within the web page view; The document content is natively rendered based on the target document through the document rendering engine to obtain a native rendering result, and the native rendering result is loaded into the document content display area inside the web page view.

8. An electronic device comprising: A processor, a memory, a communication interface and a communication bus, wherein the processor, the memory and the communication interface communicate with each other via the communication bus; The memory is used to store at least one executable instruction, and the executable instruction enables the processor to perform an operation corresponding to the method according to any one of claims 1 to 7.

9. A computer storage medium having a computer program stored thereon, wherein when the program is executed by a processor, the method according to any one of claims 1 to 7 is implemented.

10. A computer program product, comprising computer instructions, wherein the computer instructions instruct a computing device to perform operations corresponding to the method according to any one of claims 1 to 7.