The actual use of the ejsExcel template in the Vue. js Project,

The actual use of the ejsExcel template in the Vue. js Project,

What is ejsExcel?

ejsExcelIt is a template engine developed by Chinese people and used in the Node. js application to export Excel tables using a preset Excel template.

Excel template

After export

Github address

EjsExcel

If github cannot be opened because of the knowledge of the public (ni) Institute (dong) Week (de), it does not matter. Its syntax is very simple, and it is some definitions of the Excel template format:

In this article, I used the ejsExcel template engine because of my business needs. I think it is very good, but there are also many pitfalls. There are too few materials related to the Internet, so I took this opportunity to summarize my experience in the pitfall.
I am in Vue. ejsExcel is used in js front-end framework. Since I am not specialized in front-end development, I will try to make it clear. If it is not too professional in some places, please forgive me!

Step 1: Install ejsExcel

npm install ejsexcel

After installing the dependency packagexxx/node_modules/ejsexcelDirectory, the core file isejsExcel.jsTo use the template engine, you must introduce the file:

import Excel from 'exceljs'

Step 1:

After the installation, the official team gave a test caseejsexcel/testDirectory. It is recommended that beginners do not use it in actual projects first. They should first start another process to run the test case.
In github, the author provides a way to run the command in the test directory.test.batThis file, after my actual test, needs to be used in windows

node test.bat

Command to run successfully, but in Mac, it cannot run.

To run on Mac, use

node testExcel.js

Run.

The test case is very simple. When you understand how the test case works, there is no problem left. It doesn't matter if you don't understand it.testExcel.jsFor example:

How is it? It's easy!

Step 2: compile a template

According to your business logic, writing the data you want to export in Excel according to the above syntax is not difficult, but it is a little annoying and requires a little patience.

After compiling the template, you can put it in your project. You can choose where to put it, but it is best not to leave the core code too far, after all, we need to read the template path when rendering the data. The path is too deep, so we have to worry about ourselves.

Step 3: obtain the data source

ImagetestThe test examples in are all false data, but in actual development, we need to dynamically obtain and export data as needed.

My approach is to split the introduction of core files, data acquisition, and Excel template rendering into three parts. And then useexport defaultExport these methods so that they can be called globally.

In Vue, I made an export button. When this button is clicked, the method is triggered to get usdata{}After obtaining the data, as a parameter, pass in the encapsulated data source method.

ThengetMachiningDataAnd format the parameters.

Step 4: Use a Data Rendering Template

Call againrenderDataUseTempMethod to pass in formatted data for Data Rendering:

You can also write a method to dynamically select the storage path after rendering the file.

This is probably so much, but it is not difficult in terms of business logic. It may be that you need a little patience and attention when creating an Excel template.
The above are all my own code in the project. Please do not limit it to the code I write. The most important idea is to handle the business according to the actual situation. As long as the thinking is clarified, the problem will be solved by more than half.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.