Method, system, equipment and medium for realizing online viewing of original style of Excel file

Abstract

The invention provides a method, a system, equipment and a medium for realizing online viewing of an original style of an Excel file, and belongs to the technical field of online file processing, the method comprises the following steps: a front-end Web page receives the Excel file uploaded by a user, stores the Excel file in a rear-end server and records stored file information; the Excel file is read, an xlsx.js library and an excel.js library are used for analysis, and analysis results are integrated; missing cell filling and style information conversion are carried out on the analyzed Excel file, cells with merging attributes in the Excel file are marked, and a format capable of being recognized by a data grid editor is obtained; and rendering a table consistent with the style of the original Excel file on a front-end Web page based on a format which can be identified by the data grid editor. The problem that a traditional online Excel viewing tool cannot completely reserve original file style information is solved, and the user experience is improved.

Description

Technical Field

[0001] The present invention belongs to the technical field of online file processing, and in particular relates to a method, system, device and medium for realizing online viewing of original Excel files. Background Art

[0002] With the development of Internet technology, online file processing has become an indispensable requirement in modern office and study. Online file processing requires Internet platforms to provide file storage, sharing and collaboration, so that users can access and edit their files at any time and any place. However, current online file processing, especially online file viewing, still has many problems.

[0003] Taking Excel file processing as an example, traditional online Excel viewing tools often fail to fully retain the style information of the original file, resulting in users not being able to obtain the same visual experience when viewing online as when viewing locally. On the other hand, when processing large amounts of xlsx files, the lack of an effective paging processing mechanism often results in slow page response and reduced user experience. More specifically, although there are Excel parsing tools such as js-xlsx and excel.js on the market, when used directly for online preview, data containing complex styles or complex expressions often have parsing errors or display inaccuracy issues. For example, some online Excel viewing tools may not be able to correctly identify and render advanced features such as merged cells, conditional formatting, or data validation rules in Excel. In addition, traditional online Excel viewing tools also have deficiencies in interactivity. Users can usually only perform simple viewing operations, but cannot edit, annotate, or collaborate with other users, further reducing the user experience of viewing Excel files online. Summary of the invention

[0004] In a first aspect, an embodiment of the present application provides a method for realizing online viewing of an original Excel file, comprising the following steps: S1. The front-end web page receives the Excel file uploaded by the user, saves it to the back-end server and records the stored file information; S2. Read the Excel file according to the stored file information, then use the xlsx.js library to parse the data and the excel.js library to parse the style information, and integrate the two parsing results; S3. Fill the missing cells with the data of the parsed Excel file, convert the style information, mark the cells with merged attributes in the Excel file, and obtain a format that can be recognized by the data grid editor Handsontable; S4. Based on the format recognizable by the data grid editor Handsontable, a table consistent with the original Excel file style is rendered on the front-end web page.

[0005] Furthermore, the specific steps of step S1 are as follows: S11. Pre-configure the file upload component for the front-end Web page as the client, bind the file upload component to a file loading HTML form control, and configure the bound file loading HTML form control to support Excel file format; S12. The front-end web page obtains the Excel file uploaded by the user through the file upload component and sends it to the business service end of the back-end server through an AJAX request; S13. The business service end of the back-end server calls the first API interface to the file service end, and stores the Excel file uploaded by the user to the specified directory, and returns the file information of the Excel file to the front-end web page; the file information includes the relative path address of the file, the temporary absolute path address and the file name.

[0006] Furthermore, the specific steps of step S2 are as follows: S21. The front-end Web page reads the file information of the Excel file returned by the back-end server and calls the second API interface of the back-end server; S22. The back-end server uses the xlsx.js library to parse the Excel file to obtain the first workbook object, and uses the excel.js library to read the Excel file to obtain the second workbook object, and uses the current value of the first workbook object to overwrite the current value of the second workbook object, while retaining the original style of each cell of the second workbook object.

[0007] Furthermore, the specific steps of step S22 are as follows: S221. The backend server uses the readFile function of the xlsx.js library to parse the Excel file and obtains a workbook object as the first workbook object; S222. The backend server uses the workbook object loading method of the excel.js library to parse the Excel file and obtain the workbook object as the second workbook object; S223. Acquire the current worksheet of the first workbook object as the first current worksheet, and acquire the current worksheet of the second workbook object as the second current worksheet; S224. Convert the index based on column letters and row numbers of the first current worksheet into a format corresponding to the numerical index based on rows and columns of the second current worksheet; S225. Locate the second row in the current worksheet; S226. For the row in the located second current worksheet, in combination with the format of the index converted from the first current worksheet, the value of each column of the row located in the second current worksheet is overwritten with the value of the cell corresponding to the first current worksheet, while retaining the style of each cell in the second current worksheet; S227. Determine whether the row in the second current worksheet is positioned; If yes, go to step S228; If not, locate the next row in the second current worksheet and return to step S226; S228. Use the second current worksheet as the parsed Excel file.

[0008] Furthermore, the specific steps of step S3 are as follows: S31. Fill the cells with missing data in the parsed Excel file with empty strings; S32. Convert the style information in the parsed Excel file into a CSS style string; S33. Mark the cells with merge attributes in the parsed Excel file, and save the merge attributes of the marked cells; S34. Generate a converted two-dimensional array using the converted data and style information of the Excel file.

[0009] Furthermore, the specific steps of step S31 are as follows: S311. The backend server obtains the parsed Excel file and uses a mapping function to fill the data of each cell with a two-dimensional array; S312. The backend server locates each row of the parsed Excel file; S313. Identify whether the data length of the located row is less than the number of cells applied; If yes, go to step S314; If not, proceed to step S316; S314. Calculate the missing cell data in the located row, create a fill array, and fill the missing cells with empty strings; S315. Use the data in the located row to merge with the fill array as new row data; S316. Determine whether the row of the parsed Excel file has been located; If yes, go to step S4; If not, locate the next row and return to step S313; The specific steps of step S32 are as follows: S321. Use the textRenderer function to render the text content of the cell in the parsed Excel file; S322. Check whether the cell attributes contain a fill style; If yes, go to step S323; If not, proceed to step S324; S323. Use the foreground color in the fill style as the background color of the cell; S324. Convert the cell attributes and font style of each cell in the Excel file into corresponding CSS styles; The specific steps of step S33 are as follows: S331. Get the parsed Excel file, and traverse the merged objects in the workbook to get all the merged cells; S332. Sort the keys of the merged cells, and traverse in order to extract the information of the merged cells, where the information of the merged cells includes the starting row number, the starting column number, the ending row number, and the ending column number; S333. Calculate the number of merged rows and columns based on the information of the merged cell, construct a merge information object, and then add the merge information object to the array where the information of the original merged cell is located.

[0010] Furthermore, the specific steps of step S4 are as follows: S41. Initialize the Handsontable instance and set the data source of the Handsontable instance to the converted two-dimensional array; S42. Use the row and column size information in the parsed Excel worksheet to set the row height and column width in the Handsontable instance, completing the conversion between the size unit and the pixel value; S43. Parse the style information in the converted two-dimensional array, and apply the CSS style to each cell in combination with the cell attributes of the Handsontable instance; S44. Set up a virtual list, worksheet switching component, zoom component, scroll and query component on the front-end client, render the data in the visible area through the virtual list, perform worksheet switching rendering through the worksheet switching component, perform zooming and scrolling rendering directly from the DOM, obtain the query content through the query component, and highlight the query results.

[0011] In a second aspect, the embodiment of the present application further provides a system for realizing online viewing of the original format of an Excel file, including: The file upload module is used to receive the Excel file uploaded by the user on the front-end web page, save it to the back-end server and record the stored file information; The file parsing module is used to read the Excel file according to the stored file information, and then use the xlsx.js library to parse the data and the excel.js library to parse the style information, and integrate the two parsing results; The data conversion module is used to fill the missing cells of the data in the parsed Excel file, convert the style information, mark the cells with merged attributes in the Excel file, and obtain the format recognizable by the data grid editor Handsontable; The online rendering module is used to render a table consistent with the original Excel file style on the front-end web page based on the format recognizable by the data grid editor Handsontable.

[0012] In a third aspect, an embodiment of the present application 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, the steps of the method for realizing online viewing of the original style of an Excel file as described in the first aspect are implemented. In a fourth aspect, an embodiment of the present application further provides a storage medium having a computer program stored thereon, wherein when the computer program is executed by a processor, the steps of the method for realizing online viewing of the original format of an Excel file as described in the first aspect are implemented.

[0013] It can be seen from the above technical solutions that the present invention has the following advantages: In the system, device and medium provided by the present application, by using the combination of the two libraries xlsx.js and excel.js, the data and style information in the Excel file can be accurately parsed, so that the front-end Web page is rendered in a style that is almost consistent with the original file, which solves the shortcomings of traditional online viewing tools in style display and improves the user's visual experience; the Excel file with large data volume is optimized through an effective paging processing mechanism and data filling strategy, avoiding the problem of slow page response, so that users can smoothly view and browse large Excel files online without worrying about performance bottlenecks; by introducing the front-end technologies of virtual lists, worksheet switching components, zoom components, scrolling and query components, while improving the page rendering efficiency, the friendliness and ease of use of the user interface are also enhanced, so that users can more conveniently find, browse and edit Excel files, thereby improving work efficiency; the present invention ultimately enables users to view and edit Excel files online, which is widely applicable to scenarios such as document sharing and collaborative office within enterprises, breaking the limitations of time and space, so that users can process files at any time and any place, thereby improving office efficiency and flexibility. BRIEF DESCRIPTION OF THE DRAWINGS

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

[0015] Figure 1 The present invention is a flow chart of an embodiment of a method for realizing online viewing of an Excel file in its original format.

[0016] Figure 2 The present invention is a flow chart of another embodiment of the method for realizing online viewing of original Excel files.

[0017] Figure 3 The present invention is a schematic diagram of a system for realizing online viewing of original Excel files.

[0018] Figure 4 A schematic diagram of an electronic device storing a method for realizing online viewing of an original Excel file in the present invention. DETAILED DESCRIPTION

[0019] In the specific steps of the method for realizing the original style online viewing of Excel files, various embodiments of the present disclosure will be described in detail below. The present disclosure may have various embodiments, and adjustments and changes may be made therein. However, it should be understood that there is no intention to limit the various embodiments of the present disclosure to the specific embodiments disclosed herein, but the present disclosure should be understood to cover all adjustments, equivalents and / or alternatives that fall within the spirit and scope of the various embodiments of the present disclosure.

[0020] For example, with the development of Internet technology, online file processing has become a key requirement in modern office and learning. However, current online file processing, especially online viewing of Excel files, still faces many challenges. Traditional online Excel viewing tools are insufficient in retaining the original file style, processing large data files, and providing interactivity. Specifically, these tools often cannot fully display the complex styles and advanced features in Excel files, such as merged cells, conditional formatting, etc. At the same time, when processing large data files, due to the lack of paging processing mechanism, the page response speed slows down and the user experience decreases. In addition, these tools lack editing, annotation and collaboration functions, which limits the user's online operation experience.

[0021] In view of the above problems, this embodiment provides a method for realizing online viewing of Excel files in original style. The method receives Excel files uploaded by users through a front-end web page, parses and preserves the style on a back-end server, and finally renders a table in original style on the front-end web page. This method solves the problem that traditional online Excel viewing tools cannot completely preserve the original file style information, and improves the visual experience of users when viewing Excel files online.

[0022] 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.

[0023] See also Figure 1 The figure is a flow chart of a method for realizing online viewing of the original form of an Excel file in a specific embodiment, the method comprising: S1. The front-end web page receives the Excel file uploaded by the user, saves it to the back-end server and records the stored file information; It should be noted that the front-end web page is responsible for interacting with users, uploading Excel files and rendering files when they are viewed online, while the back-end server is responsible for Excel file parsing and data conversion.

[0024] S2. Read the Excel file according to the stored file information, then use the xlsx.js library to parse the data and the excel.js library to parse the style information, and integrate the two parsing results; It should be noted that in order to avoid the problem of excel.js library displaying errors for complex expressions and xlsx.js library displaying errors for complex styles, the data values ​​parsed by xlsx.js library are integrated with the style information parsed by excel.js library to keep the data and style of the original file as much as possible. S3. Fill the missing cells with the data of the parsed Excel file, convert the style information, mark the cells with merged attributes in the Excel file, and obtain a format that can be recognized by the data grid editor Handsontable; It should be noted that Handsontable is a data grid editor based on JavaScript. It provides rich functions and tools, allowing developers to quickly create interactive tables on web pages, and edit, sort, filter and other operations on data. The implementation of the data grid editor Handsontable makes subsequent editing, annotation and collaboration with other users possible. S4. Render a table consistent with the original Excel file style on the front-end web page based on the format recognizable by the data grid editor Handsontable; It should be noted that by combining the data and style of the parsed and converted Excel file, a table consistent with the original Excel file is rendered on the front-end web page.

[0025] Further, as a refinement and extension of the specific implementation of the above embodiment, in order to fully illustrate the specific implementation process of this embodiment, another method for realizing online viewing of the original style of an Excel file is provided, such as Figure 2 As shown, the method comprises the steps of: S1. The front-end web page receives the Excel file uploaded by the user, saves it to the back-end server and records the stored file information; the specific steps of step S1 are as follows: S11. Pre-configure the file upload component for the front-end Web page as the client, bind the file upload component to a file loading HTML form control, and configure the bound file loading HTML form control to support Excel file format; S12. The front-end web page obtains the Excel file uploaded by the user through the file upload component and sends it to the business service end of the back-end server through an AJAX request; S13. The business service end of the back-end server calls the first API interface to the file service end, and stores the Excel file uploaded by the user in the specified directory, and returns the file information of the Excel file to the front-end Web page; the file information includes the relative path address of the file, the temporary absolute path address and the file name; It should be noted that by configuring the file upload component, binding the file to load the HTML form control, obtaining the Excel file uploaded by the user and sending it to the back-end server through AJAX request, etc., it is ensured that the Excel file uploaded by the user can be correctly received and stored on the back-end server, which provides a basis for subsequent file parsing and online viewing; S2. Read the Excel file according to the stored file information, then use the xlsx.js library to parse the data and the excel.js library to parse the style information, and integrate the two parsing results; the specific steps of step S2 are as follows: S21. The front-end Web page reads the file information of the Excel file returned by the back-end server and calls the second API interface of the back-end server; S22. The backend server uses the xlsx.js library to parse the Excel file to obtain the first workbook object, and uses the excel.js library to read the Excel file to obtain the second workbook object, and uses the current value of the first workbook object to overwrite the current value of the second workbook object, while retaining the original style of each cell of the second workbook object; It should be noted that by calling the second API interface of the backend server, using the xlsx.js library and the excel.js library to parse the data and style information of the Excel file respectively, and integrating the two parsing results, it is ensured that the data and style information of the Excel file can be accurately parsed and retained, providing a reliable data source for subsequent data conversion and online rendering; S3. Fill the missing cells with the data of the parsed Excel file, convert the style information, mark the cells with merged attributes in the Excel file, and obtain a format that can be recognized by the data grid editor Handsontable; the specific steps of step S3 are as follows: S31. Fill the cells with missing data in the parsed Excel file with empty strings; S32. Convert the style information in the parsed Excel file into a CSS style string; It should be noted that style information includes font, color, and alignment; S33. Mark the cells with merge attributes in the parsed Excel file, and save the merge attributes of the marked cells; S34. Generate a converted two-dimensional array from the data and style information of the Excel file; It should be noted that the steps of filling cells with missing data, converting style information into CSS style strings, marking cells with merged attributes and saving the merged attributes, and generating the converted two-dimensional array ensure that the data and style information of the Excel file can be correctly converted, providing a recognizable data format for subsequent online rendering; S4. Render a table consistent with the original Excel file style on the front-end web page based on the format recognizable by the data grid editor Handsontable; the specific steps of step S4 are as follows: S41. Initialize the Handsontable instance and set the data source of the Handsontable instance to the converted two-dimensional array; S42. Use the row and column size information in the parsed Excel worksheet to set the row height and column width in the Handsontable instance, completing the conversion between the size unit and the pixel value; S43. Parse the style information in the converted two-dimensional array, and apply the CSS style to each cell in combination with the cell attributes of the Handsontable instance; S44. Set a virtual list, a worksheet switching component, a zoom component, a scroll component, and a query component on the front-end client, render the data in the visible area through the virtual list, perform worksheet switching rendering through the worksheet switching component, perform zooming and scrolling rendering directly from the DOM, obtain the query content through the query component, and highlight the query results; It should be noted that the steps of initializing the Handsontable instance, setting the row height and column width, parsing the style information and applying it to each cell, setting up virtual lists and other components to optimize the rendering effect ensure that the Excel file can be correctly rendered on the front-end web page in the original style and provide a good user experience.

[0026] In an embodiment of the present invention, based on step S22, a possible embodiment is given below to illustrate its specific implementation scheme in a non-limiting manner.

[0027] The specific steps of step S22 are as follows: S221. The backend server uses the readFile function of the xlsx.js library to parse the Excel file and obtains a workbook object as the first workbook object; S222. The backend server uses the workbook object loading method of the excel.js library to parse the Excel file and obtain the workbook object as the second workbook object; S223. Acquire the current worksheet of the first workbook object as the first current worksheet, and acquire the current worksheet of the second workbook object as the second current worksheet; S224. Convert the index based on column letters and row numbers of the first current worksheet into a format corresponding to the numerical index based on rows and columns of the second current worksheet; S225. Locate the second row in the current worksheet; S226. For the row in the located second current worksheet, in combination with the format of the index converted from the first current worksheet, the value of each column of the row located in the second current worksheet is overwritten with the value of the cell corresponding to the first current worksheet, while retaining the style of each cell in the second current worksheet; S227. Determine whether the row in the second current worksheet is positioned; If yes, go to step S228; If not, locate the next row in the second current worksheet and return to step S226; S228. Use the second current worksheet as the parsed Excel file, It should be noted that the steps of using the xlsx.js library and the excel.js library to respectively obtain the workbook object, convert the current worksheet of the first workbook object to the format corresponding to the second workbook object, overwrite the value of the second workbook object and retain the style ensure that the data and style information of the Excel file can be accurately integrated, providing an accurate data basis for subsequent data conversion.

[0028] In an embodiment of the present invention, based on steps S31, S32, and S33, a possible embodiment is given below to illustrate its specific implementation scheme in a non-limiting manner.

[0029] The specific steps of step S31 are as follows: S311. The backend server obtains the parsed Excel file and uses a mapping function to fill the data of each cell with a two-dimensional array; S312. The backend server locates each row of the parsed Excel file; S313. Identify whether the data length of the located row is less than the number of cells applied; If yes, go to step S314; If not, proceed to step S316; S314. Calculate the missing cell data in the located row, create a fill array, and fill the missing cells with empty strings; S315. Use the data in the located row to merge with the fill array as new row data; S316. Determine whether the row of the parsed Excel file has been located; If yes, go to step S4; If not, locate the next row and return to step S313; The specific steps of step S32 are as follows: S321. Use the textRenderer function to render the text content of the cell in the parsed Excel file; S322. Check whether the cell attributes contain a fill style; If yes, go to step S323; If not, proceed to step S324; S323. Use the foreground color in the fill style as the background color of the cell; S324. Convert the cell attributes and font style of each cell in the Excel file into corresponding CSS styles; The specific steps of step S33 are as follows: S331. Get the parsed Excel file, and traverse the merged objects in the workbook to get all the merged cells; S332. Sort the keys of the merged cells, and traverse in order to extract the information of the merged cells, where the information of the merged cells includes the starting row number, the starting column number, the ending row number, and the ending column number; S333. Calculate the number of merged rows and columns based on the information of the merged cell, construct a merge information object, and then add the merge information object to the array where the information of the original merged cell is located; It should be noted that the steps of using mapping functions to fill missing cells, checking and converting cell styles, and traversing and extracting merged cell information ensure that the data and style information of the Excel file can be accurately processed and converted, providing accurate data and style information for subsequent online rendering.

[0030] In an embodiment of the present invention, based on step S43, a possible embodiment is given below to illustrate its specific implementation scheme in a non-limiting manner.

[0031] The specific steps of step S43 are as follows: S431. Obtaining style information of cells in the Excel file from the converted two-dimensional array; S432. Determine whether the style information of the cell is empty; If yes, go to step S433; If not, proceed to step S44; S433. Copy the style information of the cell into the cell attribute object, and specify a custom format renderer corresponding to the CSS style for the cell attribute object.

[0032] For example, an education platform needs to provide a function on the Web platform to allow teachers to upload timetable files in Excel format so that students can view these timetables directly on the web page. The style of the timetable, such as font, color, border, etc., needs to be consistent with the original Excel file. Due to the large number of students, the timetable file may contain a large amount of data, so paging loading is required to improve page performance. In the specific implementation, it is achieved through the following steps: 1. File upload Provide an "Upload Schedule" button on the web page, which is bound to an HTML form control<inputtype="file" id="file-uploader"> ;After the user clicks the button, he can select an Excel file (supports .xlsx format) to upload; When the user selects a file and clicks upload, the front end sends the file to the back end server through an AJAX request. After receiving the file, the back end server stores it in the specified directory and returns the file's relative path address, temporary absolute path address, and file name to the front end.

[0033] 2. File Analysis After receiving the file information, the front end calls the API interface provided by the back end and sends the file information to the back end for parsing; The backend server uses the xlsx.js library to read the Excel file and obtain the workbook object. At the same time, the excel.js library is used to load the same workbook object to obtain the style information. By traversing the worksheet, the data parsed by xlsx.js is combined with the style information parsed by excel.js to solve the problem of complex expression data display and return a two-dimensional array containing data and style.

[0034] 3. Data Conversion The backend server converts the parsed data and style information into a format recognizable by Handsontable, which includes processing empty rows and columns (by filling them with empty strings or special tags) and converting style information into CSS style strings. At the same time, a custom mergeCells function is implemented to handle the cell merging logic in Excel. After the conversion is completed, the backend server returns the processed data to the frontend.

[0035] 4. Online Rendering After receiving the processed data, the front end initializes the Handsontable instance and sets the data source to the converted two-dimensional array. At the same time, the size of the rows and columns in Handsontable is dynamically set according to the size information of the rows and columns in the Excel worksheet. Use the cells property of Handsontable, combined with a custom parsing style function, to apply CSS styles to each cell; Implement paging loading logic, and render only the data in the current visible area through the virtual list. At the same time, integrate interactive functions such as multi-sheet page switching, zooming, scrolling, and searching; for example, you can switch the display of the course schedule content by clicking different sheet page buttons; adjust the display size of the course schedule through the zoom button; browse the course schedule content through the scroll bar; and quickly find a specific course through the search box.

[0036] Through the real-time implementation of the present invention on the education platform, the class timetable viewed by students on the web page is almost the same as the Excel file style viewed by teachers locally, including font, font size, color, alignment, border style, etc. Moreover, for class timetable files with more data, paging loading is realized, which improves page performance, and provides interactive functions such as multi-sheet page switching, zooming, scrolling, and searching, which improves the user experience.

[0037] It should be understood that the order of execution of the steps in the above embodiment does not necessarily mean the order of execution. The execution order of each process should be determined by its function and internal logic, and should not constitute any limitation on the implementation process of the embodiment of the present invention.

[0038] like Figure 3 As shown, the following is an embodiment of a system for realizing online viewing of Excel files in original style provided by an embodiment of the present disclosure. The system and the methods for realizing online viewing of Excel files in original style in the above-mentioned embodiments belong to the same inventive concept. For details not fully described in the embodiment of the system for realizing online viewing of Excel files in original style, reference can be made to the embodiments of the methods for realizing online viewing of Excel files in original style described above.

[0039] The system includes: The file upload module is used to receive the Excel file uploaded by the user on the front-end web page, save it to the back-end server and record the stored file information; The file parsing module is used to read the Excel file according to the stored file information, and then use the xlsx.js library to parse the data and the excel.js library to parse the style information, and integrate the two parsing results; The data conversion module is used to fill the missing cells of the data in the parsed Excel file, convert the style information, mark the cells with merged attributes in the Excel file, and obtain the format recognizable by the data grid editor Handsontable; The online rendering module is used to render a table consistent with the original Excel file style on the front-end web page based on the format recognizable by the data grid editor Handsontable.

[0040] The present invention receives the Excel file uploaded by the user through the front-end web page, parses and preserves the style on the back-end server, and finally renders the table in the original style on the front-end web page. This method solves the problem that the traditional online Excel viewing tool cannot completely preserve the original file style information, and improves the visual experience of users when viewing Excel files online.

[0041] Figure 4 A schematic diagram of the hardware structure of an electronic device for implementing various embodiments of the present invention.

[0042] The method for realizing online viewing of the original style of Excel files provided in the embodiment of the present application can be applied to electronic devices. It will be appreciated by those skilled in the art that the electronic device structure involved in the embodiment of the present invention does not constitute a limitation on the electronic device, and the electronic device may include more or less components than shown in the figure, or combine certain components, or different component arrangements. In an embodiment of the present invention, the electronic device includes but is not limited to a laptop computer, a desktop computer, a workbench, a personal digital assistant, a server, a blade server, a mainframe computer, and other suitable computers. The electronic device can also represent various forms of mobile devices, such as personal digital processing, cellular phones, smart phones, wearable devices and other similar computing devices. The components shown herein, their connections and relationships, and their functions are merely examples, and are not intended to limit the implementation of the embodiments of the present application described and / or required herein.

[0043] The electronic device may include a processor, an external memory interface, an internal memory, a universal serial bus (USB) interface, a charging management module, a power management module, a battery, a wireless communication module, an audio module, a speaker, a microphone, a sensor module, buttons, a camera, a display, and a SIM card interface, etc.

[0044] It is to be understood that the structure illustrated in the embodiments of the present application does not constitute a specific limitation on the electronic device. In other embodiments of the present application, the electronic device may include more or fewer components than shown in the figure, or combine certain components, or split certain components, or arrange the components differently. The components shown in the figure may be implemented in hardware, software, or a combination of software and hardware.

[0045] The processor may include one or more processing units, for example, the processor may include a central processing unit (CPU), an application processor (AP), a modem processor, a graphics processing unit (GPU), an image signal processor (ISP), a controller, a memory, a video codec, a digital signal processor (DSP), a baseband processor, and / or a neural-network processing unit (NPU), etc. Among them, different processing units may be independent devices or integrated into one or more processors.

[0046] The internal memory can be used to store computer executable program codes, which include instructions. The processor executes various functional applications and data processing of the electronic device by running the instructions stored in the internal memory. The internal memory may include a program storage area and a data storage area. The internal memory may include a high-speed random access memory and may also include a non-volatile memory, such as at least one disk storage device, a flash memory device, a universal flash storage (UFS), etc.

[0047] The above-mentioned electronic device implements the method of realizing online viewing of Excel files in original style of the present application, receives Excel files uploaded by users through the front-end web page, parses and retains the style on the back-end server, and finally renders the table in the original style on the front-end web page, thereby solving the problem that traditional online Excel viewing tools cannot completely retain the original file style information, and improving the user's visual experience when viewing Excel files online.

[0048] The storage medium provided in the present application stores a program product that can implement a method for online viewing of the original format of an Excel file.

[0049] The method for realizing online viewing of the original style of an Excel file includes: a front-end Web page receives an Excel file uploaded by a user, saves it to a back-end server and records the stored file information; the Excel file is read according to the stored file information, and then the xlsx.js library is used to parse the data and the excel.js library is used to parse the style information, and the two parsing results are integrated; the data of the parsed Excel file is used to fill in the missing cells, and the style information is converted, and the cells with merged attributes in the Excel file are marked to obtain a format recognizable by the data grid editor Handsontable; based on the format recognizable by the data grid editor Handsontable, a table consistent with the style of the original Excel file is rendered on the front-end Web page.

[0050] In some possible implementations, the method for realizing online viewing of original Excel files disclosed in the present invention can be implemented in the form of a program product, which includes a program code. When the program product is run on a terminal device, the program code is used to enable the terminal device to execute the steps of various exemplary implementations of the present disclosure described in the above "Exemplary Method" section of this specification.

[0051] The storage medium of the present disclosure can adopt any combination of one or more readable media. The readable medium can be a readable signal medium or a readable storage medium. The readable storage medium can be, for example, but not limited to, a system, device or device of electricity, magnetism, light, electromagnetic, infrared, or semiconductor, or any combination of the above. More specific examples (non-exhaustive list) of readable storage media include: an electrical connection with one or more wires, a portable disk, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the above.

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

Claims

1. A method for realizing online viewing of the original format of an Excel file, characterized in that: The steps include: S1. The front-end web page receives the Excel file uploaded by the user, saves it to the back-end server and records the stored file information; S2. Read the Excel file according to the stored file information, then use the xlsx.js library to parse the data and the excel.js library to parse the style information, and integrate the two parsing results; S3. Fill the missing cells with the data of the parsed Excel file, convert the style information, mark the cells with merged attributes in the Excel file, and obtain a format that can be recognized by the data grid editor Handsontable; S4. Based on the format recognizable by the data grid editor Handsontable, a table consistent with the original Excel file style is rendered on the front-end web page.

2. The method for realizing online viewing of the original Excel file as claimed in claim 1, characterized in that: The specific steps of step S1 are as follows: S11. Pre-configure the file upload component for the front-end Web page as the client, bind the file upload component to a file loading HTML form control, and configure the bound file loading HTML form control to support Excel file format; S12. The front-end web page obtains the Excel file uploaded by the user through the file upload component and sends it to the business service end of the back-end server through an AJAX request; S13. The business service end of the back-end server calls the first API interface to the file service end, and stores the Excel file uploaded by the user to the specified directory, and returns the file information of the Excel file to the front-end web page; the file information includes the relative path address of the file, the temporary absolute path address and the file name.

3. The method for realizing online viewing of original Excel files as claimed in claim 1, characterized in that: The specific steps of step S2 are as follows: S21. The front-end Web page reads the file information of the Excel file returned by the back-end server and calls the second API interface of the back-end server; S22. The back-end server uses the xlsx.js library to parse the Excel file to obtain the first workbook object, and uses the excel.js library to read the Excel file to obtain the second workbook object, and uses the current value of the first workbook object to overwrite the current value of the second workbook object, while retaining the original style of each cell of the second workbook object.

4. The method for realizing online viewing of the original Excel file as claimed in claim 3, characterized in that: The specific steps of step S22 are as follows: S221. The backend server uses the readFile function of the xlsx.js library to parse the Excel file and obtains a workbook object as the first workbook object; S222. The backend server uses the workbook object loading method of the excel.js library to parse the Excel file and obtain the workbook object as the second workbook object; S223. Acquire the current worksheet of the first workbook object as the first current worksheet, and acquire the current worksheet of the second workbook object as the second current worksheet; S224. Convert the index based on column letters and row numbers of the first current worksheet into a format corresponding to the numerical index based on rows and columns of the second current worksheet; S225. Locate the second row in the current worksheet; S226. For the row in the located second current worksheet, in combination with the format of the index converted from the first current worksheet, the value of each column of the row located in the second current worksheet is overwritten with the value of the cell corresponding to the first current worksheet, while retaining the style of each cell in the second current worksheet; S227. Determine whether the row in the second current worksheet is positioned; If yes, go to step S228; If not, locate the next row in the second current worksheet and return to step S226; S228. Use the second current worksheet as the parsed Excel file.

5. The method for realizing online viewing of the original form of an Excel file as claimed in claim 3, characterized in that: The specific steps of step S3 are as follows: S31. Fill the cells with missing data in the parsed Excel file with empty strings; S32. Convert the style information in the parsed Excel file into a CSS style string; S33. Mark the cells with merge attributes in the parsed Excel file, and save the merge attributes of the marked cells; S34. Generate a converted two-dimensional array using the converted data and style information of the Excel file.

6. The method for realizing online viewing of the original Excel file as claimed in claim 5, characterized in that: The specific steps of step S31 are as follows: S311. The backend server obtains the parsed Excel file and uses a mapping function to fill the data of each cell with a two-dimensional array; S312. The backend server locates each row of the parsed Excel file; S313. Identify whether the data length of the located row is less than the number of cells applied; If yes, go to step S314; If not, proceed to step S316; S314. Calculate the missing cell data in the located row, create a fill array, and fill the missing cells with empty strings; S315. Use the data in the located row to merge with the fill array as new row data; S316. Determine whether the row of the parsed Excel file has been located; If yes, go to step S4; If not, locate the next row and return to step S313; The specific steps of step S32 are as follows: S321. Use the textRenderer function to render the text content of the cell in the parsed Excel file; S322. Check whether the cell attributes contain a fill style; If yes, go to step S323; If not, proceed to step S324; S323. Use the foreground color in the fill style as the background color of the cell; S324. Convert the cell attributes and font style of each cell in the Excel file into corresponding CSS styles; The specific steps of step S33 are as follows: S331. Get the parsed Excel file, and traverse the merged objects in the workbook to get all the merged cells; S332. Sort the keys of the merged cells, and traverse in order to extract the information of the merged cells, where the information of the merged cells includes the starting row number, the starting column number, the ending row number, and the ending column number; S333. Calculate the number of merged rows and columns based on the information of the merged cell, construct a merge information object, and then add the merge information object to the array where the information of the original merged cell is located.

7. The method for realizing online viewing of original Excel files as claimed in claim 5, characterized in that: The specific steps of step S4 are as follows: S41. Initialize the Handsontable instance and set the data source of the Handsontable instance to the converted two-dimensional array; S42. Use the row and column size information in the parsed Excel worksheet to set the row height and column width in the Handsontable instance, completing the conversion between the size unit and the pixel value; S43. Parse the style information in the converted two-dimensional array, and apply the CSS style to each cell in combination with the cell attributes of the Handsontable instance; S44. Set up a virtual list, worksheet switching component, zoom component, scroll and query component on the front-end client, render the data in the visible area through the virtual list, perform worksheet switching rendering through the worksheet switching component, perform zooming and scrolling rendering directly from the DOM, obtain the query content through the query component, and highlight the query results.

8. A system for realizing online viewing of original Excel files, characterized in that: include: The file upload module is used to receive the Excel file uploaded by the user on the front-end web page, save it to the back-end server and record the stored file information; The file parsing module is used to read the Excel file according to the stored file information, and then use the xlsx.js library to parse the data and the excel.js library to parse the style information, and integrate the two parsing results; The data conversion module is used to fill the missing cells of the data in the parsed Excel file, convert the style information, mark the cells with merged attributes in the Excel file, and obtain the format recognizable by the data grid editor Handsontable; The online rendering module is used to render a table consistent with the original Excel file style on the front-end web page based on the format recognizable by the data grid editor Handsontable.

9. 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, the steps of the method for realizing online viewing of the original format of an Excel file as described in any one of claims 1 to 7 are implemented.

10. A storage medium having a computer program stored thereon, characterized in that: When the computer program is executed by a processor, the steps of the method for realizing online viewing of the original format of an Excel file as described in any one of claims 1 to 7 are implemented.

Images