A method for quickly downloading Excel files using web worker

Abstract

This invention belongs to the field of data processing technology, specifically relating to a method for quickly downloading Excel files based on a web worker. The method includes: initializing and generating a project directory; executing a command in the project root directory to download the js-export-excel library; locating the js-export-excel.js file and moving it to a preset utility function directory; identifying the code block in the js-export-excel.js file that uses DOM technology and modifying the saveExcel function code that calls the DOM object; writing performance-intensive operations in the worker.js file for requesting raw data, performing a map loop traversal on the raw data, and generating blob data; creating a main thread file index.vue, retrieving the blob data returned by the worker thread in the main thread file index.vue, and generating an Excel file based on the blob data. This invention solves the problem of JavaScript lacking multithreading in a browser environment.

Description

Technical Field

[0001] This invention belongs to the field of data processing technology, specifically relating to a method for quickly downloading Excel files based on web workers. Background Technology

[0002] The js-export-excel library is a JavaScript-based front-end code library. By including the js-export-excel library in a project, specified JSON data can be exported as an Excel file. For the incoming data, the functions in the js-export-excel library perform a forEach loop operation to convert the data into binary format, generating blob data, and then exporting the blob data as an Excel file through the methods of the blob instance object. However, when the data to be exported to an Excel file reaches tens of thousands or even hundreds of thousands of rows, hundreds of thousands of loops can cause the front-end page to lag, and other events on the front-end page cannot be responded to in a timely manner, resulting in the front-end page appearing to freeze. Therefore, this invention proposes a method based on web workers to quickly download Excel files to solve the above technical problems. Summary of the Invention

[0003] The present invention aims to solve the problem that JavaScript in the browser environment does not have multi-threading when browsers perform some expensive data processing or computing tasks.

[0004] According to one aspect of the present invention, a method for quickly downloading Excel files based on a web worker is provided, mainly including the following steps:

[0005] Create a Vue project using the Vue scaffolding tool, and initialize and generate the project directory at the same time;

[0006] Execute the command in the project root directory to download the js-export-excel library, and store the successfully downloaded js-export-excel library in the node_modules folder;

[0007] Locate the js-export-excel.js file in the node_modules folder and move it to the default utility function directory.

[0008] Locate the code block in the js-export-excel.js file that uses DOM technology, and modify the code that calls the saveExcel function of the DOM object;

[0009] Create a worker.js file using Web Worker, and write performance-intensive operations in the worker.js file to request raw data, perform map loop traversal operations on the raw data, and generate blob data, so as to reduce the pressure on the main thread of the front-end page;

[0010] Create a main thread file index.vue. In the main thread file index.vue, retrieve the blob data returned by the worker thread and generate an Excel file based on the blob data.

[0011] Optionally, the Vue scaffolding tool refers to the standardized development tool provided by the official Vue team, which offers command-line and UI interfaces for creating Vue projects, configuring third-party dependency libraries, and compiling Vue projects.

[0012] Optionally, the js-export-excel library is an open-source front-end code library written in JavaScript, used to implement the function of exporting Excel files.

[0013] Optionally, the Web Worker works by using the Worker class to load a JavaScript file in the current JavaScript main thread to create a new thread, achieving the effect that the main thread and the new thread do not block each other during execution, and providing the postMessage and onMessage interfaces for data exchange between the main thread and the new thread.

[0014] Optionally, the DOM object is a general term for a class of objects. When JavaScript manipulates a webpage, each tag in the webpage is regarded as a DOM object.

[0015] Optionally, the blob data can be stored in the form of random access blocks of any kind of binary data, which typically consists of saved spreadsheets, program loading modules, or digitized audio modules.

[0016] Optionally, the saveExcel method provided by the source code of the js-export-excel library requires the use of the windowdocument object, but in Web Worker technology, the global object of window document cannot be accessed directly.

[0017] According to another aspect of the present invention, a system for quickly downloading Excel files based on web worker is also provided, comprising the following modules:

[0018] The initialization module is used to create a Vue project using the Vue scaffolding tool, initialize and generate the project directory, and execute a command in the project root directory to download the js-export-excel library. After the js-export-excel library is successfully downloaded, it is stored in the node_modules folder. At the same time, the js-export-excel.js file is found in the node_modules folder and moved to the preset utility function directory.

[0019] The modification module is used to locate the code block in the js-export-excel.js file that uses DOM technology, and to modify the code that calls the saveExcel function of the DOM object;

[0020] The download module is used to create the worker.js file. In the worker.js file, you can write the operations for requesting raw data, performing map loop traversal on the raw data, and generating blob data, which are performance-intensive operations. It also creates the main thread file index.vue, which obtains the blob data returned by the worker thread and generates an Excel file based on the blob data.

[0021] According to another aspect of the present invention, a computer storage medium is provided, the computer storage medium storing program instructions, wherein, when the program instructions are executed, the device where the computer storage medium is located controls the execution of any one of the methods described above.

[0022] According to another aspect of the present invention, a processor is provided for running a program, wherein the program, when running, performs the method described in any of the above embodiments.

[0023] Compared with the prior art, the beneficial effects of the present invention are at least as follows:

[0024] 1. This invention first initializes and generates a project directory, and executes a command in the project root directory to download the js-export-excel library. Simultaneously, it locates the js-export-excel.js file and moves it to the preset utility function directory. Next, it identifies the code blocks in the js-export-excel.js file that use DOM technology and modifies the code that calls the saveExcel function of the DOM object. Then, it writes code in the worker.js file to request raw data, perform a map loop traversal operation on the raw data, and handle the performance-intensive operations for generating blob data. Finally, it creates the main thread file index.vue, which retrieves the blob data returned by the worker thread and generates an Excel file based on the blob data.

[0025] 2. This invention solves the problem that when the amount of data to be exported to an Excel file reaches tens of thousands or even hundreds of thousands of rows, the front-end page will lag, other events on the front-end page will not be responded to in a timely manner, and the front-end page will appear to freeze. It also addresses the problem that JavaScript does not have multi-threading capabilities in the browser environment. Attached Figure Description

[0026] Figure 1 This is a flowchart illustrating the steps of a method for quickly downloading Excel files based on a web worker, as described in this invention.

[0027] Figure 2 This is a structural diagram of a system for quickly downloading Excel files based on a web worker, according to the present invention. Detailed Implementation

[0028] To make the objectives, technical solutions, and advantages of this invention clearer, the invention will be further described in detail below with reference to the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are merely illustrative and not intended to limit the invention.

[0029] It is understood that the terms "first," "second," etc., used in this application may be used herein to describe various elements, but unless otherwise specified, these elements are not limited by these terms. These terms are used only to distinguish one element from another. For example, without departing from the scope of this application, a first script may be referred to as a second script, and similarly, a second script may be referred to as a first script.

[0030] For reference Figure 1As shown, this invention provides a method for quickly downloading Excel files based on web workers, which is mainly achieved by performing the following steps:

[0031] Step 1: Create a Vue project using the Vue scaffolding tool, and initialize and generate the project directory.

[0032] Step 2: Execute the command in the project root directory to download the js-export-excel library, and store the successfully downloaded js-export-excel library in the node_modules folder.

[0033] Step 3: Locate the js-export-excel.js file in the node_modules folder mentioned above, and move the js-export-excel.js file to the preset utility function directory.

[0034] Step 4: Locate the code block in the js-export-excel.js file that uses DOM technology, and modify the code that calls the saveExcel function of the DOM object;

[0035] Specifically, the above code block is as follows:

[0036]

[0037] Here, Blob is a DOM object. To avoid calling the DOM object, the above code block can be directly changed to return s2ab(wbout).

[0038] Step 5: Create a worker.js file using Web Worker. In the worker.js file, write the operations for requesting raw data, performing map loop traversal on the raw data, and generating blob data, which are performance-intensive operations, to reduce the pressure on the main thread of the front-end page.

[0039] Step 6: Create the main thread file index.vue. In the main thread file index.vue, obtain the blob data returned by the worker thread and generate an Excel file based on the blob data.

[0040] Specifically, the js-export-excel library is a JavaScript-based front-end code library. By importing the js-export-excel library into a project, specified JSON data can be exported as an Excel file. For the incoming data, it performs a forEach loop to convert the data into binary format, generating blob data, and then exports the blob data as an Excel file using methods of the blob instance object. The inventors found that the functions encapsulated by js-export-excel loop through the data to be exported to generate binary files. When the amount of data to be exported reaches tens of thousands or even hundreds of thousands of rows, hundreds of thousands of loops can cause page lag. For such large-scale data export operations, js-export-excel has many shortcomings. To solve this technical problem, steps one through six above modified the js-export-excel source code. The modified source code is combined with a web worker. By constructing a worker thread, the large-scale interface is requested in the worker thread, and the returned data is traversed. The modified js-export-excel plugin is then used to generate blob data, thereby improving system performance.

[0041] Furthermore, the aforementioned Vue scaffolding tools refer to the standardized development tools provided by the official Vue team, which offer command-line and UI interfaces for creating Vue projects, configuring third-party dependency libraries, and compiling Vue projects.

[0042] Furthermore, the aforementioned js-export-excel library is an open-source front-end code library written in JavaScript, used to implement the function of exporting Excel files.

[0043] Furthermore, the working principle of the Web Worker is that, in the current JavaScript main thread, a JavaScript file is loaded using the Worker class to open a new thread, so that the main thread and the new thread do not block each other during execution, and the postMessage and onMessage interfaces are provided for data exchange between the main thread and the new thread.

[0044] Furthermore, the DOM object mentioned above is a general term for a class of objects. When JavaScript manipulates a webpage, each tag in the webpage is treated as a DOM object.

[0045] Furthermore, the aforementioned blob data stores any kind of binary data in the form of random access blocks. The binary data typically consists of saved spreadsheets, program loading modules, and digitized audio modules.

[0046] Furthermore, the saveExcel method provided by the source code of the js-export-excel library requires the use of the windowdocument object, but in Web Worker technology, the global object of window document cannot be accessed directly;

[0047] Specifically, Excel files are typically generated based on JSON data returned from the backend. However, due to the large volume of data, the data returned from the backend usually cannot be directly used to generate the Excel file and requires formatting. The lag occurs when performing map operations on large amounts of data. Because JavaScript is single-threaded, performing complex calculations can monopolize the main thread, causing other page events to fail to respond promptly, resulting in a page freeze. Complex loop operations can be placed in a thread created by the web worker. However, the `saveExcel` method provided in the `js-export-excel` source code requires the `document` object, and global objects like the `window` and `document` cannot be accessed in the worker thread. To address this deficiency, this invention modifies the `saveExcel` function. The improved function does not involve manipulating DOM objects; it only returns blob data. This allows the `saveExcel` function to be called in the worker thread, and then the blob data can be retrieved in the main program to generate the Excel file.

[0048] Further, see references such as Figure 2 As shown, this invention also provides a system for quickly downloading Excel files based on web workers, to implement the method for quickly downloading Excel files based on web workers as described above. Specifically, the functions of each component module of the system are described as follows:

[0049] The initialization module is used to create a Vue project using the Vue scaffolding tool, initialize and generate the project directory, and execute a command in the project root directory to download the js-export-excel library. After the js-export-excel library is successfully downloaded, it is stored in the node_modules folder. At the same time, the js-export-excel.js file is found in the node_modules folder and moved to the preset utility function directory.

[0050] The module was modified to locate the code block in the js-export-excel.js file that uses DOM technology, and to modify the code that calls the saveExcel function of the DOM object;

[0051] The download module is used to create the worker.js file. In the worker.js file, you can write the operations for requesting raw data, performing map loop traversal on the raw data, and generating blob data, which are performance-intensive operations. It also creates the main thread file index.vue, which obtains the blob data returned by the worker thread and generates an Excel file based on the blob data.

[0052] Furthermore, the present invention also provides a computer storage medium storing program instructions, wherein the program instructions, when executed, control the device where the computer storage medium is located to execute any of the methods described above.

[0053] Furthermore, the present invention also provides a processor for running a program, wherein the program, when running, executes the method described in any one of the above descriptions.

[0054] In summary, this invention first initializes and generates a project directory, and executes a command in the project root directory to download the js-export-excel library and locate the js-export-excel.js file, moving it to a predefined utility function directory. Secondly, it identifies the code blocks in the js-export-excel.js file that use DOM technology and modifies the code that calls the saveExcel function of the DOM object. Thirdly, it writes operations in the worker.js file to request raw data, perform a map loop traversal on the raw data, and generate blob data, all of which are performance-intensive. Finally, it creates a main thread file, index.vue, which retrieves the blob data returned by the worker thread and generates an Excel file based on the blob data. This invention uses a web worker to create threads to perform complex data processing operations, while also improving upon the limitation of the js-export-excel plugin not being able to be called in the worker thread, avoiding blocking the main thread and maximizing the speed of Excel file generation.

[0055] It should be understood that although the steps in the flowcharts of the various embodiments of the present invention are shown sequentially according to the arrows, these steps are not necessarily executed in the order indicated by the arrows. Unless explicitly stated herein, there is no strict order restriction on the execution of these steps, and they can be executed in other orders. Moreover, at least some steps in the various embodiments may include multiple sub-steps or multiple stages. These sub-steps or stages are not necessarily completed at the same time, but can be executed at different times. The execution order of these sub-steps or stages is not necessarily sequential, but can be performed alternately or in turn with other steps or at least a portion of the sub-steps or stages of other steps.

[0056] Those skilled in the art will understand that all or part of the processes in the methods of the above embodiments can be implemented by a computer program instructing related hardware. The program can be stored in a non-volatile computer-readable storage medium, and when executed, it can include the processes of the embodiments of the above methods. Any references to memory, storage, databases, or other media used in the embodiments provided in this application can include non-volatile and / or volatile memory. Non-volatile memory can include read-only memory (ROM), programmable ROM (PROM), electrically programmable ROM (EPROM), electrically erasable programmable ROM (EEPROM), or flash memory. Volatile memory can include random access memory (RAM) or external cache memory. By way of illustration and not limitation, RAM is available in various forms, such as static RAM (SRAM), dynamic RAM (DRAM), synchronous DRAM (SDRAM), dual data rate SDRAM (DDRSDRAM), enhanced SDRAM (ESDRAM), synchronous link DRAM (SLDRAM), RAMbus direct RAM (RDRAM), direct memory bus dynamic RAM (DRDRAM), and RAMbus dynamic RAM (RDRAM), etc.

[0057] The technical features of the above embodiments can be combined in any way. For the sake of brevity, not all possible combinations of the technical features in the above embodiments are described. However, as long as there is no contradiction in the combination of these technical features, they should be considered to be within the scope of this specification.

[0058] The above-described embodiments are merely illustrative of several implementations of the present invention, and while the descriptions are specific and detailed, they should not be construed as limiting the scope of the present invention. It should be noted that those skilled in the art can make various modifications and improvements without departing from the concept of the present invention, and these modifications and improvements all fall within the scope of protection of the present invention. Therefore, the scope of protection of this patent should be determined by the appended claims.

[0059] The above description is merely a preferred embodiment of the present invention and is not intended to limit the present invention. Any modifications, equivalent substitutions, and improvements made within the spirit and principles of the present invention should be included within the scope of protection of the present invention.

Claims

1. A method for fast downloading excel files based on web worker, characterized in that, The method comprises the following steps: A vue project is created by a vue scaffolding tool, and a project directory is initialized and generated; A command is executed in a project root directory to download a js-export-excel library, and the js-export-excel library after successful downloading is stored in a node_modules folder; A js-export-excel.js file is found in the node_modules folder, and the js-export-excel.js file is moved under a preset tool function directory; A code block using a DOM technology in the js-export-excel.js file is located, and a saveExcel function code calling a DOM object is modified; A worker.js file is created by a Web Worker, a request for original data, a map loop traversal operation on the original data, and a performance-consuming operation of generating blob data are written in the worker.js file, so as to reduce the pressure of a front-end page main thread; A main thread file index.vue is created, blob data returned by a worker thread is obtained in the main thread file index.vue, and an excel file is generated according to the blob data.

2. The method for quickly downloading an excel file based on a web worker according to claim 1, characterized in that, The vue scaffolding tool refers to a standardized development tool provided by the official vue, which provides a command line and a UI interface, and is used for creating a vue project, configuring a third-party dependent library, and compiling a vue project.

3. The method for quickly downloading excel files based on web workers according to claim 1, characterized in that, The js-export-excel library is an open source front-end code library written based on javascript, and is used for realizing the function of exporting an excel file.

4. The method for quickly downloading excel files based on web workers according to claim 1, characterized in that, The working principle of the Web Worker is that, in a current JavaScript main thread, a JavaScript file is loaded by using a Worker class to open a new thread, so that the main thread and the new thread are not blocked in execution, and an interface postMessage and onMessage for data exchange between the main thread and the new thread is provided.

5. The method for quickly downloading excel files based on web workers according to claim 1, characterized in that, The DOM object is a general term for a class of objects, and when javascript operates a webpage, each label in the webpage is regarded as a DOM object.

6. The method for quickly downloading excel files based on web workers according to claim 1, characterized in that, The blob data stores binary data of any kind in the form of random access blocks, and the binary data is usually composed of saved spreadsheets, program load modules, and digitized sound modules.

7. The method for quickly downloading excel files based on web workers according to claim 1, characterized in that, A saveExcel method provided by the source code of the js-export-excel library needs to use a window document object, and in the Web Worker technology, the global object of the window document cannot be directly accessed.

8. A system for fast downloading excel files based on web workers for implementing the method according to any one of claims 1 to 7, characterized in that, The method comprises the following modules: The initialization module is configured to create a vue project by using a vue scaffolding tool, to initialize a project directory, and to execute a command under a project root directory to download a js-export-excel library, to store the downloaded js-export-excel library in a node_modules folder, to find a js-export-excel.js file in the node_modules folder, and to move the js-export-excel.js file to a preset tool function directory; The modification module is configured to locate a code block using a DOM technology in the js-export-excel.js file, and to modify a saveExcel function code calling a DOM object; The download module is configured to create a worker.js file, to write, in the worker.js file, a performance-consuming operation of requesting original data, performing a map loop operation on the original data, and generating blob data, to create a main thread file index.vue, to obtain, in the main thread file index.vue, the blob data returned by a worker thread, and to generate an excel file according to the blob data.

9. A computer storage medium, characterized in that The computer storage medium stores program instructions, wherein the program instructions control a device where the computer storage medium is located to execute the method in any one of claims 1 to 7 when the program instructions are run.

10. A processor, comprising: The processor is configured to run a program, wherein the program executes the method in any one of claims 1 to 7 when the program is run.

Images