The whole process record of Vue export Excel function

1. Front-end leading process:

1. Click the export button on the page (register click event)

2. In the event callback, send a request for background data

3. Process the background data to achieve the desired effect

4. Generate Excel file

2. Plugin usage and initialization

2.1 With the help of the methods provided in vue-admin.

Copy and paste the plugin package into the src folder of your project.

2.2 Install plugin dependencies.

Note: There is a high probability that an error will be reported. Any error at this stage is basically caused by dependencies not being installed. Just install them all.

npm install file-saver script-loader --save

2.3 The callback function content is as follows

When we officially click the 'Export' button, we load the Export2Excel module in the vendor folder.

When we officially click the `Export` button, we load the Export2Excel module in the vendor folder import('@/vendor/Export2Excel').then(excel => {
  // excel represents the imported module object //The import method returns a promise object after execution.
                                 // In the then method we can get the module object used console.log(excel)
  excel.export_json_to_excel({
    header: ['name', 'salary'], // Header required data: [
      ['Liu Bei', 100], //Focus on the configuration part of data, we find that it requires a strict two-dimensional array ['Guan Yu', 500]
    ], // Specific data required filename: 'excel-list', // File name autoWidth: true, // Whether the width is adaptive bookType: 'xlsx' // Generated file type })
})

Excel export parameter description

Note: Up to this point, a simple export effect has been completed, using fake data written by myself. In the actual project, we must use the data returned by the background, and modify the format to achieve the desired effect (it has been tested, and the above steps can be followed to complete it.) The effect is as follows:

3. Process the background data to achieve the desired effect

For example, the table header returned by the background is in English and needs to be converted into Chinese, but the format is not the format required by the plug-in.

Backend return data:

The key needs to be converted into Chinese and the value needs to be captured into an array.

3.1 Prepare a data processing function (which will be used in the callback at the end)

3.2 Process the table header first and define an object to convert the English header into Chinese later

const map = {
        'id': 'Number',
        'password': 'Password',
        'mobile': 'Mobile phone number',
        'username': 'Name',
        'timeOfEntry': 'Job Entry Date',
        'formOfEmployment': 'Employment form',
        'correctionTime': 'Correction date',
        'workNumber': 'Work Number',
        'departmentName': 'Department',
        'staffPhoto': 'Avatar address'
      }

3.3 Define the header

header = [The English header will be converted into Chinese later, in the form of an array]

The effect is shown in the following code:

header = ['id', 'mobile', 'username',……]

3.4 To process the background return data

The background returns an array, defining one as the first data. The purpose is to set the header with the first data as a sample. If the first data is false, it means that the background returns nothing, and the whole play ends.

The effect is shown in the following code:

const one = list[0]
      if (!one) {
        return { header, data }
      }

3.5 Header Processing Logic

01 `Object.keys(one) ` This traverses the object and extracts the keys to form an array.

02 `map` method traverses each item and returns an array

03 `return map[key]` can be seen as map.id = 'number' (easy to understand); the map method keeps doing things to the map object and map[key] is actually the value, such as 'number', 'department'... and then forms an array such as: ['name', 'salary']

header = Object.keys(one).map(key => {
        return map[key]
      })

3.6 Table data processing logic

Objective: The background returns formal employees and informal employees represented by 1 and 2. We need to convert the numbers into text and make them into array format.

01-First, the Obj['formOfEmployment'] returned by the backend is the number 1, 2. We want them to become---> 'formal', 'informal'

02-obj['formOfEmployment'] = hireTypEnmu[key] This code means setting the Chinese characters to the numbers on the left to achieve replacement. Let’s look at what the left and right represent respectively.

03- obj['formOfEmployment'] is a number at this time

04-hireTypEnmu:{1:'formal', '2':'informal'}This is an object we defined ourselves

05-hireTypEnmu[key] --key is a number--so its value is a Chinese character

The effect is shown in the following code:

// data converts each object in the list into a corresponding value array // hireTypEnmu:{1:'formal', '2':'informal' }
      data = list.map(obj => {
        // Obj['formOfEmployment']: 1, 2 ---> 'formal', 'informal'
        const key = obj['formOfEmployment'] // 1, 2
        obj['formOfEmployment'] = hireTypEnmu[key]
 
        return Object.values(obj)
      })

3.7 Function Returns

Return the processed data

return { header, data }

3.8 Final Completion

At this time, take this function into the callback function, and the header and data data are already there.

The completed code is as follows:

hExport() {
      import('@/vendor/Export2Excel').then(async excel => {
        // Send an ajax request to get data const res = await getEmployee(this.page, this.size)
        const list = res.data.rows
        console.log('Data obtained from the backend', list)
 
        const { header, data } = this.formatData(list)
        // excel represents the imported module object console.log(header, data)
        excel.export_json_to_excel({
          // header: ['name', 'salary'], // header required header: header, // header required data: data,
          filename: 'excel-list', // file name autoWidth: true, // whether the width is adaptive bookType: 'xlsx' // generated file type })
      })
    },

Summarize:

The above code has been tested and can be used directly to achieve the effect.

Appendix: vue-element-admin is pulled from the code cloud. This version has more secondary development functions.

# git clone https://github.com/panjiachen/vue-element-admin.git # Pull code from github$ git clone https://gitee.com/mirrors/vue-element-admin.git # Pull from the code cloud$ cd vue-element-admin # Switch to the specific directory$ npm install # Install all dependencies$ npm run dev # Start development and debugging mode. Check the scripts in the package.json file to know the startup command.

This is the end of this article about Vue's Excel export function. For more relevant Vue's Excel export function content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!