Angular-based file online identification and online editing method

Abstract

The invention provides an angle-based file online identification and online editing method, and relates to the technical field of file content identification. The method comprises the following steps: selecting an import file template, wherein a corresponding field has been set in the template; analyzing and identifying fields in the imported file template and classifying the fields; the field is edited, the value of the field is selected to be set as a specific value type, and the specific value type comprises a static text value, a dynamic loop value and a picture; the exported file is in a specific format, and the specific format comprises docx, pdf and excel; in the whole process, the method further comprises a file overall previewing step and a picture previewing step. According to the method, after the file is imported, the fields in the template file are automatically identified and are displayed on the page by taking each field as a unit in a classified manner, so that the editing of each field is more independent, the file can be previewed in real time, the editing value is displayed on the page in a selected form, and the efficient processing of the file is realized.

Description

Technical Field

[0001] The present invention relates to the technical field of file content recognition, and in particular to an angular-based file online recognition and online editing method. Background Art

[0002] The development of the Internet of Things platform has made the information in the Internet of Things platform system increasingly complex. As we all know, the industries involved in the Internet of Things platform are spread across all aspects of society, and the information in the platform is also complex. Because we ultimately want to display this information in a unified file format, the information analysis and content editing capabilities in the Internet of Things platform have become crucial.

[0003] At present, the file editing method of the IoT platform is relatively simple, and it is impossible to visually edit each field of the file template separately, which makes the file editing process cumbersome and complicated. The file processing method of the traditional IoT platform is often limited by the editing and processing capabilities and visualization capabilities.

[0004] Therefore, an efficient method is needed to realize the processing and analysis of information in the IoT platform and finally display it in a file format. Summary of the invention

[0005] The purpose of the present invention is to provide an angular-based online file recognition and online editing method to address the inefficiency of the software platform in file processing in view of the above-mentioned deficiencies in the prior art.

[0006] To achieve the above purpose, the technical solution adopted by the present invention is as follows:

[0007] The present invention provides an angular-based online file recognition and online editing method, the method comprising:

[0008] Step S1, select the import file template, the corresponding fields have been set in the template;

[0009] Step S2, analyzing and identifying the fields in the imported file template and classifying the fields;

[0010] Step S3, edit the field, and select to set the value of the field to a specific value type, which includes static text value, dynamic loop value, and picture;

[0011] Step S4, exporting the file to a specific format, the specific format includes docx, pdf and excel;

[0012] In the whole process from step S1 to step S4, the method further includes a file overall preview step and a picture preview step;

[0013] The overall file preview steps include: based on the docx-preview package, when the file template is first imported, the imported template content is displayed on the page, and each time a field is edited and saved, the previewed file content changes accordingly, where the content of the change depends on whether the user edits a static text value, a chart or a picture;

[0014] The picture preview step includes: based on docxtemplater-image-module-free, all the pictures in the edited file are listed and displayed on the page in sequence.

[0015] Optionally, in step S1, the text field is wrapped with {{}}, for fields involving loops, a # tag is placed before the looped field, and a / tag is placed at the end of the loop and wrapped with {{}}; for uploaded files, a tag of the passed-in file is placed.

[0016] Optionally, in step S2, the text field is first identified, and then the imported loop field is analyzed. After the fields of the file are classified, all the fields are put into an array, and each item in the array is independently displayed on the page in the form of a cell, where the loop field only displays the fields that need to be looped in the header, and does not display the internal loop items.

[0017] Optionally, in step S3, the edit field is based on docxtemplater and pizzip packages. When a static text value is selected, an input box for entering the static text value is provided. When a dynamic loop value is selected, a button for displaying as a chart is provided. If it needs to be displayed as a chart, a drop-down box is provided. The drop-down options include pie charts, line charts, and bar charts. After selecting the chart type, the entered data is displayed on the page with the corresponding icon type.

[0018] Optionally, in step S4,

[0019] The steps of exporting files to docx format include: obtaining the target.result field of the edited file information, and after specific processing, using The href attribute of the tag is set to: 'data:application / vnd.openxmlformats-officedocument.wordprocessingml.document;base64,' + the target.result field of the file information. When the file is edited, click the a tag to complete the export in docx format.

[0020] The steps of exporting a file to PDF format include: based on the html2pdf.js library, when the file editing is completed, using the native DOM API: document.getElementById to obtain the file DOM information in the page, and completing the export of the PDF format file through the html2pdf().from(val).save() method in html2pdf.js, where val is the file DOM information;

[0021] The steps to export files to Excel format include: first, convert the edited file information into HTML format through the mammoth.convertToHtml method of the mammoth library, then convert the obtained HTML information into the table format required by Excel through the native API of DOM, and finally export the converted table into an Excel format file through the saveAs() method of the file-saver library.

[0022] The beneficial effects of the present invention include:

[0023] The Angular-based online file identification and online editing method provided by the present invention comprises: step S1, selecting an imported file template, in which corresponding fields have been set; step S2, analyzing and identifying the fields in the imported file template and classifying the fields; step S3, editing the fields, selecting to set the values ​​of the fields to specific value types, which include static text values, dynamic loop values ​​and pictures; step S4, exporting the files to specific formats, which include docx, pdf and excel; in the whole process from step S1 to step S4, the method further comprises a file overall preview step and a picture preview step; the file overall preview step comprises: based on the docx-preview package, when the file template is first imported, the imported template content is displayed on the page, and each time a field is edited and saved, the previewed file content changes accordingly, wherein the changed content depends on whether the user edits a static text value, a chart or a picture; the picture preview step comprises: based on docxtemplater-image-module-free, all pictures in the edited file are listed and displayed on the page in sequence. After importing the file, the method automatically identifies the fields in the template file, and displays each field as a unit on the page in different categories, so that the editing of each field is more independent, the file can be previewed in real time, and the edited value can be displayed on the page in the form of selection. The present invention realizes efficient processing of files and realizes diversified export forms. BRIEF DESCRIPTION OF THE DRAWINGS

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

[0025] Figure 1 The present invention shows a flowchart of an angular-based online file identification and editing method provided in an embodiment of the present invention. DETAILED DESCRIPTION

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

[0027] At present, the file editing method of the IoT platform is relatively simple. Due to the differences in the format and content of the imported files, the traditional processing method cannot visualize the fields of the imported files, and cannot visually edit each field of the file template separately, which makes the file editing process cumbersome and complicated, increasing the risk of editing errors. How to visually edit each field of the imported file is particularly important. In order to solve this problem, a set of online identification and editing file solutions is needed to achieve the purpose of obtaining each field of the imported file, visually editing each field separately, and being able to export it to the desired file format after editing is completed.

[0028] The present invention provides an angular-based online file recognition and online generation method, which can integrate the information in the software platform and finally display the information in the form of files.

[0029] Figure 1 The flowchart of the angular-based online file recognition and online editing method provided by the embodiment of the present invention is shown. Figure 1 As shown, the angular-based online file recognition and online editing method provided by the present invention includes:

[0030] Step S1, select the import file template. The corresponding fields have been set in the template.

[0031] In step S1, the text field is wrapped with {{}}, for example, the name field can be written as {{name}}. For fields involving loops, put a # tag before the looped field, put a / tag at the end of the loop, and wrap it with {{}}. For example, if you need to loop the list field, you can write {{#list}}{{ / }}, and write a normal text value between list and / as a specific value in the loop. For uploaded files, put the label of the uploaded file.

[0032] Step S2: Analyze and identify the fields in the imported file template and classify the fields.

[0033] In step S2, the text field is first identified, and then the imported loop field is analyzed. After the fields of the file are classified, all the fields are put into an array. Each item in the array is independently displayed on the page in the form of a cell. The loop field only displays the fields that need to be looped in the header, and does not display the internal loop items.

[0034] Specifically, analyze the fields in the imported file and first identify the text fields. The method logic is as follows:

[0035] extractBracedTexts(text){

[0036] / / Use regular expressions to match all texts in the form of {xxx}

[0037] const regex= / \{(.*?)\} / g;

[0038] let match;

[0039] / / Declare an array to hold the found matches

[0040] const matches = [];

[0041] / / Each time through the loop a match is found and added to the matches array while((match=regex.exec(text))!==null){

[0042] matches.push(match[1]); / / match[1]

[0043] }

[0044] / / Returns an array containing text matching the form {xxx} as the result of the function

[0045] return matches;

[0046] }

[0047] Analyze the imported loop fields, the method logic is as follows:

[0048] keepFirstHashAndRemoveBeforeSlash(arr){

[0049] / / Declare the hashIndex field to record the index of the string starting with '#'

[0050] let hashIndex = -1;

[0051] / / Declare the slashIndex field to record the index of the last ' / '

[0052] let slashIndex = -1;

[0053] / / Use the for loop in js to find the index of the first string that starts with '#' in the passed array

[0054] for(let i=0;i <arr.length;i++){

[0055] if(arr[i].startsWith('#')){

[0056] hashIndex = i;

[0057] break;

[0058] }

[0059] }

[0060] / / If a string starting with '#' is found, find the position of the last ' / ' if (hashIndex! == -1) {

[0061] for(let i=hashIndex;i <arr.length;i++){

[0062] if(arr[i] === ' / '){

[0063] slashIndex = i;

[0064] }

[0065] }

[0066] }

[0067] / / If a valid range is found, delete the elements in the range, retaining the first string starting with '#' and the elements after ' / '

[0068] if(hashIndex!==-1&&slashIndex!==-1){

[0069] arr.splice(hashIndex+1,slashIndex-hashIndex);

[0070] }

[0071] / / Return an array of fields that match the field beginning with '#' as the result of the function

[0072] return arr;

[0073] }

[0074] Step S3: Edit the field and choose to set the value of the field to a specific value type.

[0075] Specific value types include static text values, dynamic looping values, and images.

[0076] In step S3, the edit field is based on the docxtemplater and pizzip packages. When selecting a static text value, an input box for entering the static text value is provided. When selecting a dynamic loop value, a button for displaying it as a chart is provided. If it needs to be displayed as a chart, a drop-down box is provided. The drop-down options include pie charts, line charts, and bar charts. After selecting the chart type, the entered data is displayed on the page with the corresponding icon type. The data can be filled in by yourself. If different software platforms collect data in different ways, you can design the data entry method by yourself. After all fields are edited, you can save the edited content by clicking the confirmation button.

[0077] Step S4: export the file to a specific format, which includes docx, pdf and excel.

[0078] In step S4, the step of exporting the file into the docx format includes: obtaining the target.result field of the edited file information, and after specific processing, using The href attribute of the tag is set to: 'data:application / vnd.openxmlformats-officedocument

[0079] .wordprocessingml.document; base64, '+ target.result field of file information. When the file is edited, click the a tag to complete the export in docx format. The steps of exporting the file to pdf format include: based on the html2pdf.js library, when the file is edited, use the native dom api: document.getElementById to obtain the file dom information in the page, and use the html2pdf().from(val).save() method in html2pdf.js to complete the export of the pdf format file, where val is the dom information of the file. The steps of exporting the file to excel format include: first, convert the edited file information into html format through the mammoth.convertToHtml method of the mammoth library, and then convert the obtained html information into the table format required by excel through the native dom api, and finally export the converted table into an excel format file through the saveAs() method of the file-saver library.

[0080] In the whole process from step S1 to step S4, the method also includes a file overall preview step and a picture preview step. The file overall preview step includes: based on the docx-preview package, when the file template is first imported, the imported template content is displayed on the page, and each time a field is edited and saved, the previewed file content changes accordingly, wherein the content of the change depends on whether the user edits a static text value, a chart or a picture; the picture preview step includes: based on docxtemplater-image-module-free, all the pictures in the edited file are listed and displayed on the page in order.

[0081] After importing the file, this method automatically identifies the fields in the template file, and displays each field as a unit on the page in different categories, so that the editing of each field is more independent, the file can be previewed in real time, and the edited value is displayed on the page in a selected form. The present invention realizes efficient processing of files and realizes diversified export forms. This method is not limited to use in the Internet of Things platform, and can be used in any software platform that involves file editing and generation.

[0082] In summary, the present invention has the following advantages: (1) Real-time: Angular's API is used to realize online editing and save the edited content online; (2) Visualization: First, the file preview capability of docx-preview is used to realize the visualization of the imported file. Secondly, regular expressions are used to match the prefixes of the corresponding file fields, and the fields of the file are classified and displayed uniformly in the editing interface, and edited separately, thereby realizing the visualization of the edited fields. Finally, after the editing is completed, the file content on the page is updated in real time, realizing the visualization of the editing results. Improve and enhance the efficiency and practicality of online file editing; (3) Systematic: This method first needs to make the desired file format into a template. After importing the template, the system automatically identifies the fields of the corresponding category. After the editing is completed, you can choose docx, pdf, or excel format for export, forming a complete closed loop.

[0083] The above embodiments are only for illustrating the technical concept and features of the present invention, and their purpose is to enable ordinary technicians in the field to understand the content of the present invention and implement it. They cannot be used to limit the protection scope of the present invention. Any equivalent changes or modifications made according to the spirit of the present invention should be included in the protection scope of the present invention.

Claims

1. A method for online file recognition and online editing based on angular, characterized in that: The method comprises: Step S1, select an import file template, in which corresponding fields have been set; Step S2, analyzing and identifying the fields in the imported file template and classifying the fields; Step S3, edit the field, and select to set the value of the field to a specific value type, wherein the specific value type includes a static text value, a dynamic loop value, and a picture; Step S4, exporting the file into a specific format, wherein the specific format includes docx, pdf and excel; In the whole process from step S1 to step S4, the method further includes a file overall preview step and a picture preview step. The overall file preview step includes: based on the docx-preview package, when the file template is initially imported, the imported template content is displayed on the page, and each time a field is edited and saved, the previewed file content changes accordingly, wherein the changed content depends on whether the user edits a static text value, a chart or a picture; The picture preview step includes: based on docxtemplater-image-module-free, all the pictures in the edited file are listed and displayed on the page in sequence.

2. According to the angular-based online file recognition and online editing method of claim 1, it is characterized in that: In step S1, the text field is wrapped with {{}}, for fields involving loops, a # tag is added before the looped field, and a / tag is added at the end of the loop and wrapped with {{}}; for uploaded files, the tag of the transferred file is added.

3. The angular-based online file recognition and online editing method according to claim 1 is characterized in that: In step S2, the text field is first identified, and then the imported loop field is analyzed. After the fields of the file are classified, all the fields are put into an array, and each item in the array is independently displayed on the page in the form of a cell, where the loop field only displays the fields that need to be looped in the header, and does not display the internal loop items.

4. The angular-based online file recognition and online editing method according to claim 1 is characterized in that: In step S3, the editing field is based on the docxtemplater and pizzip packages. When a static text value is selected, an input box for entering the static text value is provided. When a dynamic loop value is selected, a button for displaying as a chart is provided. If it needs to be displayed as a chart, a drop-down box is provided. The drop-down options include pie charts, line charts, and bar charts. After selecting the chart type, the entered data is displayed on the page with the corresponding icon type.

5. The angular-based online file recognition and online editing method according to claim 1 is characterized in that: In step S4, The steps of exporting files to docx format include: obtaining the target.result field of the edited file information, and after specific processing, using The href attribute of the tag is set to: 'data:application / vnd.openxmlformats-officedocument.wordprocessingml.document;base64,' + the target.result field of the file information. When the file is edited, click the a tag to complete the export in docx format. The steps of exporting a file to PDF format include: based on the html2pdf.js library, when the file editing is completed, using the native DOM API: document.getElementById to obtain the file DOM information in the page, and completing the export of the PDF format file through the html2pdf().from(val).save() method in html2pdf.js, where val is the file DOM information; The steps to export files to Excel format include: first, convert the edited file information into HTML format through the mammoth.convertToHtml method of the mammoth library, then convert the obtained HTML information into the table format required by Excel through the native API of DOM, and finally export the converted table into an Excel format file through the saveAs() method of the file-saver library.

Images