A PDF file processing method and system

Abstract

The present application discloses a PDF file processing method and system, which obtains the number of pages of a PDF file to be previewed, and creates a canvas container according to the number of pages of the PDF file to be previewed; the number of canvas containers is consistent with the number of pages of the PDF file to be previewed, and the canvas container is rendered through predefined elements, the PDF file to be previewed is associated with the rendered canvas container, the PDF file to be previewed in the canvas container is read, and the PDF file to be previewed is loaded into a preset page. Through the above scheme, a canvas container is created according to the number of pages of the PDF file to be previewed, and the number of canvas containers is consistent with the number of pages of the PDF file to be previewed, so that the canvas container can store the PDF file to be previewed, and the PDF file to be previewed is loaded and displayed through the HTML5 framework, which can maintain the output of the PDF file while being compatible with cross-screen, so that the user can preview the content of the PDF file, improving the user experience.

Description

Technical Field

[0001] The present invention relates to the technical field of file processing, and more specifically, to a PDF file processing method and system. Background Art

[0002] Portable Document Format (PDF) is a portable document file format developed by Adobe Systems for file exchange in a way that is independent of applications, operating systems, and hardware. PDF files are based on the PostScript language image model.

[0003] During the project development process, when a multi-page PDF displays business logic to users, due to the different underlying frameworks of the various APPs embedded in the project, the PDF files of some native frameworks appear blank when displayed, making it impossible for users to preview the contents of the PDF files.

[0004] Therefore, the existing method of previewing PDF results in a poor user experience. Summary of the invention

[0005] In view of this, the present application discloses a PDF file processing method and system, which aims to be compatible with cross-screen while maintaining the output of PDF files, so that users can preview the contents of PDF files and improve user experience.

[0006] In order to achieve the above purpose, the disclosed technical solution is as follows:

[0007] The first aspect of the present application discloses a PDF file processing method, the method comprising:

[0008] Obtain the number of pages of the PDF file to be previewed, and create a canvas container according to the number of pages of the PDF file to be previewed; the number of the canvas containers is consistent with the number of pages of the PDF file to be previewed;

[0009] Rendering the canvas container through predefined elements;

[0010] Associating the PDF file to be previewed with the rendered canvas container;

[0011] The PDF file to be previewed in the canvas container is read, and the PDF file to be previewed is loaded into a preset page.

[0012] Preferably, obtaining the number of pages of the PDF file to be previewed, and creating a canvas container according to the number of pages of the PDF file to be previewed, includes:

[0013] Get the page number of the PDF file to be previewed through the preset plug-in;

[0014] A canvas container is created according to the number of pages of the PDF file to be previewed.

[0015] Preferably, rendering the canvas container by using predefined elements includes:

[0016] Define the window width;

[0017] Determine the window height by presetting the aspect ratio and the defined window width;

[0018] The canvas container is rendered according to the defined window width and the window height.

[0019] Preferably, associating the PDF file to be previewed with the rendered canvas container includes:

[0020] Defining context variables and virtual window variables in the predefined element;

[0021] The page of the PDF file to be previewed is associated with the context of the rendered canvas container through the context variable, the virtual window variable and the preset rendering function.

[0022] Preferably, the reading of the PDF file to be previewed in the canvas container and loading the PDF file to be previewed into a preset page includes:

[0023] Read the PDF file to be previewed in the canvas container through a preset reading plug-in;

[0024] Load the PDF file to be previewed into the HTML5 page.

[0025] The second aspect of the present application discloses a PDF file processing system, the system comprising:

[0026] An acquisition unit, used for acquiring the number of pages of the PDF file to be previewed, and creating a canvas container according to the number of pages of the PDF file to be previewed; the number of the canvas containers is consistent with the number of pages of the PDF file to be previewed;

[0027] A rendering unit, used for rendering the canvas container through predefined elements;

[0028] An associating unit, used to associate the PDF file to be previewed with the rendered canvas container;

[0029] The loading unit is used to read the PDF file to be previewed in the canvas container and load the PDF file to be previewed into a preset page.

[0030] Preferably, the acquisition unit includes:

[0031] The acquisition module is used to obtain the page number of the PDF file to be previewed through a preset plug-in;

[0032] The creation module is used to create a canvas container according to the number of pages of the PDF file to be previewed.

[0033] Preferably, the rendering unit includes:

[0034] The first definition module is used to define the window width;

[0035] A determination module, used to determine the window height by using a preset aspect ratio and a defined window width;

[0036] A rendering module is used to render the canvas container according to the defined window width and the window height.

[0037] Preferably, the association unit comprises:

[0038] A second definition module, used for defining context variables and virtual window variables in the predefined element;

[0039] The associating module is used to associate the page of the PDF file to be previewed with the context of the rendered canvas container through the context variable, the virtual window variable and the preset rendering function.

[0040] Preferably, the loading unit comprises:

[0041] A reading module, used to read the PDF file to be previewed in the canvas container through a preset reading plug-in;

[0042] The loading module is used to load the PDF file to be previewed into the HTML5 page.

[0043] Through the above technical solution, it can be known that the present application discloses a PDF file processing method and system, which obtains the number of pages of the PDF file to be previewed, and creates a canvas container according to the number of pages of the PDF file to be previewed; the number of canvas containers is consistent with the number of pages of the PDF file to be previewed, and the canvas container is rendered through predefined elements, the PDF file to be previewed is associated with the rendered canvas container, the PDF file to be previewed in the canvas container is read, and the PDF file to be previewed is loaded into a preset page. Through the above solution, a canvas container is created according to the number of pages of the PDF file to be previewed, and the number of canvas containers is consistent with the number of pages of the PDF file to be previewed, so that the canvas container can store the PDF file to be previewed, and the PDF file to be previewed is loaded and displayed through the HTML5 framework, which can maintain the output of the PDF file while being compatible with cross-screen, so that the user can preview the content of the PDF file and improve the user experience. BRIEF DESCRIPTION OF THE DRAWINGS

[0044] In order to more clearly illustrate the embodiments of the present invention 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 embodiments of the present invention. For ordinary technicians in this field, other drawings can be obtained based on the provided drawings without paying creative work.

[0045] Figure 1 A flowchart of a PDF file processing method disclosed in an embodiment of the present application;

[0046] Figure 2 A schematic diagram of a process for obtaining the number of pages of a PDF file to be previewed and creating a canvas container canvas according to the number of pages disclosed in an embodiment of the present application;

[0047] Figure 3 A schematic diagram of a process of rendering a canvas container canvas through predefined elements disclosed in an embodiment of the present application;

[0048] Figure 4 A schematic diagram of a process of associating a PDF file to be previewed with a rendered canvas container canvas disclosed in an embodiment of the present application;

[0049] Figure 5 This is a flow chart of reading a PDF file to be previewed in a canvas container and loading the PDF file to be previewed into a preset page, as disclosed in an embodiment of the present application;

[0050] Figure 6 A schematic diagram of the structure of a PDF file processing system disclosed in an embodiment of the present application. DETAILED DESCRIPTION

[0051] The following will be combined with the drawings in the embodiments of the present invention to clearly and completely describe the technical solutions in the embodiments of the present invention. Obviously, the described embodiments are only part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of the present invention.

[0052] In this application, the terms "comprises", "comprising" or any other variations thereof are intended to cover non-exclusive inclusion, so that a process, method, article or device comprising a series of elements includes not only those elements, but also other elements not explicitly listed, or also includes elements inherent to such process, method, article or device. In the absence of further restrictions, an element defined by the sentence "comprising a ..." does not exclude the presence of other identical elements in the process, method, article or device comprising the element.

[0053] As can be seen from the background technology, since the underlying frameworks of various APPs embedded in the project are different, PDF files of individual native frameworks appear blank when displayed, causing users to be unable to preview the contents of the PDF files. Therefore, the existing method of previewing PDFs causes a poor user experience.

[0054] In order to solve this problem, the embodiment of the present application discloses a PDF file processing method and system, which creates a canvas container according to the number of pages of the PDF file to be previewed, and the number of canvas containers is consistent with the number of pages of the PDF file to be previewed, so that the canvas container can store the PDF file to be previewed, and load and display the PDF file to be previewed through a preset page, while being compatible with cross-screen and maintaining the output of the PDF file, so that the user can preview the content of the PDF file, thereby improving the user experience. The specific implementation method is described by the following embodiment.

[0055] refer to Figure 1 FIG. 1 is a flow chart of a PDF file processing method disclosed in an embodiment of the present application. The PDF file processing method mainly includes the following steps:

[0056] S101: Obtain the number of pages of the PDF file to be previewed, and create a canvas container canvas according to the number of pages of the PDF file to be previewed; the number of canvas containers canvas is consistent with the number of pages of the PDF file to be previewed.

[0057] In S101, the number of pages N (total number of pages) of the PDF file to be previewed is obtained through a preset plug-in, and the same number of canvas containers canvas are created according to the number of pages N of the PDF file to be previewed. The same number of canvas containers canvas are created to place the PDF files to be previewed.

[0058] The value of N is an integer greater than or equal to 1.

[0059] The preset plug-in can be a pdf.js plug-in or other plug-ins, and this application does not make any specific limitation. This application prefers the pdf.js plug-in.

[0060] The canvas container canvas is used to store pages converted from PDF.

[0061] PDF is a file format developed by Adobe Systems for file exchange in a way that is independent of applications, operating systems, and hardware. PDF files are based on the PostScript language image model, which guarantees precise colors and accurate printing results on any printer, that is, PDF will reproduce every character, color, and image of the original.

[0062] Specifically, the process of creating a canvas container canvas according to the number of pages of the PDF file to be previewed is as follows:

[0063] First, introduce the pdf.js plug-in, then obtain the number of pages N of the PDF file to be previewed through the numPages field, and finally create the same number of canvas containers canvas according to the number of pages N.

[0064] The code to get the number of pages of the PDF file to be previewed is as follows:

[0065]

[0066] S102: Rendering the canvas container canvas through predefined elements.

[0067] In S102, the predefined element is a canvas element.

[0068] Create a canvas element and define the window width of the canvas element (that is, define the width scaleW value of the PDF file to be previewed). Determine the window height by presetting the aspect ratio and the defined window width. Render the canvas container canvas with the defined window width and window height of the canvas element.

[0069] First, define the width scaleW value of the PDF file to be previewed, and perform height adaptation through the window width scaleW value, that is, determine the window height through the preset aspect ratio and the defined window width, to ensure that the window width and window height of the PDF file to be previewed converted to the canvas container canvas are not compressed.

[0070] Among them, the canvas element includes element ID, window width, window height, context object and virtual window viewport, etc.

[0071] The canvas element uses JavaScript to draw images on a web page. The canvas element has a variety of methods for drawing paths, rectangles, circles, characters, and adding images.

[0072] The canvas container canvas is a rectangular area where you can control every pixel.

[0073] The element ID is used internally in the JavaScript programming language to find the canvas element.

[0074] The preset aspect ratio is set by technical personnel according to actual conditions, and this application does not make any specific limitation.

[0075] The window width and window height are defined by setting the scaleW value, and the canvas container canvas is rendered using the defined window width and window height.

[0076] The code to create the canvas element is as follows:

[0077]

[0078] The code to define the canvas element is as follows:

[0079]

[0080]

[0081] The getContext('2d') object is a built-in HyperText Markup Language 5 (HTML5) object, which has multiple methods for drawing paths, rectangles, circles, characters, and adding images.

[0082] S103: Associating the PDF file to be previewed with the rendered canvas container canvas.

[0083] In S103, the context variable and the virtual window variable in the canvas element are defined, and the context variable context, the virtual window variable viewport and the preset rendering function in the canvas element are associated with the PDF file to be previewed to the rendered canvas container canvas.

[0084] Among them, the preset rendering function can be a render function or other functions. The specific preset rendering function is determined by the technical personnel according to the actual situation. This application does not make any specific limitation. The preset rendering function of this application is preferably a render function.

[0085] The specific process of associating the PDF file to be previewed with the rendered canvas container canvas is as follows:

[0086] First, define the context object and virtual window viewport in the canvas element. Then, through the context variable context, the virtual window variable viewport and the render function, associate the page of the PDF file to be previewed with the context of the rendered canvas container canvas.

[0087] Through the render function, the defined context and viewport are assigned to the page of the PDF file to be previewed.

[0088] The code to associate the PDF file to be previewed with the rendered canvas container canvas is as follows:

[0089]

[0090] S104: Read the PDF file to be previewed in the canvas container canvas, and load the PDF file to be previewed into a preset page.

[0091] In S104, the PDF file to be previewed in the canvas container canvas is read through a preset reading plug-in, and the PDF file to be previewed is loaded into a preset page.

[0092] Among them, the preset reading plug-in can be a pdf.js plug-in or other reading plug-ins, and this application does not make specific limitations. The preset reading plug-in of this application is preferably a pdf.js plug-in.

[0093] The preset page can be an HTML5 page or other pages, etc. The preset page is determined by the technical personnel according to the actual situation, and this application does not make any specific limitations. The preset page of this application is preferably an HTML5 page.

[0094] HTML5 is a language description method for building Web content. HTML5 is the next generation standard of the Internet and a language method for building and presenting Internet content. It is considered one of the core technologies of the Internet.

[0095] HTML5 is specially designed to carry rich content of the World Wide Web (web) without the need for additional plug-ins; it has new semantics, graphics, and multimedia elements; the new elements and new APIs provided by HTML5 simplify the building of web applications; HTML5 is cross-platform and is designed to run on different types of hardware (PCs, tablets, mobile phones, TVs, etc.).

[0096] Through the pdf.js plug-in, read the PDF file to be previewed in the canvas container canvas, and load the PDF file to be previewed into the HTML5 page. In the H5 project with embedded APP, you can preview multi-page PDF files to meet user and business needs and improve user experience.

[0097] The code to read the PDF file to be previewed in the canvas container canvas and load the PDF file to be previewed into the HTML5 page is as follows:

[0098]

[0099]

[0100] In order to facilitate the understanding of the above PDF file processing method, an example is given here:

[0101] For example, the total number of pages of the PDF file to be previewed is 10. A canvas container canvas is created according to the total number of pages of the PDF file to be previewed, which is 10. The preset aspect ratio is set to 10:7. A canvas element is created to define the width scaleW value of the PDF file to be previewed, that is, the window width is 10 cm. Based on the preset aspect ratio (10:7) and the window width of 10 cm, the height is adaptively adjusted to obtain a window height of 7 cm. The canvas container canvas is rendered with a window width of 10 cm and a window height of 7 cm. The rendered canvas container canvas has a width of 10 cm and a height of 7 cm. The 10 pages of the PDF file to be previewed are associated with the canvas container canvas with a width of 10 cm and a height of 7 cm. The PDF file to be previewed in the canvas container canvas is read, and the PDF file to be previewed is loaded into the HTML5 page.

[0102] In an embodiment of the present application, a canvas container canvas is created according to the number of pages of the PDF file to be previewed. The number of canvas containers canvas is consistent with the number of pages of the PDF file to be previewed, so that the canvas container canvas can store the PDF file to be previewed, and the PDF file to be previewed is loaded and displayed through the HTML5 framework. While being compatible with cross-screen, the output of the PDF file can be maintained, so that the user can preview the content of the PDF file, thereby improving the user experience.

[0103] refer to Figure 2 As shown, the process of obtaining the number of pages of the PDF file to be previewed and creating a canvas container canvas according to the number of pages of the PDF file to be previewed in the above S101 mainly includes the following steps:

[0104] S201: Obtain the page number of the PDF file to be previewed through a preset plug-in.

[0105] In S201, the pdf.js plug-in is introduced, and the number of pages N of the PDF file to be previewed is obtained through the numPages method, where the value of N is an integer greater than or equal to 1.

[0106] S202: Creating a canvas container canvas according to the number of pages of the PDF file to be previewed.

[0107] In S202 , the same number of canvas containers canvas are created according to the number of pages N.

[0108] In the embodiment of the present application, the number of pages of the PDF file to be previewed is obtained through a preset plug-in, so as to achieve the purpose of creating a canvas container canvas according to the number of pages of the PDF file to be previewed.

[0109] refer to Figure 3 As shown, the process of rendering the canvas container canvas by using predefined elements in the above S102 mainly includes the following steps:

[0110] S301: Define the window width.

[0111] S302: Determine the window height according to the preset aspect ratio and the defined window width.

[0112] S303: Rendering the canvas container canvas according to the defined window width and window height.

[0113] The execution principle of S301-S303 is consistent with the execution principle of S102 mentioned above, which can be used for reference and will not be repeated here.

[0114] In the embodiment of the present application, the window height is determined by presetting the aspect ratio and the defined window width, and the purpose of rendering the canvas container canvas is achieved by the defined window width and window height.

[0115] refer to Figure 4 As shown in FIG. 1 , the process of associating the PDF file to be previewed with the rendered canvas container canvas in the above S103 mainly includes the following steps:

[0116] S401: Define a context variable context and a virtual window variable viewport in the canvas element.

[0117] S402: Associating the page of the PDF file to be previewed with the context of the rendered canvas container canvas through the context variable context, the virtual window variable viewport and the preset rendering function.

[0118] The execution principle of S401-S402 is consistent with the execution principle of the above-mentioned S103, which can be used for reference and will not be repeated here.

[0119] In an embodiment of the present application, a context variable context and a virtual window variable viewport in a canvas element are defined, and the purpose of associating the page of the PDF file to be previewed with the context of the rendered canvas container canvas is achieved through the context variable context, the virtual window variable viewport and a preset rendering function.

[0120] refer to Figure 5 As shown in the figure, the process of reading the PDF file to be previewed in the canvas container and loading the PDF file to be previewed into the preset page in the above S104 mainly includes the following steps:

[0121] S501: Read the PDF file to be previewed in the canvas container canvas through a preset reading plug-in.

[0122] Among them, the preset reading plug-in can be a pdf.js plug-in or other reading plug-ins, and this application does not make specific limitations. The preset reading plug-in of this application is preferably a pdf.js plug-in.

[0123] S502: Load the PDF file to be previewed into the HTML5 page.

[0124] Among them, the preset page can be an HTML5 page or other pages, etc. The preset page is determined by the technical personnel according to the actual situation, and this application does not make any specific limitations. The preset page of this application is preferably an HTML5 page.

[0125] In an embodiment of the present application, a preset reading plug-in is used to read the PDF file to be previewed in the canvas container canvas, and the PDF file to be previewed is loaded into the HTML5 page. The PDF file to be previewed is loaded and displayed through the HTML5 framework, while being compatible with cross-screen while maintaining the output of the PDF file, so that the user can preview the content of the PDF file, thereby improving the user experience.

[0126] Based on the above embodiments Figure 1 A PDF file processing method is disclosed, and the embodiment of the present application also discloses a PDF file processing system, such as Figure 6 The PDF file processing system mainly includes an acquisition unit 601 , a rendering unit 602 , an association unit 603 and a loading unit 604 .

[0127] The acquisition unit 601 is used to acquire the number of pages of the PDF file to be previewed, and create a canvas container canvas according to the number of pages of the PDF file to be previewed; the number of canvas containers canvas is consistent with the number of pages of the PDF file to be previewed.

[0128] The acquisition unit 601 acquires the number of pages N (total number of pages) of the PDF file to be previewed through a preset plug-in, and creates the same number of canvas containers canvas according to the number of pages N of the PDF file to be previewed. The same number of canvas containers canvas are created to place the PDF files to be previewed.

[0129] The rendering unit 602 is used to render the canvas container canvas through predefined elements.

[0130] Among them, the rendering unit 602 creates a canvas element and defines the window width of the canvas element (that is, defines the width scaleW value of the PDF file to be previewed), determines the window height by presetting the aspect ratio and the defined window width, and renders the canvas container canvas with the defined window width and window height of the canvas element.

[0131] The associating unit 603 is used to associate the PDF file to be previewed with the rendered canvas container canvas.

[0132] The associating unit 603 associates the PDF file to be previewed with the rendered canvas container canvas by using the context variable context, the virtual window variable viewport and the preset rendering function in the canvas element.

[0133] The loading unit 604 is used to read the PDF file to be previewed in the canvas container canvas, and load the PDF file to be previewed into a preset page.

[0134] The loading unit 604 reads the PDF file to be previewed in the canvas container canvas through a preset reading plug-in, and loads the PDF file to be previewed into a preset page.

[0135] Furthermore, the acquisition unit 601 includes an acquisition module and a creation module.

[0136] The acquisition module is used to obtain the number of pages of the PDF file to be previewed through a preset plug-in.

[0137] A creation module is used to create a canvas container canvas according to the number of pages of the PDF file to be previewed.

[0138] Furthermore, the rendering unit 602 includes a first definition module, a determination module and a rendering module.

[0139] The first definition module is used to define the window width.

[0140] The determination module is used to determine the window height by using a preset aspect ratio and a defined window width.

[0141] The rendering module is used to render the canvas container canvas through the defined window width and window height.

[0142] Furthermore, the associating unit 603 includes a second definition module and an associating module.

[0143] The second definition module is used to define the context variable context and the virtual window variable viewport in the preset element.

[0144] The association module is used to associate the page of the PDF file to be previewed with the context of the rendered canvas container canvas through the context context, the virtual window variable viewport and the preset rendering function.

[0145] Furthermore, the loading unit 604 includes a reading module and a loading module.

[0146] The reading module is used to read the PDF file to be previewed in the canvas container canvas through the preset reading plug-in.

[0147] The loading module is used to load the PDF file to be previewed into the HTML5 page.

[0148] In an embodiment of the present application, a canvas container canvas is created according to the number of pages of the PDF file to be previewed. The number of canvas containers canvas is consistent with the number of pages of the PDF file to be previewed, so that the canvas container canvas can store the PDF file to be previewed, and the PDF file to be previewed is loaded and displayed through the HTML5 framework. While being compatible with cross-screen, the output of the PDF file can be maintained, so that the user can preview the content of the PDF file, thereby improving the user experience.

[0149] For the aforementioned method embodiments, for the sake of simplicity, they are all described as a series of action combinations, but those skilled in the art should be aware that the present application is not limited by the order of the actions described, because according to the present application, some steps can be performed in other orders or simultaneously. Secondly, those skilled in the art should also be aware that the embodiments described in the specification are all preferred embodiments, and the actions and modules involved are not necessarily required by the present application.

[0150] It should be noted that each embodiment in this specification is described in a progressive manner, and each embodiment focuses on the differences from other embodiments, and the same or similar parts between the embodiments can be referred to each other. For system embodiments, since they are basically similar to method embodiments, the description is relatively simple, and the relevant parts can be referred to the partial description of the method embodiment.

[0151] The steps in the methods of the embodiments of the present application can be adjusted in order, combined, and deleted according to actual needs.

[0152] Finally, it should be noted that, in this article, relational terms such as first and second, etc. are merely used to distinguish one entity or operation from another entity or operation, and do not necessarily require or imply any actual relationship or order between these entities or operations.

[0153] The above description of the disclosed embodiments enables those skilled in the art to implement or use the present application. Various modifications to these embodiments will be apparent to those skilled in the art, and the general principles defined herein may be implemented in other embodiments without departing from the spirit or scope of the present application. Therefore, the present application will not be limited to the embodiments shown herein, but will conform to the widest scope consistent with the principles and novel features disclosed herein.

[0154] The above is only a preferred implementation of the present application. It should be pointed out that for ordinary technicians in this technical field, several improvements and modifications can be made without departing from the principles of the present application. These improvements and modifications should also be regarded as the scope of protection of the present application.

Claims

1. A PDF file processing method, characterized in that: The method comprises: Obtain the number of pages of the PDF file to be previewed, and create a canvas container according to the number of pages of the PDF file to be previewed; the number of the canvas containers is consistent with the number of pages of the PDF file to be previewed; Rendering the canvas container through predefined elements; Associating the PDF file to be previewed with the rendered canvas container; Read the PDF file to be previewed in the canvas container, and load the PDF file to be previewed into a preset page, while maintaining the output of the PDF file while being compatible with cross-screen; The rendering of the canvas container by using the predefined elements includes: Define the width scaleW value of the PDF file to be previewed, perform height adaptation through the width scaleW value, and determine the window height to ensure that the window width and window height of the PDF file to be previewed converted into the canvas container canvas are not compressed; The canvas container is rendered according to the width scaleW value and the window height.

2. The method according to claim 1, characterized in that The obtaining the number of pages of the PDF file to be previewed, and creating a canvas container according to the number of pages of the PDF file to be previewed, includes: Get the page number of the PDF file to be previewed through the preset plug-in; A canvas container is created according to the number of pages of the PDF file to be previewed.

3. The method according to claim 1, characterized in that The step of associating the PDF file to be previewed with the rendered canvas container includes: Defining context variables and virtual window variables in the predefined element; The page of the PDF file to be previewed is associated with the context of the rendered canvas container through the context variable, the virtual window variable and the preset rendering function.

4. The method according to claim 1, characterized in that: The step of reading the PDF file to be previewed in the canvas container and loading the PDF file to be previewed into a preset page includes: Read the PDF file to be previewed in the canvas container through a preset reading plug-in; Load the PDF file to be previewed into the HTML5 page.

5. A PDF file processing system, characterized in that: The system comprises: An acquisition unit, used for acquiring the number of pages of the PDF file to be previewed, and creating a canvas container according to the number of pages of the PDF file to be previewed; the number of the canvas containers is consistent with the number of pages of the PDF file to be previewed; A rendering unit, used for rendering the canvas container through predefined elements; An associating unit, used to associate the PDF file to be previewed with the rendered canvas container; A loading unit, used for reading the PDF file to be previewed in the canvas container, and loading the PDF file to be previewed into a preset page, so as to maintain the output of the PDF file while being compatible with cross-screen; The rendering unit comprises: A determination module is used to define a width scaleW value of the PDF file to be previewed, and to perform height adaptation through the width scaleW value to determine the window height, so as to ensure that the window width and window height of the PDF file to be previewed converted into the canvas container canvas are not compressed; The rendering module is used to render the canvas container according to the width scaleW value and the window height.

6. The system according to claim 5, characterized in that The acquisition unit comprises: The acquisition module is used to obtain the page number of the PDF file to be previewed through a preset plug-in; The creation module is used to create a canvas container according to the number of pages of the PDF file to be previewed.

7. The system according to claim 5, characterized in that The association unit comprises: A second definition module, used for defining context variables and virtual window variables in the predefined element; The associating module is used to associate the page of the PDF file to be previewed with the context of the rendered canvas container through the context variable, the virtual window variable and the preset rendering function.

8. The system according to claim 5, characterized in that The loading unit comprises: A reading module, used to read the PDF file to be previewed in the canvas container through a preset reading plug-in; The loading module is used to load the PDF file to be previewed into the HTML5 page.

Images