Document preview method and device

Abstract

The invention relates to the technical field of document processing, and provides a document previewing method and device.The method comprises the steps that in response to a first previewing operation of a user, typesetting data corresponding to an ID is obtained according to the ID of a document corresponding to the first previewing operation and the corresponding relation between the ID and the typesetting data; the typesetting data is scalable vector graphics (SVG) typesetting data obtained by performing preloading typesetting processing on a document; and displaying a preview page of the document according to the typesetting data corresponding to the ID. Because the typesetting data is SVG typesetting data obtained by preloading and typesetting the document and the typesetting data is associated with the identification ID of the document, that is, the document is preloaded and typeset in advance, when a user previews the document, the typesetting data is stored in the document. The preview page of the document can be quickly displayed only by performing index matching of the typesetting data, and the effects of improving the opening speed of the preview document and improving the user experience are achieved.

Description

Technical Field

[0001] The present invention relates to the technical field of document processing, and in particular to a document preview method and device. Background Art

[0002] Online document preview can provide users with a convenient and fast reading experience. Users do not need to download the original file or install the software environment required to read the document. They can quickly preview the document online using a web browser. Moreover, for document providers, online document preview can prevent the original file from being tampered with or stolen, thus improving the security of information sharing.

[0003] Most of the existing online document previews use a technical solution that combines server-side kernel parsing encoding with front-end decoding and typesetting, relying on the front-end JS (JavaScript) framework in the client browser environment for decoding and typesetting. Therefore, in a weak network environment or with complex document samples, the time-consuming download of the introduced JS framework resources and the increased time-consuming decoding and typesetting of the encoded data slow down the opening speed of the document preview, resulting in a poor user experience. Summary of the invention

[0004] The present invention provides a document preview method and device, which are used to solve the defects of slow document preview speed and poor user experience in the prior art in complex scenarios, and achieve the technical effect of increasing the opening speed of document preview and improving user experience.

[0005] In a first aspect, the present invention provides a document preview method, comprising:

[0006] In response to a first preview operation of the user, obtaining the typesetting data corresponding to the ID according to the identification ID of the document corresponding to the first preview operation and the correspondence between the ID and the typesetting data; the typesetting data is the scalable vector graphic SVG typesetting data obtained by preloading typesetting processing on the document;

[0007] According to the layout data corresponding to the ID, a preview page of the document is displayed.

[0008] Optionally, before obtaining the typesetting data corresponding to the ID, the method further includes:

[0009] Converting the document into SVG layout data;

[0010] The SVG layout data corresponding to the document is stored, and a corresponding relationship between the SVG layout data and the ID of the document is established.

[0011] Optionally, converting the document into SVG layout data includes:

[0012] Generate, according to the page content of the document, a drawing instruction for typeset processing the page content, and cache the drawing instruction in a memory;

[0013] When the drawing instruction is called during the layout processing, the drawing instruction is converted into an SVG tag, and the SVG tag is used as the SVG layout data.

[0014] Optionally, the method may further include:

[0015] For a text tag in the SVG typesetting data, determining whether the text tag has the same font attribute as a parent tag;

[0016] If the text tag has the same font attribute as the parent tag, the same font attribute contained in the text tag is deleted.

[0017] Optionally, the method may further include:

[0018] If the text label in the SVG typesetting data includes vertical characters, a rotation matrix is ​​added to the text label, and the rotation matrix is ​​used to correct the direction of the vertical characters; the rotation matrix includes the rotation angle corresponding to each character in the vertical characters.

[0019] Optionally, before displaying the vertical characters, the method further includes:

[0020] Splitting the vertical character into multiple single characters;

[0021] Determine the center point position coordinates corresponding to each of the single characters according to the coordinates of each of the single characters, the height and the width of each of the single characters;

[0022] Direction correction is performed on each of the single characters according to the center point position coordinates corresponding to each of the single characters and the rotation angle.

[0023] Optionally, displaying a preview page of the document according to the layout data corresponding to the ID includes:

[0024] According to the typesetting data, a virtual DOM tree is constructed using a virtual document object model DOM node;

[0025] Generate a rendering tree according to the virtual DOM tree and the Cascading Style Sheet Object Model CSSOM tree;

[0026] According to the rendering tree, calculating geometric information of all element nodes contained in the document;

[0027] Based on the geometric information of all element nodes contained in the document, the preview page of the document is rendered and displayed using the user interface layer of the browser.

[0028] Optionally, the virtual DOM node is a node managed by a node container, and the method further includes:

[0029] receiving a second preview operation of the user; the second preview operation is used to indicate information of a page to be displayed in the document;

[0030] Determine whether the number of current virtual DOM nodes in the node container reaches the upper limit of the number of nodes in the node container;

[0031] If the number of the current virtual DOM nodes reaches the upper limit of the number of nodes of the node container, the page content corresponding to the first virtual DOM node in the node queue of the node container is cleaned to obtain a cleaned virtual DOM node;

[0032] The cleaned virtual DOM node is added to the node queue corresponding to the node container, and is rendered and displayed according to the layout data of the page to be displayed.

[0033] Optionally, the method may further include:

[0034] Receive batch operations of rotation or scaling by users;

[0035] In response to the batch operation of rotation or scaling, a page corresponding to the batch operation of rotation or scaling is rendered using a virtual DOM node.

[0036] In a second aspect, the present invention further provides a document preview device, comprising:

[0037] an acquisition module, configured to, in response to a first preview operation of a user, acquire, according to an identification ID of a document corresponding to the first preview operation and a correspondence between the ID and the layout data, layout data corresponding to the ID; the layout data being scalable vector graphic SVG layout data obtained by preloading layout processing on the document;

[0038] The display module is used to display the preview page of the document according to the layout data corresponding to the ID.

[0039] In a third aspect, the present invention further provides an electronic device, comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein when the processor executes the program, any of the document preview methods described above is implemented.

[0040] In a fourth aspect, the present invention further provides a non-transitory computer-readable storage medium having a computer program stored thereon, which, when executed by a processor, implements any of the document preview methods described above.

[0041] In a fifth aspect, the present invention further provides a computer program product, including a computer program, which implements any of the above-mentioned document preview methods when executed by a processor.

[0042] The document preview method and device provided by the present invention, by responding to the user's first preview operation, according to the identification ID of the document corresponding to the first preview operation and the correspondence between the ID and the typesetting data, obtains the typesetting data corresponding to the identification ID of the document, the typesetting data is the scalable vector graphic SVG typesetting data obtained by preloading the typesetting process on the document, and then, according to the typesetting data corresponding to the identification ID of the document, displays the preview page of the document. Because the typesetting data is the SVG typesetting data obtained by preloading the typesetting process on the document, and the typesetting data and the identification ID of the document are associated, that is, the document has been preloaded and typesetting processed in advance, when the user previews the document, only the index matching of the typesetting data is needed to realize the rapid display of the preview page of the document, so as to improve the opening speed of the preview document and enhance the user experience. BRIEF DESCRIPTION OF THE DRAWINGS

[0043] In order to more clearly illustrate the technical solutions in the present invention or the prior art, the following briefly introduces the drawings required for use in the embodiments or the description of the prior art. Obviously, the drawings described below are some embodiments of the present invention. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying creative work.

[0044] Figure 1 This is one of the flowcharts of the document preview method provided by the present invention;

[0045] Figure 2 This is the second flow chart of the document preview method provided by the present invention;

[0046] Figure 3 It is a schematic diagram of the process of document preloading typesetting processing provided by the present invention;

[0047] Figure 4 It is a structural schematic diagram of a document preview device provided by the present invention;

[0048] Figure 5 It is a structural schematic diagram of the electronic device provided by the present invention. DETAILED DESCRIPTION

[0049] In order to make the purpose, technical solution and advantages of the present invention clearer, the technical solution of the present invention will be clearly and completely described below in conjunction with the drawings of the present invention. Obviously, the described embodiments are 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.

[0050] In order to facilitate a clearer understanding of the embodiments of the present application, first, some relevant technical terms involved in the embodiments of the present invention are introduced.

[0051] Scalable Vector Graphics (SVG): A two-dimensional vector graphics description language based on the Extensible Markup Language (XML);

[0052] Virtual Document Object Model Node (Shadow Dom, virtual DOM node): refers to a series of DOM elements that the browser can render without inserting them into the DOM tree structure of the main document. Based on Shadow DOM, component-based applications can be implemented, which can be understood as a hidden DOM structure;

[0053] qtsvg library: Classes for rendering and displaying SVG graphics in widgets and other drawing devices provided by the cross-platform C++ graphical user interface application Qt;

[0054] QSvgPaintEngine: QT SVG drawing engine, which provides the specific implementation of drawing functions and provides underlying support for the drawing device;

[0055] updateState: A function used to update the state of the drawing engine;

[0056] drawTextItem: drawing instructions for drawing text operations;

[0057] drawPath: drawing instructions for drawing path operations;

[0058] drawImage: drawing instructions for drawing picture operations;

[0059] qfontToSvg: A function that converts the font attributes of the drawing engine into the corresponding attributes of SVG;

[0060] HyperText Markup Language (HTML): refers to Hypertext Markup Language, which is a standard markup language used to create web pages. A markup language is a set of tags. HTML uses tags to describe web pages.

[0061] HTML tag: commonly known as HTML tag, is a keyword surrounded by angle brackets, for example, HTML tags usually appear in pairs, such as and , the first tag in the tag pair is the start tag, and the second tag is the end tag;

[0062] Extensible Markup Language (XML): is a markup language that is very similar to HTML. XML is designed to transmit data and focuses on the content of the data, while HTML is designed to display data and focuses on the appearance of the data. XML does not do anything, it is just designed to structure, store and transmit information;

[0063] Application Program Interface (API): A set of predefined functions that aims to provide applications and developers with the ability to access a set of routines based on a piece of software or hardware without having to access the source code or understand the details of the internal working mechanism;

[0064] Cascading Style Sheets (CSS): also known as string style lists, is a computer language used to add styles (fonts, spacing, colors, etc.) to structured documents (such as HTML documents or XML applications).

[0065] Cascading Style Sheets Object Model (CSSOM): It is an object-oriented representation of CSS style sheets and also provides relevant APIs for operating CSS styles.

[0066] Furthermore, the application scenarios of the document preview method provided by the embodiment of the present invention are introduced.

[0067] With the development of computer networks, online transmission and sharing of documents are becoming more and more frequent, and users have an increasingly strong demand for online preview of documents. Online preview does not require downloading the original file, which can provide users with a more convenient reading experience.

[0068] In the process of implementing the present invention, it is found that the existing online document preview mostly adopts the technical solution of server-side kernel parsing encoding + front-end decoding typesetting, which has the following shortcomings:

[0069] Since it still relies on the front-end JS (JavaScript) framework in the user's browser environment for decoding, typesetting and drawing, the server has to open and maintain an independent process for each document, resulting in extra memory usage. In addition, in a weak network environment or with complex document samples, the time spent on downloading the introduced JS framework resources and decoding and typesetting the encoded data will directly and linearly affect the rendering speed of the document online preview.

[0070] Secondly, the existing document online preview server parsing technology often uses the qtsvg library to generate the graphic file format SVG, which contains many redundant drawing tag instructions. For example, the generated SVG often contains a lot of meaningless <g>Tags, and <g>Under the label <text>The tag contains a large number of repeated styles related to fonts, which makes the SVG file entity too large, which in turn leads to additional costs in preview data transmission, front-end parsing, and drawing processes, directly affecting the opening speed of the document online preview and the user experience;

[0071] Furthermore, when the qtsvg library is used to generate the graphic file format SVG in the existing document online preview server-side parsing technology, the browser is responsible for the final SVG rendering, and the output <g> <text>When a label encounters vertical characters, the existing rendering and typesetting technology will cause the Chinese characters and punctuation marks that should be displayed vertically in SVG to be rotated 90 degrees (the reason is that SVG cannot directly support the rendering of "@font name" transposed fonts. When the character data of the document is output to the qtsvg engine, the original process directly outputs the characters to <text>Tags, but not in <text>The tag sets the associated rotation matrix to perform rotation correction on the characters).

[0072] Based on the above shortcomings, the present invention proposes a document preview method that can improve document rendering speed and reduce low overhead in all scenarios.

[0073] Combine the following Figure 1-Figure 5 The technical solution of the present invention is described in detail with specific embodiments. The following specific embodiments can be combined with each other, and the same or similar concepts or processes may not be described in detail in some embodiments.

[0074] Figure 1 FIG. 1 is one of the flowcharts of document preview provided by an embodiment of the present invention. Figure 1 As shown, the document preview method includes the following steps:

[0075] Step 101: In response to a first preview operation of a user, obtaining layout data corresponding to the ID according to an identification ID of a document corresponding to the first preview operation and a correspondence between the ID and the layout data; the layout data is scalable vector graphic SVG layout data obtained by preloading layout processing on the document;

[0076] Specifically, in step 101, the user's first preview operation may be to access a document through a web page, wherein the first preview operation at least includes an identification ID of the document. It can be understood that the identification ID of the document is unique and is used to uniquely mark the document. The document may also be in various formats, such as word format, excel format, pdf format, etc.

[0077] Further, according to the document ID of the corresponding document in the first preview operation and the correspondence between the document ID and the typesetting data, a query is performed in the typesetting data to obtain the typesetting data corresponding to the ID, wherein the typesetting data may be SVG typesetting data. It is understandable that the server has preloaded the typesetting process on the document in advance, and therefore, the operation of obtaining the SVG typesetting data corresponding to the ID may be understood as an index matching process, and the time required for the acquisition operation is extremely short, such as within one second or even shorter.

[0078] Optionally, the first preview operation is, for example, an input operation performed by a user through an input device such as a mouse, a keyboard, or a touch screen.

[0079] Step 102: Display a preview page of the document according to the layout data corresponding to the ID.

[0080] Specifically, in step 102, according to the SVG layout data obtained in step 101, a page of the document may be rendered using, for example, a virtual document object model DOM node and a preview page of the document may be displayed to the user.

[0081] The document preview method provided by the embodiment of the present invention obtains the typesetting data corresponding to the identification ID of the document according to the identification ID of the document corresponding to the first preview operation and the correspondence between the ID and the typesetting data by responding to the first preview operation of the user, wherein the typesetting data is the scalable vector graphic SVG typesetting data obtained by preloading the typesetting process on the document, and then, according to the typesetting data corresponding to the identification ID of the document, the preview page of the document is displayed. Because the typesetting data is the SVG typesetting data obtained by preloading the typesetting process on the document, and the typesetting data is associated with the identification ID of the document, that is, the document has been preloaded and typesetting processed in advance, when the user previews the document, only the index matching of the typesetting data is required to realize the rapid display of the preview page of the document, thereby increasing the opening speed of the preview document and improving the user experience.

[0082] Optionally, before obtaining the layout data corresponding to the ID, the method may further include:

[0083] Convert the document to SVG layout data;

[0084] The SVG layout data corresponding to the document is stored, and a corresponding relationship between the SVG layout data and the document ID is established.

[0085] Specifically, the layout data may be scalable vector graphics SVG layout data. In step 101, it is not difficult to understand that the prerequisite for obtaining the layout data corresponding to the ID based on the document ID is that the ID and the layout data correspond one-to-one. Therefore, before obtaining the typesetting data corresponding to the ID, the SVG layout data corresponding to the document and the correspondence between the SVG layout data and the document ID have been stored in advance.

[0086] Furthermore, the pre-storage means that the document can be converted into SVG typesetting data in advance, and a correspondence between the SVG typesetting data and the document ID is established, and then the SVG typesetting data corresponding to the document and the correspondence between the SVG typesetting data and the document ID are pre-stored.

[0087] Optionally, the time for pre-formatting processing may be when the user uploads the document to the file system for the first time.

[0088] It is understandable that if the document ID is not found in the pre-stored layout data, it indicates that the layout data of the document has not been stored in advance, and the pre-loaded layout processing flow can be further executed.

[0089] The document preview method provided by the embodiment of the present invention converts the document into SVG layout data in advance, stores the SVG layout data corresponding to the document, and establishes a corresponding relationship between the SVG layout data and the document ID. When the user needs to preview the document, the corresponding SVG layout data can be quickly matched according to the document ID, which greatly improves the speed of document rendering, facilitates the subsequent rapid display of the document preview page, and also reduces resource overhead.

[0090] Optionally, convert the document to SVG layout data, which can include:

[0091] Generate drawing instructions for typesetting the page content according to the page content of the document, and cache the drawing instructions in the memory;

[0092] When a drawing instruction is called during the layout processing, the drawing instruction is converted into an SVG tag, and the SVG tag is used as SVG layout data.

[0093] Specifically, the page content of the document may include, for example, text content, graphic content (such as circles, rectangles, the length and width of each graphic), etc. Drawing instructions for typeset the page content can be generated based on the page content of the document, such as drawing instructions drawTextItem for drawing text operations, drawing instructions drawImage for drawing picture operations, drawing instructions drawPath for drawing path operations, etc. When the state of the drawing engine (for example: pen, brush, font or its influence on graphics drawing method) changes, the updateState function call of QSvgPaintEngine will be triggered to describe the relevant state changes of the drawing engine. The above state changes and drawing instructions are all cached in the memory.

[0094] Furthermore, when a drawing instruction is called during the typesetting process, the drawing instruction refers to a valid drawing instruction, such as a drawing instruction drawTextItem for drawing text operations, a drawing instruction drawPath for drawing paths, a drawing instruction drawImage for drawing images, etc., then the above drawing instructions are converted into SVG tags, for example <text>Text labels, <g>Group label, Image tags, <path>Path tag, and finally use the above SVG tag as SVG layout data. On the contrary, if it is an invalid drawing instruction, it will be abandoned by the drawing engine QSvgPaintEngine during the drawing process.

[0095] The document preview method provided by the embodiment of the present invention generates drawing instructions for typeset page contents according to the page contents of the document, and converts the valid drawing instructions into SVG tags when valid drawing instructions are called during the typesetting process, and finally uses the SVG tags as SVG typesetting data. Since invalid drawing instructions are discarded during the process of converting the drawing instructions into SVG tags, it can be ensured that the output SVG typesetting data is streamlined valid data, reducing a large amount of redundant data, and saving memory overhead to a certain extent.

[0096] Optionally, the method may further include:

[0097] For a text tag in SVG layout data, determine whether the text tag has the same font attributes as the parent tag;

[0098] If the text label has the same font attributes as the parent label, the same font attributes contained in the text label will be deleted.

[0099] Specifically, the simplified SVG typesetting data mentioned above all contain valid SVG tags. In the method provided by the present invention, the attributes of the SVG tags can be further optimized. Optimization method 1 is as follows:

[0100] When the drawing engine calls drawTextItem to draw text, it calls qfontToSvg to output font attribute information to the text tag in the SVG typesetting data. <text>, for text tags in SVG layout data <text>, the text label can be further determined <text>Whether it has the same font attributes as its parent tag. It is understandable that the parent tag refers to when a tag is wrapped by another tag, and the tag wrapping on the outside is called the parent tag of the wrapped tag; the wrapped tag is called the child tag of the outside wrapping tag. The syntax is "<parent tag><child tag>< / child tag>< / parent tag>", text tag <text>The parent tag refers to the text tag wrapped in <text>External labels, such as <g>. Determine the text label <text>Is the font property set to match the parent tag? <g>The same font name font-family, font size font-size, font thickness font-weight, font style font-style, etc., if the text tag <text>Has the same parent tag <g>If the same font attributes are found in the text tags, the same font attributes contained in the text tags will be deleted.

[0101] It can be understood that the values ​​of the above font attributes represent the attribute information of the font, for example:

[0102] The value of font-family can be: "SimSun", "SimHei", "Microsoft Yahei", "KaiTi", "FangSong";

[0103] The font-size value can be: "10px" "20px" "60px" "100px";

[0104] The font-weight value can be: "normal" or "2bold";

[0105] The font-style value can be: "normal" or "italic".

[0106] For example, the process of deleting the font attribute contained in a text tag that is the same as that of the parent tag is as follows:

[0107] If the text label <text>The font properties included are:

[0108] "font-family: Songti SimSun;

[0109] font-size: 20px;

[0110] font-style: italic;

[0111] font-weight: normal";

[0112] The text label <text>The parent tag of <g>The font properties included are:

[0113] "font-family: Songti SimSun;

[0114] font-size: 20px;

[0115] font-style: normal;

[0116] font-weight: bold";

[0117] Then delete the text tag that contains the parent tag <g>The same font property process is as follows:

[0118] First, determine the text label <text>In the parent tag <g>The same font properties are:

[0119] "font-family: Songti SimSun;

[0120] font-size: 20px;”

[0121] Then, change the text label <text>Contained in the parent tag <g>Same font attribute removed, text label after removal <text>The font properties included are:

[0122] "font-style: italic;

[0123] Font-weight: normal".

[0124] The document preview method provided by the embodiment of the present invention stores SVG layout data in the process of storing the text tags in the SVG layout data. <text>, will abandon <text>The font attributes on the tag are the same as those of the parent tag, such as font name, font size, font weight, font style, etc. Therefore, under the premise of ensuring correct drawing, duplicate data export can be avoided to the greatest extent, the size of exported SVG typesetting data can be reduced, and memory resources can be saved.

[0125] Optionally, the method may further include:

[0126] If the text tag in the SVG typesetting data includes vertical characters, a rotation matrix is ​​added to the text tag, and the rotation matrix is ​​used to correct the direction of the vertical characters; the rotation matrix includes the rotation angle corresponding to each character in the vertical characters.

[0127] Specifically, in the method provided by the present invention, the optimization method 2 for further optimizing the attributes of the SVG tag is as follows:

[0128] In the drawTextItem function, determine whether the font state of the typesetting engine contains information about vertical characters, where vertical characters include vertical text and / or vertical punctuation marks. If vertical character information is contained, then the text label <text>Add a rotation matrix, which is used to correct the orientation of vertical text and / or vertical punctuation marks.

[0129] Among them, the rotation matrix at least includes the rotation angle corresponding to each single character in the vertical characters, such as the rotation angle corresponding to the vertical text and / or the rotation angle corresponding to the vertical punctuation marks. An example of the specific process of using the rotation matrix to correct the orientation of the vertical characters is as follows:

[0130] Calculate the center point position coordinates of the vertical characters according to the horizontal x, vertical y coordinates displayed by the current vertical characters and the width and height of the vertical characters, then translate the coordinate origin to the calculated center point position and rotate the corresponding degrees in the opposite direction of the rotation angle corresponding to the current vertical characters, and finally translate the coordinate origin back to the initial position.

[0131] Optionally, the rotation angle can be a preset angle. For example, when the vertical characters are displayed, they will be rotated 90 degrees clockwise, so the rotation angle is 90 degrees counterclockwise.

[0132] Exemplarily, for example, when encountering the vertical text "中", that is, the rotation angle of "中" is 90 degrees counterclockwise. Among them, the position coordinates of each edge point of the vertical text "中" are respectively: the highest point coordinate is: "x = 10, y = 12", the lowest point coordinate is "x = 10, y = 8", the leftmost point position coordinate is "x = 8, y = 10", the rightmost point position coordinate is "x = 12, y = 10", the character width is "w = 2", and the character height is "h = 2". The method provided by the embodiments of the present invention for correcting the text orientation using the rotation matrix is specifically as follows:

[0133] The first step is to calculate the center point position coordinates of the vertical character "中":

[0134] Specifically, according to the horizontal and vertical coordinates and the character width and height of the vertical character, calculate the center point position coordinates of the vertical character: "x = 10, y = 10". The specific calculation method is to calculate the midpoint coordinates of the horizontal and vertical coordinates respectively, and combine the midpoint coordinates calculated for the horizontal and vertical coordinates respectively to obtain the center point position coordinates of the vertical character.

[0135] The second step is to translate the coordinate origin to the calculated center point position and rotate the corresponding degrees in the opposite direction of the rotation angle corresponding to the current vertical characters;

[0136] Specifically, first translate the coordinate origin to the position of "x = 10, y = 10", that is, first move the coordinates 10 units to the right as a whole, and then move 10 units up (it is also possible to first move the coordinates 10 units up as a whole, and then move 10 units to the right);

[0137] Then rotate the entire coordinate axis clockwise by 90 degrees (the rotation angle corresponding to vertical characters is counterclockwise rotation by 90 degrees).

[0138] In the third step, finally, translate the coordinate origin back to the initial position. Thus, the correction of the vertical character "中" is completed.

[0139] The document preview method provided by the embodiments of the present invention, by correctly calculating the rotation matrix and setting it to <text>Tags, solving the output problem in the prior art <text>Text labels and their parent labels <g>When encountering vertical characters, such as vertical text and / or vertical punctuation marks, the Chinese characters and punctuation marks that should be displayed vertically in the SVG typesetting data are rotated 90 degrees. The direction of the vertical characters is corrected to achieve the correct display of the typesetting data.

[0140] Optionally, before displaying the vertical characters, the method may further include:

[0141] Split vertical characters into individual characters;

[0142] Determine the center point position coordinates corresponding to each single character according to the coordinates of each single character, the height and width of each single character;

[0143] Direction correction is performed on each single character according to the center point position coordinates corresponding to each single character and the rotation angle.

[0144] Specifically, before displaying vertical characters, for example, before displaying vertical text and / or punctuation marks, the vertical text and / or punctuation marks may be split into multiple individual characters, and the rotation matrix acts on each individual character.

[0145] Furthermore, according to the horizontal and vertical coordinates of each split single character, as well as the height and width of each single character, the coordinates of the center point position of each single character are determined, for example, x=10, y=10.

[0146] The single character is rotated according to the calculated horizontal and vertical coordinates of the center point position of each single character and the rotation angle of each single character, so as to correct the direction of each single character.

[0147] The document preview method provided by the embodiment of the present invention splits vertical characters, such as vertical text and / or vertical punctuation marks, to obtain multiple single characters, and then calculates the center point position coordinates of each single character one by one according to the horizontal and vertical coordinates of each single character after the splitting, as well as the height and width of each single character, and then calculates the center point position coordinates of each single character according to the horizontal and vertical coordinates of each single character after the splitting, and the height and width of each single character. <text>The rotation matrix set in the text label contains the rotation angle, so that the direction of each character can be corrected one by one, so that the direction correction of vertical characters is more accurate, and the final displayed typesetting data is displayed correctly, which improves the user experience.

[0148] Optionally, according to the layout data corresponding to the ID, the page of the document is displayed, which may include:

[0149] According to the layout data, a virtual DOM tree is constructed using the virtual document object model DOM node;

[0150] Generate a rendering tree based on the virtual DOM tree and the Cascading Style Sheet Object Model CSSOM tree;

[0151] According to the rendering tree, calculate the geometric information of all element nodes contained in the document;

[0152] Based on the geometric information of all element nodes contained in the document, the preview page of the document is rendered and displayed using the user interface layer of the browser.

[0153] Specifically, the virtual document object model DOM node, also known as Shadow Dom, means that the browser can render a series of DOM elements without inserting them into the DOM tree structure of the main document. It can be understood as a virtual DOM node. The virtual DOM node is an application programming interface (Application Program Interface, API) for Hypertext Markup Language (HTML) and Extensible Markup Language (XML) documents. The virtual DOM node allows developers to add, remove, and modify a part of the page.

[0154] Furthermore, based on the layout data obtained in step 101, such as SVG layout data, a virtual document object model DOM node can be used to render and display the current page of the document. Specifically,

[0155] The first step is to parse the HTML source code and build a virtual DOM tree;

[0156] Specifically, in the virtual DOM tree, each HTML tag has a corresponding node (element node), and each text also has a corresponding node (text node). The root node of the DOM tree is the document element of the document, which corresponds to the html tag.

[0157] The second step is to parse various Cascading Style Sheets (CSS) codes, calculate the final style data, and build the CSSOM tree;

[0158] Specifically, corresponding style information is added to each element node, and the size of the space occupied by it in the browser is calculated.

[0159] The third step is to generate a rendering tree based on the virtual DOM tree and CSSOM tree;

[0160] Specifically, the DOM tree and the CSSOM rule tree are merged to construct a render tree render tre. For example, the DOM tree and the CSSOM tree are combined to generate a render tree, which is a tree composed of the visual elements of the page in the order of their display, allowing the browser to draw the content in the correct order. Among them, the difference between the render tree and the virtual DOM tree is that the virtual DOM tree completely corresponds to the HTML tag one by one, while the render tree will ignore elements that do not need to be rendered (such as elements with display:none). Display:none means setting the element to be invisible and not even generating a box model. It is generally used for hidden elements that do not take up space. In addition, each node in the render tree stores the corresponding CSS properties;

[0161] In the fourth step, the geometric information of all element nodes contained in the document can be calculated based on the rendering tree.

[0162] Specifically, the layout can be performed according to the render tree to calculate the geometric information of each element node. This step specifically refers to calculating the node information according to the render tree. The browser renders the page using a flow layout by default, starting from the root (corresponding to the element of the HTML document), and then recursively traversing part or all of the frame hierarchy to calculate geometric information for the renderer, such as calculating the position and size of the element frame box.

[0163] Step 5: Based on the geometric information of all element nodes contained in the document, the preview page of the document is rendered and displayed using the user interface layer of the browser;

[0164] Specifically, the document page can be rendered and drawn on the display screen using the user interface (UI) layer of the browser according to the geometric information of all element nodes contained in the document calculated by the render tree. Specifically, it means drawing and displaying the entire preview page according to the calculated information.

[0165] It is understandable that the above five steps are not necessarily completed in order at one time. If the DOM or CSSOM is modified, the above process needs to be repeated so that it can be calculated which pixels need to be re-rendered and displayed on the screen. In actual pages, CSS JavaScript often modifies the DOM and CSSOM multiple times. When part of the rendering tree must be updated and the size of the node changes, the browser will invalidate the affected part of the rendering tree and need to reconstruct the rendering tree. Furthermore, in the browser behavior triggered by the change of the appearance of an element, the browser will redraw the element according to the new attributes to give the element a new appearance, such as changing the text color, background color, etc. of an element.

[0166] The document preview method provided by the embodiment of the present invention constructs a virtual DOM tree using a virtual document object model DOM node according to typesetting data, then generates a rendering tree according to the virtual DOM tree and a cascading style sheet object model CSSOM tree, calculates the geometric information of all element nodes contained in the document according to the rendering tree, and then, based on the geometric information of all element nodes contained in the document, renders and displays the preview page of the document using the user interface layer of the browser. In this method, a virtual DOM node is used to render and display the page of the document, so that a component-based application can be realized, which does not interact with other processes in the document and can effectively improve the document rendering performance.

[0167] Optionally, the virtual DOM node is a node managed by a node container, and the method may further include:

[0168] receiving a second preview operation of the user; the second preview operation is used to indicate information of a page to be displayed in the document;

[0169] Determine whether the number of virtual DOM nodes in the current node container reaches the upper limit of the number of nodes in the node container;

[0170] If the number of current virtual DOM nodes reaches the upper limit of the number of nodes in the node container, the page content corresponding to the first virtual DOM node in the node queue of the node container is cleaned to obtain the cleaned virtual DOM node;

[0171] The cleaned virtual DOM node is added to the node queue corresponding to the node container, and is rendered and displayed according to the layout data of the page to be displayed.

[0172] Specifically, a virtual DOM node is a node managed by a node container. The node container includes a configurable parameter node container upper limit. The node container upper limit refers to the maximum number of virtual DOM nodes that the node container can accommodate. For example, the node container upper limits are 100 and 200, which respectively represent that the maximum number of virtual DOM nodes that the node container can accommodate is 100 and 200.

[0173] Furthermore, the second preview operation is used to indicate information of the page to be displayed in the document, for example, to preview page 101 of document B. When receiving the second preview operation of the user, it is first determined whether the number of current virtual DOM nodes in the node container reaches the upper limit of the number of nodes of the node container. For example, if the upper limit of the node container is 100 and the number of virtual DOM nodes currently contained in the node container is 100, it means that the number of current virtual DOM nodes reaches the upper limit of the number of nodes of the node container.

[0174] Furthermore, if the number of current virtual DOM nodes reaches the upper limit of the number of nodes of the node container, the page content corresponding to the first virtual DOM node in the node queue of the node container is cleaned to obtain a cleaned virtual DOM node.

[0175] Exemplarily, the upper limit of the number of nodes in the node container is 100, and the number of virtual DOM nodes currently contained in the node container is 100. If the virtual DOM node corresponding to the 101st page is added, the upper limit of the number of nodes will be exceeded. In this case, the page content corresponding to the first virtual DOM node in the virtual node queue will be cleaned. After cleaning, the first virtual DOM node only retains the frame information (also called position attributes) of the page corresponding to the first virtual DOM node, such as width, height, page margins, etc. The frame information is retained for subsequent reuse.

[0176] Furthermore, the cleaned virtual DOM node is added to the node queue corresponding to the node container. Specifically, the first virtual DOM node can be added to the end of the node queue corresponding to the node container. Finally, it is rendered and displayed based on the virtual DOM node according to the layout data of the page to be displayed.

[0177] The document preview method provided in this embodiment manages drawing nodes and virtual DOM nodes through node containers, which can reduce memory usage when rendering and displaying documents, further improve rendering speed and save memory overhead.

[0178] Figure 2 FIG. 1 is a schematic diagram of another embodiment of the document preview method provided by the present invention. Figure 2 As shown, the method includes:

[0179] Step 201: A user accesses a document;

[0180] Step 202: Match the SVG layout data in the cache according to the document identification index;

[0181] Step 203: Render and display the document page using a virtual DOM node based on the matched SVG layout data;

[0182] Step 204: The user accesses subsequent pages of the document;

[0183] Step 205: Determine whether the number of virtual DOM nodes in the node container currently reaches the upper limit of the number of nodes in the node container;

[0184] If the current number of virtual DOM nodes in the node container reaches the upper limit of the node container, the critical virtual DOM nodes are cleaned and the cleaned virtual DOM nodes are added to the node queue corresponding to the node container;

[0185] Step 206: Render and display according to the SVG layout data of the page to be displayed.

[0186] Specifically, when a user needs to access a document, the accessed document at least includes a document identifier, and a query is performed on the SVG layout data in the cache according to the document identifier of the accessed document, and the SVG layout data corresponding to the document identifier is indexed and matched, and the SVG layout data is pre-selected and stored, and a corresponding relationship is established in advance with the document identifier;

[0187] Further, based on the SVG layout data corresponding to the document identifier, a virtual document object model DOM node is used to render the page of the document and display it to the user;

[0188] Furthermore, after browsing the current page of the document, the user can also visit subsequent pages of the document. The instruction for accessing subsequent pages can be to load by scrolling the mouse, locate the page to be visited and stop scrolling, or to click on the specified page on the screen by touch. This embodiment does not limit this.

[0189] Furthermore, when the user visits subsequent pages, it is necessary to first determine whether the current number of virtual DOM nodes in the node container has reached the upper limit of the number of nodes in the node container. If the current number of virtual DOM nodes in the node container has reached the upper limit of the number of nodes in the node container, the first virtual DOM node in the node container is cleaned, and then the cleaned virtual DOM node is added to the node queue corresponding to the node container.

[0190] Finally, the SVG layout data corresponding to the page to be displayed indicated by the user is rendered and displayed to the user.

[0191] Figure 3 The following is a schematic diagram of the preloading typesetting process provided by an embodiment of the present invention. Figure 3 As shown, the preloading layout processing flow is as follows:

[0192] Step 301: A user uploads a document to a file system for the first time;

[0193] Step 302: Call the preloading interface to request the file system to download the document and load the document;

[0194] Step 303: convert the document into SVG layout data, while reducing redundant and repeated drawing instructions;

[0195] Step 304: Optimize text tag attributes in the SVG typesetting data;

[0196] Step 305: Store the SVG layout data corresponding to the document, and establish a corresponding relationship between the SVG layout data and the document ID.

[0197] Specifically, when a user uploads a document to a file system (a file system is used to store document files) for the first time, first, for example, a business server (a service device used to communicate and interact with this service) triggers a call to a preload interface, requests the file system to download and load the document, and then performs a preload typesetting operation on the document. The preload typesetting operation process is as follows:

[0198] Convert the document into SVG layout data, while reducing redundant and repeated drawing instructions, wherein reducing redundant and repeated instructions means converting only valid drawing instructions such as drawTextItem, drawPath, drawImage, etc. into SVG tags;

[0199] Furthermore, the text tag attributes in the SVG typesetting data may be optimized. For example, the optimization method may include:

[0200] Optimization method 1: Delete the font attributes of the text tags in the SVG layout data that are the same as those of their parent tags;

[0201] When the drawing engine calls drawTextItem to draw text, it also calls qfontToSvg to output font attribute information to the text tag in the SVG typesetting data. <text>For text tags in SVG layout data <text>, the text label can be further determined <text>Whether to set the parent tag to include <g>The same font attributes, such as whether the same font name font-family, font size font-size, font weight font-weight, font style font-style, etc. are set. If the text tag <text>Set with the same parent tag <g>The same font attributes, then the text label <text>The same font attributes contained in are deleted, thereby saving memory resources to a certain extent;

[0202] And optimization method 2: adding a rotation matrix to the text label including vertical text and / or punctuation marks in the SVG typesetting data to correct the direction of the vertical text and / or punctuation marks;

[0203] For example, in the drawTextItem function, it is determined whether the font state of the typesetting engine contains vertical information, such as vertical text and / or punctuation marks. If it contains vertical information, the vertical text and / or punctuation marks can be split into single characters and then displayed in the text label. <text>A rotation matrix is ​​added to correct the direction of vertical text and / or punctuation marks so that the layout data is displayed correctly.

[0204] Finally, the final document layout data after the above optimization is cached in the storage medium, and the corresponding relationship between the SVG layout data and the document's identification ID is established. At this point, the preloading layout processing flow for the first uploaded document is completed. Among them, it can be understood that the identification ID of the document is unique and is used to uniquely mark the document. Therefore, the user can match the specific document based on the identification ID of the document; further, the mapping relationship between the above optimized document layout data, such as SVG layout data and the document's identification ID can be established and stored in the storage medium. At this point, the preloading layout processing flow for the document is completed. When the user needs to preview the document, the layout data corresponding to the ID can be uniquely obtained through the document's identification ID.

[0205] In the method provided in this embodiment, a dynamic loading strategy is adopted to preload typesetting processing technology with low overhead, and different typesetting data optimization strategies are adopted according to the document currently accessed by the user, so as to ensure that the user can quickly render and display the preview page of the document in a short time, such as within one second, in any scenario, so as to achieve the effect of extremely fast preview of the document. Moreover, after optimizing the text tag attributes in the SVG typesetting data, the typesetting data is generated by deleting the text tags with repeated text attributes, so that the memory occupied by the finally exported typesetting data is reduced, which can save memory resources.

[0206] Optionally, the method may further include:

[0207] Receive batch operations of rotation or scaling by users;

[0208] In response to the batch operation of rotation or scaling, a page corresponding to the batch operation of rotation or scaling is rendered using a virtual DOM node.

[0209] Specifically, when the user performs a batch operation of rotation or scaling, in response to the batch operation, the corresponding page is rendered through the virtual DOM node, that is, the page is rendered through the corresponding SVG layout data operated by the virtual DOM node, for example, a shadow Dom node is created through the native interface, and the content of the SVG layout data is encapsulated in the web component Web components. Web Components is a set of technical APIs for web platforms that allow users to create reusable custom elements (their functions are encapsulated outside the code) and can be used in web applications. In this way, the markup structure, style, and behavior can be hidden and isolated from other codes on the page, thereby realizing complex displacement transformations such as batch rotation or batch scaling operations.

[0210] The document preview method provided by the embodiment of the present invention, when receiving a user's batch operation of rotating or scaling a document, uses the pre-generated SVG typesetting data to render the corresponding page through the created virtual DOM node. The current virtual DOM node can be isolated from other DOM nodes in the document, thereby ensuring that different code parts are not mixed together, making the code cleaner and neater, and greatly improving the efficiency when performing complex displacement transformations.

[0211] The document preview device provided by the present invention is described below. The document preview device described below and the document preview method described above can be referred to each other.

[0212] Figure 4 4 is a schematic diagram of the structure of a document preview device 400 provided in an embodiment of the present invention. Figure 4 As shown, the document preview device includes: an acquisition module 410 and a display module 420. Among them:

[0213] The acquisition module 410 is used to, in response to a first preview operation of the user, acquire the layout data corresponding to the ID according to the identification ID of the document corresponding to the first preview operation and the correspondence between the ID and the layout data; the layout data is the scalable vector graphic SVG layout data obtained by preloading layout processing on the document;

[0214] The display module 420 is used to display the preview page of the document according to the layout data corresponding to the ID.

[0215] The document preview device provided by the embodiment of the present invention responds to the first preview operation of the user through the acquisition module, and acquires the typesetting data corresponding to the ID according to the identification ID of the document corresponding to the first preview operation and the correspondence between the ID and the typesetting data, wherein the typesetting data is the scalable vector graphic SVG typesetting data obtained by preloading the typesetting processing of the document; further, the processing module displays the preview page of the document according to the typesetting data corresponding to the identification ID of the document. Because the typesetting data is the SVG typesetting data obtained by preloading the typesetting processing of the document, and the typesetting data and the identification ID of the document are associated, that is, the document is preloaded with typesetting processing in advance, when the user previews the document, only the index matching of the typesetting data is required to realize the rapid display of the preview page of the document, thereby improving the opening speed of the preview document and improving the user experience.

[0216] Optionally, the document preview device 400 further includes a preloaded typesetting processing module;

[0217] The preloaded typesetting processing module is specifically used for:

[0218] Before obtaining the layout data corresponding to the ID, convert the document into SVG layout data;

[0219] The SVG layout data corresponding to the document is stored, and a corresponding relationship between the SVG layout data and the document ID is established.

[0220] Optionally, the preloaded typesetting processing module is specifically used to:

[0221] Generate, according to the page content of the document, a drawing instruction for typeset processing the page content, and cache the drawing instruction in a memory;

[0222] When the drawing instruction is called during the layout processing, the drawing instruction is converted into an SVG tag, and the SVG tag is used as the SVG layout data.

[0223] Optionally, the document preview device 400 further includes: a label optimization module;

[0224] The label optimization module is used to:

[0225] For a text tag in SVG layout data, determine whether the text tag has the same font attributes as the parent tag;

[0226] If the text label has the same font attributes as the parent label, the same font attributes contained in the text label will be deleted.

[0227] Optionally, the document preview device 400 further includes: a character correction module;

[0228] The character correction module is used for:

[0229] If the text label in the SVG typesetting data includes vertical characters, a rotation matrix is ​​added to the text label, and the rotation matrix is ​​used to correct the direction of the vertical characters; the rotation matrix includes the rotation angle corresponding to each character in the vertical characters.

[0230] Optionally, the character correction module is further used to:

[0231] Before displaying the vertical characters, split the vertical characters into multiple single characters;

[0232] Determine the center point position coordinates corresponding to each of the single characters according to the coordinates of each of the single characters, the height and the width of each of the single characters;

[0233] Direction correction is performed on each of the single characters according to the center point position coordinates corresponding to each of the single characters and the rotation angle.

[0234] Optionally, the display module 420 is specifically used for:

[0235] According to the typesetting data, a virtual DOM tree is constructed using a virtual document object model DOM node;

[0236] Generate a rendering tree according to the virtual DOM tree and the Cascading Style Sheet Object Model CSSOM tree;

[0237] According to the rendering tree, calculating geometric information of all element nodes contained in the document;

[0238] Based on the geometric information of all element nodes contained in the document, the preview page of the document is rendered and displayed using the user interface layer of the browser.

[0239] Optionally, the document preview device 400 further includes: a node management module;

[0240] The node management module is specifically used for:

[0241] receiving a second preview operation of the user; the second preview operation is used to indicate information of a page to be displayed in the document;

[0242] Determine whether the number of current virtual DOM nodes in the node container reaches the upper limit of the number of nodes in the node container;

[0243] If the number of the current virtual DOM nodes reaches the upper limit of the number of nodes of the node container, the page content corresponding to the first virtual DOM node in the node queue of the node container is cleaned to obtain a cleaned virtual DOM node;

[0244] The cleaned virtual DOM node is added to the node queue corresponding to the node container, and is rendered and displayed according to the layout data of the page to be displayed.

[0245] Optionally, the document preview device 400 further includes: a batch operation module;

[0246] The batch operation module is specifically used for:

[0247] Receive batch operations of rotation or scaling by users;

[0248] In response to the batch operation of rotation or scaling, a page corresponding to the batch operation of rotation or scaling is rendered using a virtual DOM node.

[0249] Figure 5 An example of a physical structure diagram of an electronic device is shown in FIG. Figure 5 As shown, the electronic device may include: a processor 510, a communication interface 520, a memory 530 and a communication bus 540, wherein the processor 510, the communication interface 520 and the memory 530 communicate with each other through the communication bus 540. The processor 510 may call the logic instructions in the memory 530 to execute the document preview method, which includes:

[0250] In response to a first preview operation of the user, obtaining the typesetting data corresponding to the ID according to the identification ID of the document corresponding to the first preview operation and the correspondence between the ID and the typesetting data; the typesetting data is the scalable vector graphic SVG typesetting data obtained by preloading typesetting processing on the document;

[0251] According to the layout data corresponding to the ID, a preview page of the document is displayed.

[0252] In addition, the logic instructions in the above-mentioned memory 530 can be implemented in the form of a software functional unit and can be stored in a computer-readable storage medium when it is sold or used as an independent product. Based on such an understanding, the technical solution of the present invention, in essence, or the part that contributes to the prior art or the part of the technical solution, can be embodied in the form of a software product, and the computer software product is stored in a storage medium, including a number of instructions for a computer device (which can be a personal computer, a server, or a network device, etc.) to perform all or part of the steps of the method described in each embodiment of the present invention. The aforementioned storage medium includes: U disk, mobile hard disk, read-only memory (ROM, Read-Only Memory), random access memory (RAM, Random Access Memory), disk or optical disk, etc. Various media that can store program codes.

[0253] On the other hand, the present invention further provides a computer program product, the computer program product includes a computer program, the computer program can be stored in a non-transitory computer-readable storage medium, when the computer program is executed by a processor, the computer can execute the document preview method provided by the above methods, the method includes:

[0254] In response to a first preview operation of the user, obtaining the typesetting data corresponding to the ID according to the identification ID of the document corresponding to the first preview operation and the correspondence between the ID and the typesetting data; the typesetting data is the scalable vector graphic SVG typesetting data obtained by preloading typesetting processing on the document;

[0255] According to the layout data corresponding to the ID, a preview page of the document is displayed.

[0256] In another aspect, the present invention further provides a non-transitory computer-readable storage medium having a computer program stored thereon, and when the computer program is executed by a processor, the document preview method provided by the above methods is implemented, and the method includes:

[0257] In response to a first preview operation of the user, obtaining the typesetting data corresponding to the ID according to the identification ID of the document corresponding to the first preview operation and the correspondence between the ID and the typesetting data; the typesetting data is the scalable vector graphic SVG typesetting data obtained by preloading typesetting processing on the document;

[0258] According to the layout data corresponding to the ID, a preview page of the document is displayed.

[0259] The device embodiments described above are merely illustrative, wherein the units described as separate components may or may not be physically separated, and the components displayed as units may or may not be physical units, that is, they may be located in one place, or they may be distributed on multiple network units. Some or all of the modules may be selected according to actual needs to achieve the purpose of the scheme of this embodiment. Those of ordinary skill in the art may understand and implement it without creative effort.

[0260] Through the description of the above implementation methods, those skilled in the art can clearly understand that each implementation method can be implemented by means of software plus a necessary general hardware platform, and of course, it can also be implemented by hardware. Based on this understanding, the above technical solution is essentially or the part that contributes to the prior art can be embodied in the form of a software product, and the computer software product can be stored in a computer-readable storage medium, such as ROM / RAM, a disk, an optical disk, etc., including a number of instructions for a computer device (which can be a personal computer, a server, or a network device, etc.) to execute the methods described in each embodiment or some parts of the embodiments.

[0261] Finally, it should be noted that the above embodiments are only used to illustrate the technical solutions of the present invention, rather than to limit it. Although the present invention has been described in detail with reference to the aforementioned embodiments, those skilled in the art should understand that they can still modify the technical solutions described in the aforementioned embodiments, or make equivalent replacements for some of the technical features therein. However, these modifications or replacements do not deviate the essence of the corresponding technical solutions from the spirit and scope of the technical solutions of the embodiments of the present invention.< / text> < / text> < / g> < / text> < / g> < / text> < / text> < / text> < / text> < / g> < / text> < / text> < / text> < / text> < / text> < / text> < / g> < / text> < / g> < / text> < / g> < / g> < / text> < / text> < / g> < / text> < / g> < / text> < / g> < / text> < / text> < / text> < / text> < / text> < / path> < / g> < / text> < / text> < / text> < / text> < / g> < / text> < / g> < / g>

Claims

1. A document preview method, characterized in that: include: In response to a first preview operation of the user, obtaining the typesetting data corresponding to the ID according to the identification ID of the document corresponding to the first preview operation and the correspondence between the ID and the typesetting data; the typesetting data is the scalable vector graphic SVG typesetting data obtained by preloading typesetting processing on the document; According to the layout data corresponding to the ID, a preview page of the document is displayed.

2. The document preview method according to claim 1, characterized in that: Before obtaining the typesetting data corresponding to the ID, the method further includes: Converting the document into SVG layout data; The SVG layout data corresponding to the document is stored, and a corresponding relationship between the SVG layout data and the ID of the document is established.

3. The document preview method according to claim 2, characterized in that: The step of converting the document into SVG layout data comprises: Generate, according to the page content of the document, a drawing instruction for typeset processing the page content, and cache the drawing instruction in a memory; When the drawing instruction is called during the layout processing, the drawing instruction is converted into an SVG tag, and the SVG tag is used as the SVG layout data.

4. The document preview method according to claim 3, characterized in that: The method further comprises: For a text tag in the SVG typesetting data, determining whether the text tag has the same font attribute as a parent tag; If the text tag has the same font attribute as the parent tag, the same font attribute contained in the text tag is deleted.

5. The document preview method according to claim 3 or 4, characterized in that: The method further comprises: If the text label in the SVG typesetting data includes vertical characters, a rotation matrix is ​​added to the text label, and the rotation matrix is ​​used to correct the direction of the vertical characters; the rotation matrix includes the rotation angle corresponding to each character in the vertical characters.

6. The document preview method according to claim 5, characterized in that: Before displaying the vertical characters, the method further includes: Splitting the vertical character into multiple single characters; Determine the center point position coordinates corresponding to each of the single characters according to the coordinates of each of the single characters, the height and the width of each of the single characters; Direction correction is performed on each of the single characters according to the center point position coordinates corresponding to each of the single characters and the rotation angle.

7. The document preview method according to any one of claims 1 to 4, characterized in that: The step of displaying a preview page of the document according to the layout data corresponding to the ID includes: According to the typesetting data, a virtual DOM tree is constructed using a virtual document object model DOM node; Generate a rendering tree according to the virtual DOM tree and the Cascading Style Sheet Object Model CSSOM tree; According to the rendering tree, calculating geometric information of all element nodes contained in the document; Based on the geometric information of all element nodes contained in the document, the preview page of the document is rendered and displayed using the user interface layer of the browser.

8. The document preview method according to claim 7, characterized in that: The virtual DOM node is a node managed by a node container, and the method further includes: receiving a second preview operation of the user; the second preview operation is used to indicate information of a page to be displayed in the document; Determine whether the number of current virtual DOM nodes in the node container reaches the upper limit of the number of nodes in the node container; If the number of the current virtual DOM nodes reaches the upper limit of the number of nodes of the node container, the page content corresponding to the first virtual DOM node in the node queue of the node container is cleaned to obtain a cleaned virtual DOM node; The cleaned virtual DOM node is added to the node queue corresponding to the node container, and is rendered and displayed according to the layout data of the page to be displayed.

9. The document preview method according to any one of claims 1 to 4, characterized in that: The method further comprises: Receive batch operations of rotation or scaling by users; In response to the batch operation of rotation or scaling, a page corresponding to the batch operation of rotation or scaling is rendered using a virtual DOM node.

10. A document preview device, characterized in that: include: an acquisition module, configured to, in response to a first preview operation of a user, acquire, according to an identification ID of a document corresponding to the first preview operation and a correspondence between the ID and the layout data, layout data corresponding to the ID; the layout data being scalable vector graphic SVG layout data obtained by preloading layout processing on the document; The display module is used to display the preview page of the document according to the layout data corresponding to the ID.

Images