Shulou(Shulou.com)06/01 Report--

This article mainly explains "Vue how to export Excel function". The explanation content in this article is simple and clear, easy to learn and understand. Please follow the idea of Xiaobian and go deep into it slowly to study and learn "Vue how to export Excel function" together.

1. Front-end-led process:

1. Click the export button in the page (Register Click Event)

2. In the event callback, send request background data

3. Process background data to achieve desired results

4. Creating Excel files

2. Plug-in usage and initialization

2.1 Use the methods provided in vue-admin.

Copy and paste its plug-in package under src folder under your own project

2.2 Install plug-in dependencies.

Note: There is a high probability that errors will be reported. What goes wrong at this stage basically depends on whether it is installed or not. It will be fine if it is installed.

npm install file-saver script-loader --save

2.3 The callback function reads as follows

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

After we click the Export button, we load the Export2Excel module import("@/vendor/Export2Excel").then(excel => { // excel indicates the imported module object //import returns a promise object, //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], //Focusing 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", //filename autoWidth: true, //Width is adaptive bookType: "xlsx" //generated file type})})

Excel export parameter description

Note: So far, in fact, has completed a simple export effect, with their own writing false data. In the actual project, it must be the data returned from the background, and we have to modify the format to achieve the effect we want (really tested, the above steps can be completed by following.) The effects are as follows:

3. Process background data to achieve desired results

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

Background returns data:

需要将key转成中文，将value抓换成数组。

3.1 准备一个数据处理函数（最后会在回调里面使用）3.2 先处理表头，定义一个对象，目的是待会将表头的英文转成中文const map = { "id": "编号", "password": "密码", "mobile": "手机号", "username": "姓名", "timeOfEntry": "入职日期", "formOfEmployment": "聘用形式", "correctionTime": "转正日期", "workNumber": "工号", "departmentName": "部门", "staffPhoto": "头像地址" }3.3 定义表头

header = [待会将英文的表头转成中文的，是个数组的形式]

如下代码所示效果：

header = ["id", "mobile", "username",……]3.4 要处理后台返回数据

后台返回数组，定义one是第一个数据，目的是以第一个数据为样本设置表头，如果第一条数据是false的话，说明后台啥也没返回，那就全剧终。

如下代码所示效果：

const one = list[0] if (!one) { return { header, data } }3.5 表头处理逻辑

01 `Object.keys(one) ` 这个是遍历对象取出key组成一个数组。

02 ` map` 方法遍历对每一个项进行做事返回一个数组

03 `return map[key] ` 可以看做 map.id = "编号"（便于理解）;map方法不停的对map对象做事而map[key]其实就是值，如 '编号"、'部门"… 然后组成一个数组 如：["姓名", "工资"]

header = Object.keys(one).map(key => { return map[key] })3.6 表格data处理逻辑

目标：后台返回正式员工和非正式员工用1和2表示，我们需要将数字转成文字，并且需要让他们变成数组的格式。

01-首先后台返回的Obj["formOfEmployment"]是数字1 , 2 我们要他们变成---> "正式"， "非正式"

02-obj["formOfEmployment"] = hireTypEnmu[key] 这段代码意思是将汉字设置给左边的数字，实现替换。我们分别看左右代表什么。

03- obj["formOfEmployment"] 此时是数字

04-hireTypEnmu:{1:"正式", "2":"非正式" }这是我们自己定义的对象

05-hireTypEnmu[key] --key是数字--所以他是value是汉字

如下代码所示效果：

// data把list中每一个对象转成 对应的value数组 // hireTypEnmu:{1:"正式", "2":"非正式" } data = list.map(obj => { // 把 Obj["formOfEmployment"]: 1 , 2 ---> "正式"， "非正式" const key = obj["formOfEmployment"] // 1, 2 obj["formOfEmployment"] = hireTypEnmu[key] return Object.values(obj) })3.7 函数返回

将处理好的数据返回

return { header, data }3.8 最终完成

这个时候，将这个函数拿到回调函数里面，header和data的数据之前已经有了。

完成代码如下：

hExport() { import("@/vendor/Export2Excel").then(async excel => { // 发ajax请求，获取数据 const res = await getEmployee(this.page, this.size) const list = res.data.rows console.log("从后端获取的数据", list) const { header, data } = this.formatData(list) // excel表示导入的模块对象 console.log(header, data) excel.export_json_to_excel({ // header: ["姓名", "工资"], // 表头 必填 header: header, // 表头 必填 data: data, filename: "excel-list", // 文件名称 autoWidth: true, // 宽度是否自适应 bookType: "xlsx" // 生成的文件类型 }) }) },总结：

以上代码经过测试，可以直接使用达成效果。

附：vue-element-admin码云拉取，这个版本是二次开发功能多的那款

# git clone https://github.com/panjiachen/vue-element-admin.git # 从github上拉取代码$ git clone https://gitee.com/mirrors/vue-element-admin.git # 从码云上拉取$ cd vue-element-admin # 切换到具体目录下$ npm install # 安装所有依赖$ npm run dev # 启动开发调试模式 查看package.json文件的scripts可知晓启动命令感谢各位的阅读，以上就是"Vue怎么导出Excel功能"的内容了，经过本文的学习后，相信大家对Vue怎么导出Excel功能这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是，小编将为大家推送更多相关知识点的文章，欢迎关注!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.