A browser-based ofd file display and editing method

Abstract

The application relates to the technical field of document editing, and relates to a browser-based ofd file display and editing method; first, a default virtual ofd file is created on the browser side, and the virtual ofd file is constructed according to the file hierarchical organization structure and data structure standard of the ofd and is realized by javascript; then, a Web editor is created according to the virtual ofd file; the ofd file is selected through the Web editor; the ofd file is parsed; the virtual ofd file is reset; and the editor is reset to edit the ofd file; the virtual ofd file is constructed according to the file hierarchical organization structure and data structure standard of the OFD and is realized by javascript; then, a Web editor is created according to the virtual ofd file; the virtual ofd file is modified through the Web editor; and finally, the editing function of the ofd file is realized in a what-you-see-is-what-you-get mode.

Description

TECHNICAL FIELD

[0001] The application belongs to the technical field of document editing, and particularly relates to an ofd file display and editing method based on a browser. BACKGROUND

[0002] OFD is an open format document, and is a Chinese format document defined in the national standard GB / T 33190-2016 Electronic File Storage and Exchange Format Document.

[0003] The so-called 'format document' refers to that the page content described by the format document has fixed position, size, color and appearance information, and ensures that the display effect of the page content on all terminals is completely fixed and consistent.

[0004] As a format document, the ofd file requires that the display effect is completely fixed and consistent, which leads to the fact that many people habitually ignore the editing requirement of the ofd file itself, and leads to the fact that there is currently no what-you-see-is-what-you-get editing method of the ofd file based on a browser.

[0005] Currently, there is no ofd editor based on a browser end, and there is only an ofd reader.

[0006] The existing ofd readers based on a browser end all have no editing function but only have a display function, and the existing methods for obtaining a new ofd file are all based on a desktop end application and have the following methods.

[0007] 1. A corresponding flow document is generated by using a Word or the like flow document editor, the ofd file is converted into the ofd file through a server end, and a new ofd document is obtained. Because the style standard of the flow document is different from the standard of the ofd document, the converted ofd file always has a deviation in the style. Especially, the ofd text layout format is different from the Word, which leads to the fact that the generated ofd file has an abnormal text layout. Often, the same text content is split into many independent paragraphs.

[0008] In addition, for example, a special layout scene such as an invoice, it is difficult to realize by using the Word, and thus the layout of the ofd file such as the invoice needs to be manually decompressed, the corresponding attribute is modified in the xml file, and then the ofd is compressed to generate the ofd. It is very inconvenient.

[0009] 2. A PDF file is created by using other desktop end PDF editors, and then the OFD file is converted. For example, a Foxit PDF editor.

[0010] In view of the above problems, a ofd file display and editing method based on a browser is required. SUMMARY

[0011] The application aims to provide a browser-based ofd file display and editing method; according to the file hierarchical organization structure and data structure standard of OFD, a virtual ofd file implemented by javascript is constructed; then a Web editor is created according to the virtual ofd file; the virtual ofd file is modified through the Web editor; finally the editing function of the ofd file is realized.

[0012] The method is implemented according to the following steps;

[0013] S1: a default virtual ofd file is created on the browser side, and according to the file hierarchical organization structure and data structure standard of OFD, a virtual ofd file implemented by javascript is constructed;

[0014] S2: a Web editor is created according to the virtual ofd file;

[0015] S3: the ofd file is selected through the Web editor;

[0016] S4: the ofd file is parsed;

[0017] S5: the virtual ofd file is reset;

[0018] S6: the editor is reset to edit the ofd file.

[0019] Further, in step S2, the Web editor component is a JavaScript class or object, which can bind all ofd standard data structures, the virtual ofd file created above and the objects of each layer of the virtual ofd file.

[0020] The Web editor includes menu bar, control bar, content area, property bar and other advanced components, which are essentially created by the abstract class of the editor component.

[0021] The Web editor includes the head menu bar, left control bar, document editing bar and right property bar advanced components created based on the abstract class of the editor component, wherein the left control bar includes outline, page thumbnail, template thumbnail and organization structure, the document editing bar is provided with Web document component, Web page component, Web layer component and Web component component, wherein each level of the document editing bar corresponds to each level of the ofd file, and when creating the editor object of the corresponding level, the object of the corresponding level of the virtual ofd file is transmitted into the level component of the Web editor as a parameter.

[0022] The right property bar includes document property, page property and control property; the properties of the corresponding virtual ofd file level are bound to edit the properties of the ofd file.

[0023] In creating the corresponding level of Web editor object, the object of the corresponding level of the virtual ofd file is transmitted into the level component of the Web editor as a parameter. While transmitting the object of the corresponding level of the virtual ofd file, its attributes are converted into the attributes of the component of the corresponding level of the editor. Thus, the Web editor component of each level and the file hierarchy component structure of the ofd file form a one-to-one mapping relationship. Since the document editing area of the Web has been bound with the virtual ofd file, the virtual ofd file can be directly modified, and the editing function of the ofd is realized.

[0024] Further, the document editing area executes a rendering method to generate a dom tree corresponding to the ofd file, and renders the content of the ofd file on the browser end.

[0025] Further, in step S6, the ofd file is edited in the Web editor, wherein the document editing area includes Web components, and the Web components include a WebDocument component, a WebPage component, a WebLayer component and a WebDocument component.

[0026] Further, in step S3, the ofd file is selected, specifically including an xml file and files of pictures, videos, signatures and annotations, and then in step S4, the xml file content of each level of the ofd file is parsed into a format conforming to the ofd data structure standard, and is imported into the Web editor corresponding to the virtual ofd file.

[0027] Further, the right attribute area includes three levels of document attributes, page attributes and control attributes, which correspond to the control of the ofd document, page and graphic element three levels, and specifically through setting the attribute area component events, the browser operation is listened to, and the entered content is added to the corresponding ofd object or attribute according to the ofd standard.

[0028] Further, a new control is added to the content area of the Web editor; the Web component is created, and a new ofd graphic element object is added to the corresponding level of the virtual ofd file, so as to achieve the purpose of adding the graphic element object in the virtual ofd file.

[0029] Compared with the prior art, the beneficial effects of the present application are:

[0030] 1. The data structure of the virtual ofd file capable of directly generating the ofd file is created based on the ofd standard, and the data structure of the Web editor component created based on the virtual dom tree can be directly rendered on the browser end and listen to the browser operation. Through the mapping relationship of the two, the editing function of the ofd file on the browser end is finally realized.

[0031] 2. Selecting the ofd file in the browser, displaying the content of the ofd file, selecting the corresponding control or configuration attribute control item, and cooperating with the mouse and keyboard to drag, stretch, input, delete and other operations, so as to edit the ofd file in a what-you-see-is-what-you-get manner, and the whole process does not need the support of the server side. BRIEF DESCRIPTION OF DRAWINGS

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

[0033] Figure 1 is a method flowchart of the present application;

[0034] Figure 2 is a mapping diagram of the virtual ofd file and the Web editor of the present application;

[0035] Figure 3 is a component structure diagram of the virtual editor of the present application;

[0036] Figure 4 is a virtual ofd file component structure diagram of the present application. DETAILED DESCRIPTION

[0037] In order to make the purpose, technical solutions and advantages of the embodiments of the present application more clear, the following will combine the drawings in the embodiments of the present application to clearly and completely describe the technical solutions in the embodiments of the present application. Obviously, the described embodiments are part of the embodiments of the present application, but not all the embodiments. Based on the embodiments in the present application, all other embodiments obtained by those skilled in the art without creative labor are within the scope of protection of the present application. Therefore, the following detailed description of the embodiments of the present application provided in the drawings is not intended to limit the scope of the claimed present application, but only represents selected embodiments of the present application. Based on the embodiments in the present application, all other embodiments obtained by those skilled in the art without creative labor are within the scope of protection of the present application.

[0038] Please refer to Figures 1-4 , a browser-based ofd file display and editing method;

[0039] comprising the following steps: such as Figure 1 ,

[0040] S1: creating a default virtual ofd file on the browser side, specifically constructing a virtual ofd file realized by javascript according to the file hierarchy organization structure and data structure standard of ofd; S2: creating a Web editor according to the virtual ofd file;

[0041] S3: selecting an ofd file through the Web editor;

[0042] S4: parsing the ofd file;

[0043] S5: resetting the virtual ofd file;

[0044] S6: resetting the editor to edit the ofd file.

[0045] In the embodiment, in step S2, the Web editor component is a class or object of javascript, which can bind all of the data structures of ofd standard, and can also bind the virtual ofd file created above and the objects of each layer of the virtual ofd file.

[0046] The application simulates the file hierarchy organization structure and the file data structure, uses javascript to realize the corresponding virtual folder class and virtual file, and then organizes the virtual ofd file according to the standard of OFD.

[0047] The file hierarchy organization structure of OFD is realized based on the abstract class of virtual folder containing parent nodes and child nodes. The data structure of the virtual file of OFD is realized based on the abstract class of virtual file containing the parent node of virtual folder and the child node conforming to the data structure of ofd standard. The component structure of the virtual ofd file is as follows Figure 4 .

[0048] As Figure 3 , wherein the Web editor includes menu bar, control bar, content area, attribute bar and other advanced components, and these components are essentially created by the specific class of the abstract class of editor component.

[0049] Wherein the control bar includes outline, component structure, page thumbnail, template thumbnail and the like; and controls the outline, organization structure, page tree, template tree and the like of the ofd document respectively. By setting the events attribute of the corresponding component, the browser operation is listened to, and the content of the corresponding virtual ofd file can be edited.

[0050] The property control bar of the editor is related to the property binding of the content corresponding to the virtual ofd file. The property bar includes three levels of document properties, page properties, and control properties; controls three levels of ofd documents, pages, and graphic elements, respectively. Set the events of the property bar component, listen to browser operations such as keyboard input, save, and add the entered content to the corresponding ofd object or property according to the ofd standard. When deleting, if the control is selected, the selected object will be deleted in the editor content area. The related editing operation can synchronize the modification of the virtual ofd file, so that the corresponding editing purpose can also be achieved.

[0051] The web editor includes a header menu bar, a left control bar, a document editing bar, and a right property bar high-level component created based on the abstract class of the editor component, wherein the left control bar includes an outline, a page thumbnail, a template thumbnail, and an organizational structure, the document editing bar is provided with a web document component, a web page component, a web layer component, and a web component component, wherein each level of the document editing bar corresponds to each level of the ofd file, and when creating the editor object of the corresponding level, the object of the corresponding level of the virtual ofd file is transmitted into the level component of the web editor as a parameter.

[0052] The right property bar includes document properties, page properties, and control properties; binds the properties of the corresponding virtual ofd file level to edit the properties of the ofd file.

[0053] When creating the web editor object of the corresponding level, the object of the corresponding level of the virtual ofd file is transmitted into the level component of the web editor as a parameter. At the same time, the attributes of the object of the corresponding level of the virtual ofd file are converted into the attributes of the component of the corresponding level of the editor. Thus, the web editor component of each level and the file hierarchy component structure of the ofd file form a one-to-one mapping relationship. The brief mapping diagram of the virtual ofd file and the web editor is as follows: Figure 2 ,

[0054] Since the document editing area of the web has bound the virtual ofd file, the virtual ofd file can be directly modified to achieve the editing function of the ofd.

[0055] The ofd file is edited in the Web editor, wherein the document editing column comprises Web components, the Web components comprise a WebDocument component, a WebPage component, a WebLayer component and a WebDocument component. When the Web component is selected, the corresponding layer object of the virtual ofd file bound by the Web component can be obtained. By setting the events attribute of the Web component, the listening event of the component dom is set, the browser operation such as the mouse operation of dragging and stretching is listened to, the position, style and other information of the control can be obtained, the information is converted into the attribute of the object of the virtual ofd file, and the virtual ofd file is changed, so that the corresponding editing purpose can be achieved.

[0056] The right attribute column comprises three layers of document attributes, page attributes and control attributes; the three layers correspond to the control of the ofd document, the page and the graphic element three levels, and when a new control needs to be added, the new control can be added in the page by selecting a control menu and dragging and dropping into a page.

[0057] The events attribute of the menu component is set, the browser operation is listened to, the new control can be added in the editor content area after the editor selects the menu; the Web component is created, and the new ofd graphic element object is added in the virtual ofd file of the corresponding layer, so that the purpose of adding the graphic element object in the virtual ofd file is achieved.

[0058] Since the layers of the Web editor components are bound to the layers of the virtual ofd file, the listening event set by the events attribute of the Web editor component can be obtained by the browser, the corresponding layer and structure object of the virtual ofd file is obtained, and the virtual ofd file can be edited by the above operation mode.

[0059] In the embodiment, the data structure of the abstract class of the Web editor component is as follows:

[0060] The implementation mode of the custom virtual dom tree is as follows: the tagName represents the label name of the corresponding real dom; the className represents the specific class name of the component; the dom represents the real dom of the component; the childNodes represent the child nodes of the component; the events represent the listening event; the render method is a rendering method, and the real dom of the component itself and the component child nodes is rendered out. When the render method is called, all child nodes of the editor component and the real dom nodes corresponding to the child nodes are created in an iterative manner; the setPropObj represents the attribute setting method; the removePropObj represents the method of removing a certain attribute; the addChild represents adding a child node; and the removeChild represents removing a certain node.

[0061] All editor components inherit the above abstract class.

[0062] Editor components include basic components and advanced components.

[0063] Basic components are components created based on dom tags, which include html tag components and SVG tag components.

[0064] The html tags include

[0065] div / span / ul / li / button / input / image / table / textareaheading / sel, etc.

[0066] The SVG tags include svg / path / line / rect / ellipse / circle / text / linear-gradient / defs, etc. Advanced components of the editor are created on the basis of basic components.

[0067] Advanced components are created based on basic components while taking into account the ofd standard data structure. The present application no longer has any direct operation based on real dom, and all operations are performed on editor components. Editor components can operate on ofd data structures while listening to dom operations. Since the data structure of the ofd standard is not consistent with the dom data structure of the browser, many information in the ofd data structure cannot be completely implemented if the dom data structure of the browser is directly used. The present application uses editor components to solve the above problems. Essentially, an editor component is a JavaScript class or object that can completely bind all ofd standard data structures, and the present application can also bind the virtual ofd file created above and the objects of each layer of the virtual ofd file.

[0068] In this embodiment, the document editing area executes a rendering method to generate a dom tree corresponding to the ofd file, and renders the content of the ofd file on the browser side.

[0069] In this embodiment, in step S3, ofd files are selected, specifically xml files and files containing the contents of pictures, videos, signatures and annotations, and then in step S4, the xml file contents of each level of the ofd file are parsed into a format conforming to the ofd data structure standard and imported into the Web editor corresponding to the ofd virtual file.

[0070] The above merely describes the preferred embodiments of the present application and is not used to limit the present application. Any modification, equivalent replacement, improvement, etc. made within the spirit and principle of the present application shall be included in the protection scope of the present application.

Claims

1. A browser-based ofd file display and editing method, characterized by, The method is implemented according to the following steps: S1: creating a default virtual ofd file on the browser side, and specifically constructing a virtual ofd file realized by javascript according to the file hierarchy organization structure and data structure standard of ofd; S2: creating a Web editor according to the virtual ofd file; S3: selecting an ofd file through the Web editor; S4: parsing the ofd file; S5: resetting the virtual ofd file; S6: resetting the editor to edit the ofd file; In step S2, the Web editor includes a header menu bar, a left control bar, a document editing bar and a right attribute bar high-level component created based on the abstract class of the editor component, wherein the left control bar includes an outline, a page thumbnail, a template thumbnail and an organization structure, and the document editing bar includes a WebDocument component, a WebPage component, a WebLayer component and a WebControl component; wherein each level of the document editing bar corresponds to each level of the ofd file, and when creating the editor object of the corresponding level, the object of the corresponding level of the virtual ofd file is transmitted into the level component of the Web editor as a parameter; At the same time, the attributes of the object of the corresponding level of the virtual ofd file are converted into the attributes of the component of the corresponding level of the editor; so that the Web editor component of each level and the file hierarchy component structure of the ofd file form a one-to-one mapping relationship; The right attribute bar includes document attributes, page attributes and control attributes; the attributes of the corresponding virtual ofd file level are bound to edit the attributes of the ofd file.

2. The browser-based ofd file display and editing method according to claim 1, wherein, In step S4, the document editing area executes a rendering method to generate a dom tree corresponding to the ofd file, and renders the content of the ofd file on the browser side.

3. The browser-based ofd file display and editing method of claim 1, wherein, In step S3, the ofd file is selected, which specifically includes xml files and files containing pictures, videos, signatures and annotations, and then in step S4, the xml file content of each level of the ofd file is parsed into a format conforming to the ofd data structure standard and imported into the Web editor corresponding to the virtual ofd file.

4. The browser-based ofd file display and editing method of claim 1, wherein, The right attribute bar includes three levels of document attributes, page attributes and control attributes; corresponding to the control of the ofd document, page and graphic element three levels, specifically by setting the attribute bar component events, listening to the browser operation, and adding the entered content to the corresponding ofd object or attribute according to the ofd standard.

5. The browser-based ofd file display and editing method of claim 1, wherein, Adding a new control in the content area of the Web editor; creating a Web component at the same time, and adding a new ofd graphic element object in the virtual ofd file of the corresponding level, so as to achieve the purpose of adding a graphic element object in the virtual ofd file.

Images