Method and apparatus for displaying pdf in web page

Abstract

Embodiments of the present application provide a PDF display method and display device in a web page, and relate to the technical field of financial technology. The method comprises rendering two PDFs on a web page using html rendering and picture rendering respectively; displaying one of the PDFs by setting the DOM element of the PDF to display or play back the PDF. The method parallelly uses html rendering and picture rendering to realize the display and playback of the PDF, and solves the problem that the PDF in the web page under the rrweb framework cannot be played back.

Description

TECHNICAL FIELD

[0001] The application relates to the technical field of financial technology, in particular to a PDF display method and display device in a web page. BACKGROUND

[0002] Internet insurance sales behavior needs to be traceable, and insurance institutions record and save the transaction behavior of selling insurance products on self-operated network platforms through sales page management and sales process record, so that the transaction behavior can be checked.

[0003] rrweb is an open source library for realizing web page recording and playback, which can save the DOM in the page and user operation behavior (finger / mouse up and down sliding / clicking / page turning / scaling) as serializable data to realize remote playback (also known as user operation behavior traceability), but rrweb currently does not support pdf playback, but most of the protocols viewed by users during internet insurance sales are realized through the pdf mode. SUMMARY

[0004] The purpose of the embodiment of the application is to provide a PDF display method and display device in a web page, which parallelly use html rendering mode and picture rendering mode to realize the display and playback of PDF, and solve the problem of unplayable PDF in the web page under the rrweb framework.

[0005] The application embodiment provides a PDF display method in a web page, which comprises the following steps:

[0006] Two PDFs are rendered on a web page using html rendering mode and picture rendering mode respectively;

[0007] One of the PDFs is displayed by setting the DOM element of the PDF, so that the PDF is displayed or played back.

[0008] In the above implementation process, the two rendering modes are used in parallel to render the PDF, the html rendering mode ensures the normal reading of the screen reader in the barrier-free mode, and the picture rendering mode ensures that the content collected by rrweb can be normally played back, thereby solving the problem of unplayable PDF in the web page under the rrweb framework.

[0009] Further, the step of rendering two PDFs on a web page using html rendering mode and picture rendering mode respectively comprises the following steps:

[0010] The upper first PDF is rendered on the web page using html rendering mode;

[0011] The lower second PDF is rendered using picture rendering mode.

[0012] In the implementation process, the first PDF of the upper layer is rendered by using an html rendering mode, and the lower layer is rendered by using a picture rendering mode, so that the two rendering modes are used in parallel to render the PDF.

[0013] Further, the displaying of one of the PDFs by setting the DOM elements of the PDFs comprises:

[0014] setting the DOM element of the first PDF to be displayed in the user interface, and sending a rendering completion signal to the second PDF;

[0015] setting the DOM element of the second PDF to be hidden in the user interface, and sending a rendering completion signal to the first PDF.

[0016] In the implementation process, the DOM element of the first PDF of the upper layer is set to be visible, and the DOM element of the lower layer is set to be invisible, so that the user can only see the first PDF of the upper layer, and the normal use and display of the user are not affected.

[0017] Further, the displaying of one of the PDFs by setting the DOM elements of the PDFs comprises:

[0018] In the playback, the style of the first PDF is set to be not displayed by using a media query technology;

[0019] The style of the second PDF is set to be displayed by using a media query technology.

[0020] In the implementation process, in the playback, the setting is changed by using a media query technology, so that the switching of the display and the hiding of the two PDFs is solved.

[0021] Further, the method further comprises:

[0022] After the rendering of the second PDF is listened to, a scroll listening event is registered in the first PDF to obtain a scroll distance of the DOM element;

[0023] The scroll distance is sent to the second PDF to scroll the DOM element of the second PDF to a corresponding position.

[0024] In the implementation process, the DOM element of the second PDF is synchronized by listening to the scroll of the DOM element of the first PDF.

[0025] The embodiment of the application further provides a PDF display device in a web page, and the device comprises:

[0026] The rendering module is configured to render the two PDFs on the web page using an html rendering mode and a picture rendering mode respectively.

[0027] The display setting module is configured to display one of the PDFs by setting a DOM element of the PDF, so as to display or play back the PDF.

[0028] In the implementation process, the two rendering modes are used in parallel to render the PDFs, the html rendering mode ensures normal reading of the screen reader in the barrier-free mode, and the picture rendering mode ensures normal playback of the content collected by the rrweb, thereby solving the problem that the PDF in the web page cannot be played back in the rrweb framework.

[0029] Further, the rendering module comprises:

[0030] The html rendering module is configured to render the upper first PDF on the web page using the html rendering mode.

[0031] The picture rendering module is configured to render the lower second PDF using the picture rendering mode.

[0032] In the implementation process, the upper first PDF is rendered using the html rendering mode, and the lower second PDF is rendered using the picture rendering mode, so that the two rendering modes are used in parallel to render the PDFs.

[0033] The display setting module comprises:

[0034] The first display setting module is configured to set a DOM element of the first PDF to be displayed in the user interface, and send a rendering completion signal to the second PDF.

[0035] The second display setting module is configured to set a DOM element of the second PDF to be hidden in the user interface, and send a rendering completion signal to the first PDF.

[0036] In the implementation process, the DOM element of the upper first PDF is set to be visible, and the DOM element of the lower second PDF is set to be invisible, so that the user can only see the upper first PDF, and the normal use and display of the user are not affected.

[0037] Embodiments of the present application also provide an electronic device, which comprises a memory and a processor, the memory is configured to store a computer program, and the processor is configured to run the computer program to enable the electronic device to perform the PDF display method in the web page according to any one of the above embodiments.

[0038] The embodiment of the present application further provides a readable storage medium, wherein the readable storage medium stores computer program instructions, and the computer program instructions are read and run by a processor to execute the PDF display method in the web page according to any one of the above. BRIEF DESCRIPTION OF DRAWINGS

[0039] In order to more clearly illustrate the technical solutions of the embodiments of the present application, the following will briefly introduce the drawings needed to be used in the embodiments of the present application. It should be understood that the following drawings only show some of the embodiments of the present application, and therefore should not be regarded as a limitation to the scope, and for those skilled in the art, other related drawings can also be obtained without creative labor on the basis of these drawings.

[0040] Figure 1 A flow chart of the PDF display method in the web page provided by the embodiment of the present application is provided.

[0041] Figure 2 Two rendering mode schematic diagrams provided by the embodiment of the present application are provided.

[0042] Figure 3 A return visit schematic diagram provided by the embodiment of the present application is provided.

[0043] Figure 4 A specific flow chart of the PDF display method in the web page provided by the embodiment of the present application is provided.

[0044] Figure 5 A PDF rendering flow chart provided by the embodiment of the present application is provided.

[0045] Figure 6 A display setting flow chart provided by the embodiment of the present application is provided.

[0046] Figure 7 A display setting flow chart during the return visit provided by the embodiment of the present application is provided.

[0047] Figure 8 A synchronization setting flow chart provided by the embodiment of the present application is provided.

[0048] Figure 9 A structural block diagram of the PDF display device in the web page provided by the embodiment of the present application is provided.

[0049] Figure 10 A structural block diagram of another PDF display device in the web page provided by the embodiment of the present application is provided.

[0050] Icon:

[0051] 100 - rendering module; 101 - html rendering module; 102 - picture rendering module; 200 - display setting module; 211 - first display setting module; 212 - second display setting module; 221 - first playback setting module; 222 - second playback setting module; 300 - synchronization module. DETAILED DESCRIPTION

[0052] The technical solutions in the embodiments of the present application will be described below with reference to the drawings in the embodiments of the present application.

[0053] It should be noted that similar reference numerals and letters refer to similar items in the following drawings, and therefore, once an item is defined in one drawing, it need not be further defined and explained in subsequent drawings. Meanwhile, in the description of the present application, the terms "first", "second", and the like are only used to distinguish description, and cannot be understood as indicating or implying relative importance.

[0054] Embodiment 1

[0055] Please refer to Figure 1 , Figure 1 A flowchart of a PDF display method in a web page provided by the embodiments of the present application.

[0056] Rrweb (record and replay the web, used for recording and replaying user operations in any web interface) currently does not support PDF playback, and if a PDF file is converted into an html format for rendering using a pdf.js library (an open source JavaScript library), special patterns in the PDF file still need to be rendered through a canvas.

[0057] Without affecting the user's understanding of the protocol, the reading of these elements can be ignored (aria-hidden) in the accessibility mode, and if necessary, an aria-label attribute is added to the html element to provide more detailed and friendly description information, but when used for traceable playback, the user's operation interface at that time cannot be completely restored.

[0058] If the PDF file is processed into a picture set, combined with page loading and other technologies, the PDF protocol can be well simulated, and the content collected by rrweb can be normally played back, but the pictures on the webpage are not friendly to accessibility users (screen reader users) because the screen reading software does not support reading the content in the pictures.

[0059] In view of this, the present application adopts a rendering method in which two rendering modes are parallel (the html rendering mode is used to display the accessibility mode on the page, and the picture rendering mode is used for playback), and the display and playback of the PDF are realized.

[0060] The method specifically comprises the following steps:

[0061] Step S100: Render two PDFs on a web page using HTML rendering and image rendering respectively;

[0062] Step S200: Display one of the PDFs by setting the DOM element of the PDF to display or play back the PDF.

[0063] like Figure 2 As shown in the figure, there are two rendering methods. The upper layer performs HTML rendering, and the lower layer performs image rendering. (Under normal circumstances, the PDFs in the two rendering methods overlap. For ease of understanding, the PDFs in the two rendering methods in the figure do not completely overlap. You can see the PDF corresponding to the image rendering method below.) The HTML rendering method ensures that the screen reader can read it normally in barrier-free mode. The content collected by rrweb in the image rendering method can be played back normally. Figure 3 The following is a playback diagram.

[0064] This method combines the characteristics of the two rendering methods, effectively solving the traceability requirements of Internet insurance sales behavior and the problem that screen readers cannot read normally in barrier-free mode.

[0065] PDF is rendered using two parallel rendering methods. The HTML rendering method ensures normal reading by screen readers in barrier-free mode, and the image rendering method ensures normal playback of content collected by rrweb. The two rendering methods are barrier-free and compatible, solving the problem of PDF non-playback in web pages under the rrweb framework.

[0066] like Figure 4 As shown in FIG, it is a specific flow chart of the PDF display method in a web page, wherein, Figure 5 As shown in FIG. 1 , it is a PDF rendering flowchart, and step S100 may specifically include the following steps:

[0067] Step S101: Rendering the first PDF in the upper layer on the web page using HTML rendering mode;

[0068] Step S102: Render the lower second PDF using an image rendering method.

[0069] The first PDF in the upper layer is rendered using the HTML rendering method, and the lower layer is rendered using the image rendering method, realizing the use of two parallel rendering methods to render PDF.

[0070] like Figure 6 As shown in the figure, it is a display setting flow chart, and step S200 may specifically include the following steps:

[0071] Step S211: set the DOM element of the first PDF to be displayed in the user interface, and send a rendering completion signal to the second PDF;

[0072] Step S212: set the DOM element of the second PDF to be hidden in the user interface, and send a rendering completion signal to the first PDF.

[0073] The DOM element of the upper first PDF is set to be visible, and the lower one is set to be invisible, so that the user can only see the upper first PDF, and the normal use and display of the user will not be affected.

[0074] Two PDFs are rendered on the web page at the same time, but the user only sees the first PDF rendered by html in the upper layer, and the second PDF rendered by the picture is hidden by the css (cascading style sheet) attribute visibility: hidden (DOM element is invisible, but still occupies the original space), and z-index sets the stacking order of the element, that is, controls the upper and lower relationship of the two PDFs.

[0075] As shown in Figure 7 , a flow chart for display setting when revisiting is shown. Specifically:

[0076] Step S221: when playing back, the style of the first PDF is set to be DOM element not displayed by using media query technology;

[0077] Step S222: the style of the second PDF is set to be DOM element displayed by using media query technology.

[0078] According to the feature that the traceable playback is on the PC side (PC side screen width), the media query technology of css is used to set the style rule of the PDF rendered by html as display: none (DOM element is not displayed, which is equivalent to being deleted from the document flow), and the style of the PDF rendered by the picture is set as visibility: visible (DOM element is visible).

[0079] Among them, DOM (Document Object Model) refers to the document object model.

[0080] When playing back, the setting is changed by using the media query technology, which solves the switching problem of the display and hiding of the two PDFs.

[0081] As shown in Figure 8 , a flow chart for synchronous setting is shown, and the method further includes:

[0082] Step S301: After listening to the completion of the second PDF rendering, the first PDF registers a scroll listening event to obtain the scroll distance of the DOM element;

[0083] Step S302: Send the scroll distance to the second PDF to scroll the DOM element of the second PDF to the corresponding position.

[0084] By listening to the scroll of the DOM element of the first PDF, the synchronization of the DOM element of the second PDF is realized.

[0085] Through the setting of steps S100-S200, the functions of user page display and playback can be realized, and then the user operation behavior in playback is simulated, specifically:

[0086] After the rendering of the two-layer PDF is completed, the PDF in html format realizes the response to the scroll event by listening to the DOM scroll event: obtaining the scroll distance (x, y) of the DOM element, and setting the scroll position of another (second PDF) DOM element to the position corresponding to (x, y) in the scroll event. The user operation behaviors on the two PDFs can be completely synchronized.

[0087] The rrweb creates an hourglass environment using iframe, and by setting its sandbox attribute, the execution of JavaScript scripts can be disabled. Therefore, the display / hide switching problem of the two PDFs in playback is solved by using the css media query technology, avoiding directly using the iframe tag to embed the converted html page, thereby preventing security problems such as cross-site scripting (XSS) caused by using iframe.

[0088] The method solves the problem of screen reading PDF content in the barrier-free mode, helps as many people as possible to better use products and services, records user operations through display and traceback functions, provides safety protection for users, improves user experience, promotes product sales, guarantees the interests of customers; meet the traceable requirements of regulatory mandatory internet insurance sales behavior, record and playback user operation records, which is very suitable for daily process reproduction and production problem troubleshooting, thereby improving the stability and reliability of the system; also, by analyzing which insurance product pages the customers have visited, which contents have been viewed, and which events have been clicked, the user behavior and hobbies can be accurately grasped, so as to timely adjust the product and perform message pushing, and promote customer purchase.

[0089] Embodiment 2

[0090] The embodiment of the application provides a PDF display device in a web page, which is applied to the PDF display method in the web page in embodiment 1.

[0091] Rrweb(record and replay the web, used to record and replay user operations in any web interface) does not currently support PDF playback. If you try to convert a PDF file to html format using the pdf.js library (an open source JavaScript library), but the special patterns in the PDF file still need to be rendered through canvas. Without affecting the user's understanding of the protocol, these elements can be ignored (aria-hidden) in the reading of the accessibility mode, and if necessary, add an aria-label attribute to the html element to provide more detailed and friendly description information. But for traceable playback, the user's operation interface at the time cannot be completely restored.

[0092] If the PDF file is processed as a collection of images, combined with page loading and other technologies, the PDF protocol can be well simulated, and the content collected by rrweb can be normally played back, but the images on the web page are not friendly to accessibility users (screen reader users), and the screen reading software does not support reading the content in the images.

[0093] Therefore, the application adopts a parallel rendering method of two rendering modes (the html rendering mode is used to display the PDF in the accessibility mode, and the image rendering mode is used for playback), which realizes the display and playback of the PDF.

[0094] As shown in Figure 9 , a structural diagram of a PDF display device in a web page, the device includes but is not limited to:

[0095] The rendering module 100 is used to render two PDFs on the web page using the html rendering mode and the image rendering mode respectively;

[0096] The display setting module 200 is used to display one of the PDFs by setting the DOM element of the PDF, so as to display or playback the PDF.

[0097] The PDF is rendered using two parallel rendering modes, the html rendering mode ensures the normal reading of the screen reader in the accessibility mode, the image rendering mode ensures that the content collected by rrweb can be normally played back, and the two rendering modes can be accessibility compatible, solving the problem that the PDF in the web page under the rrweb framework cannot be played back.

[0098] As shown in Figure 10 , a structural diagram of another PDF display device in a web page, wherein the rendering module 100 includes but is not limited to:

[0099] The html rendering module 101 is configured to render the first PDF on the upper layer using the html rendering mode.

[0100] The picture rendering module 102 is configured to render the second PDF on the lower layer using the picture rendering mode.

[0101] The display setting module 200 includes but is not limited to:

[0102] The first display setting module 211 is configured to set the DOM element of the first PDF to be displayed in the user interface, and send a rendering completion signal to the second PDF.

[0103] The second display setting module 212 is configured to set the DOM element of the second PDF to be hidden in the user interface, and send a rendering completion signal to the first PDF.

[0104] The first PDF on the upper layer is rendered using the html rendering mode, and the lower layer is rendered using the picture rendering mode, which realizes the use of two parallel rendering modes for rendering the PDF.

[0105] The display setting module 200 further includes:

[0106] The first playback setting module 221 is configured to set the style of the first PDF to be DOM element not displayed during playback by using the media query technology.

[0107] The second playback setting module 222 is configured to set the style of the second PDF to be DOM element displayed by using the media query technology.

[0108] The DOM element of the first PDF on the upper layer is set to be visible, and the lower layer is set to be invisible, so that the user can only see the first PDF on the upper layer, and the normal use and display of the user are not affected.

[0109] The device further includes a synchronization module 300 configured to:

[0110] After listening to the rendering completion of the second PDF, a scroll listening event is registered in the first PDF to obtain the scroll distance of the DOM element;

[0111] The scroll distance is sent to the second PDF to scroll the DOM element of the second PDF to the corresponding position.

[0112] The device uses two parallel rendering modes to render the PDF, the html rendering mode ensures the normal reading of the screen reader in the barrier-free mode, the picture rendering mode ensures that the content collected by the rrweb can be normally played back, and the two rendering modes can be barrier-free compatible, solving the problem that the PDF in the web page under the rrweb framework cannot be played back.

[0113] The embodiment of the present application further provides an electronic device, which comprises a memory and a processor, the memory is used for storing a computer program, and the processor runs the computer program to enable the electronic device to execute the PDF display method in the web page according to the embodiment 1.

[0114] The embodiment of the present application further provides a readable storage medium, which stores computer program instructions, and the computer program instructions are read and run by a processor to execute the PDF display method in the web page according to the embodiment 1.

[0115] In several embodiments provided in the present application, it should be understood that the disclosed apparatus and method can also be implemented by other means. The apparatus embodiments described above are only schematic, for example, the flowcharts and block diagrams in the drawings show the possible implementation architectures, functions and operations of the apparatus, method and computer program product according to the embodiments of the present application. In this regard, each block in the flowcharts or block diagrams can represent a module, a program segment or a part of code, which contains one or more executable instructions for implementing the specified logic function. It should also be noted that, in some alternative implementations, the functions noted in the blocks can occur in different orders from those described in the drawings. For example, two consecutive blocks can actually be executed substantially in parallel, and sometimes they can be executed in reverse order, depending on the functions involved. It should also be noted that each block in the block diagrams and / or flowcharts, and the combination of blocks in the block diagrams and / or flowcharts, can be implemented by a dedicated hardware-based system for executing the specified functions or actions, or can be implemented by a combination of dedicated hardware and computer instructions.

[0116] In addition, each functional module in the embodiments of the present application can be integrated together to form an independent part, or each module can exist independently, or two or more modules can be integrated to form an independent part.

[0117] If the functions are implemented in the form of software function modules and sold or used as independent products, they can be stored in a computer readable storage medium. Based on this understanding, the technical solutions of the present application essentially or the parts of the prior art that make contributions or parts of the technical solutions can be embodied in the form of a software product. The computer software product is stored in a storage medium and includes a number of instructions for causing a computer device (which can be a personal computer, a server, or a network device, etc.) to execute all or part of the steps of the methods described in the various embodiments of the present application. The aforementioned storage medium includes: a U disk, a mobile hard disk, a read-only memory (ROM, Read-Only Memory), a random access memory (RAM, Random Access Memory), a magnetic disk or an optical disk, and various media that can store program codes.

[0118] The above merely provides an example of the present application and is not intended to limit the protection scope of the present application. For those skilled in the art, the present application can have various modifications and changes. Any modification, equivalent replacement, improvement, etc. made within the spirit and principle of the present application shall be included in the protection scope of the present application. It should be noted that similar reference numbers and letters represent similar items in the following drawings, so once an item is defined in one drawing, it does not need to be further defined and explained in subsequent drawings.

[0119] The above merely provides an example of the present application and is not intended to limit the protection scope of the present application. For those skilled in the art, the present application can have various modifications and changes. Any modification, equivalent replacement, improvement, etc. made within the spirit and principle of the present application shall be included in the protection scope of the present application. It should be noted that similar reference numbers and letters represent similar items in the following drawings, so once an item is defined in one drawing, it does not need to be further defined and explained in subsequent drawings.

[0120] It should be noted that, in this document, the terms such as first and second are used merely to distinguish one entity or operation from another entity or operation, and do not necessarily require or imply any such actual relationship or order between these entities or operations. Moreover, the terms "include", "contain" or any other variants thereof are intended to cover non-exclusive inclusion, so that the processes, methods, articles or devices including a series of elements not only include those elements, but also include other elements not explicitly listed or inherent to such processes, methods, articles or devices. Without more limitations, the element defined by the statement "including a" does not exclude the presence of another identical element in the process, method, article or device including the element.

Claims

1. A method of displaying a PDF in a web page, characterized by, The method comprises: rendering two PDFs on a web page using an html rendering mode and a picture rendering mode respectively, specifically: rendering a first PDF on an upper layer using the html rendering mode on the web page; and rendering a second PDF on a lower layer using the picture rendering mode; displaying one of the PDFs by setting a DOM element of the PDF, to display or play back the PDF, wherein the displaying comprises: setting the DOM element of the first PDF to be displayed in a user interface, and sending a rendering completion signal to the second PDF; and setting the DOM element of the second PDF to be hidden in the user interface, and sending the rendering completion signal to the first PDF; the playing back comprises: setting a style of the first PDF to be a DOM element not to be displayed by using a media query technology when playing back; and setting a style of the second PDF to be a DOM element to be displayed by using the media query technology; the method further comprises: after listening to completion of rendering of the second PDF, registering a scroll listening event in the first PDF to obtain a scroll distance of the DOM element; sending the scroll distance to the second PDF to scroll the DOM element of the second PDF to a corresponding position.

2. A PDF display apparatus in a web page, characterized by, The device comprises: a rendering module configured to render two PDFs on a web page using an html rendering mode and a picture rendering mode respectively, specifically: an html rendering module configured to render a first PDF on an upper layer using the html rendering mode on the web page; and a picture rendering module configured to render a second PDF on a lower layer using the picture rendering mode; a display setting module configured to display one of the PDFs by setting a DOM element of the PDF, to display or play back the PDF, the display setting module comprising: a first display setting module configured to set the DOM element of the first PDF to be displayed in a user interface, and send a rendering completion signal to the second PDF; and a second display setting module configured to set the DOM element of the second PDF to be hidden in the user interface, and send the rendering completion signal to the first PDF; a first playback setting module configured to set a style of the first PDF to be a DOM element not to be displayed by using a media query technology when playing back; and a second playback setting module configured to set a style of the second PDF to be a DOM element to be displayed by using the media query technology; the device further comprises a synchronization module configured to: after listening to completion of rendering of the second PDF, register a scroll listening event in the first PDF to obtain a scroll distance of the DOM element; and send the scroll distance to the second PDF to scroll the DOM element of the second PDF to a corresponding position. The electronic device comprises a memory and a processor, the memory is configured to store a computer program, and the processor is configured to run the computer program to enable the electronic device to execute the PDF display method in the web page according to claim 1.

3. An electronic device, comprising: The readable storage medium stores computer program instructions, and the computer program instructions are read and run by a processor to execute the PDF display method in the web page according to claim 1.

4. A readable storage medium, characterized by, ​

Images