How to create Excel reports through front-end and back-end interaction

The open source China community team made its first live broadcast, telling the story behind the open source China community in the name of sharing."

Preface

Excel has the widest audience in the office field and has become an irreplaceable tool with its powerful data processing and visualization functions. It can not only present data clearly, but also perform operations such as data analysis, chart production, and data pivoting, providing users with comprehensive data display and analysis capabilities.

Today, the editor will introduce to you how to implement an Excel report template and enter and fill in data through Grape City Company's pure front-end table control SpreadJS and back-end table component GcExcel.

Environmental preparation

Node.js

SpreadJS online form editor

Code file (can be used as a reference for reading this article)

front end

Design Excel report template

1. Load the data source for making reports:

Open the SpreadJS online table editor . Before designing the grouped report, you need to do data preparation work. Click the [Data Source] button in the [Data] tab on the table toolbar to add a data source for it.

Use the [Add Table] button to add each data source object (each data source object corresponds to a table), and configure the path to read the data (the path can be an address that requests the corresponding format data source, or it can be a server The requested address, the server returns a data source object that conforms to the format).

The data path is an optional field. If json contains multiple data sources, you can distinguish them by setting the data path.

2. Add report template:

After adding the data source, click the report button of the [Insert] tab to insert a new report template. The previously added data source object will be displayed in the data source list on the left, as shown in the figure below.

3. Set up grouped reports:

By dragging the fields in the data source list on the left, you can quickly build a report template that groups sales area, province, city, and product type fields to count sales and profits, as shown in the figure below:

4. Save the Excel template as a sjs file

Modify Excel report template

After saving the Excel report template as a .sjs file, the editor now needs to convert some cells in the Excel report template to GcExcel template language. The specific operations are as follows:

Place the .sjs file in the root directory of the SpreadJS front-end code

5. Convert Excel template to GcExcel template syntax

Taking cell C4 (province) in the Excel report template (as shown in the figure below) as an example, the editor first gets the template api information (the queue information in DevTools in the figure below) through the getBindingPath method.

After obtaining the api information, parse its binding path:

//此为部分代码，完整代码在文末的Gitee链接中
let binding = template.getBindingPath(r, c)  // binding内容如上图
// ... 
// 绑定路径
let path = ""
switch (binding && binding.type) {
    case "Group":
    case "List":
        if (binding.binding) {
            let p = binding.binding.match(/(?<=\[)[^\]\[]*(?=\])/g).join(".")
            path += ds + "." + p // path="销售数据.省份"
        }
        break;
    // ...
}

Then parse out its merge type and expansion direction:

// Group类型
let group = ""
if (binding && binding.type == "Group") {
    group = "G=M"
} else if (binding && binding.type == "List") {
    group = "G=L"
}
// Expand方向
let expand = ""
if (binding && binding.type != "Summary" && binding.spillDirection == "Vertical") {
   expand = "E=V"
} else if (binding && binding.type != "Summary" && binding.spillDirection == "Horizontal") {
   expand = "E=H"
}

Finally, after integrating this information and adding double curly brackets, the content of cell C4 in the exported Excel file should be the following GcExcel template syntax:

{{ds.销售数据.省份(E=V,G=M)}}

6. Run the front-end project and export the Excel template file

Enter the command [npm install] to download dependencies
Enter the command [npm run start] to start the project (as shown in the figure below after startup)

Finally, export the modified template to an Excel file, as shown in the figure below. You can see that the information in the province unit has been modified to the GcExcel template syntax.

rear end

Open the GcExcel back-end code and place the previously exported Excel template file in the root directory of the code file. The last main function run can transfer the data into the Excel template file, and finally an Excel report with data will be generated.

Conclusion

The above is the whole process of how to use SpreadJS+GcExcel to create an Excel report. If you want to know more information, please click here to view.

Extension link:

[Dry information broadcast] Read all the key points of financial statement analysis in one article!

Why aren’t your financial statements great? It is recommended that you understand these four design points and!

Analysis of application scenarios of pure front-end Excel table control in the field of report analysis

How to create Excel reports through front-end and back-end interaction

Guess you like