spring boot+mybatisplus+vue+elementui+easypoi实现excel导出,用户需要选取列表中的部分字段进行导出操作,列表是一对多形式的列表,请给我前后端详细的步骤和代码
时间: 2024-05-12 15:17:10 浏览: 138
springboot+mybatis+poi 实现excel导入导出
好的,关于您的问题,以下是前后端详细的步骤和代码:
前端代码:使用Vue和ElementUI实现
1. 首先在Vue组件中定义你的表格,要注意的是要使用el-table-column组件定义每一列的数据和显示方式,其中prop属性表示对应的数据字段,label属性表示列名,使用v-model绑定selection数组来记录选中的行:
```html
<el-table :data="tableData" v-loading="tableLoading" @selection-change="handleSelectionChange"
@sort-change="handleSortChange" style="width: 100%">
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column :prop="'id'" label="ID" sortable="custom" width="80"></el-table-column>
<el-table-column :prop="'name'" label="姓名" sortable="custom" width="100"></el-table-column>
<el-table-column :prop="'age'" label="年龄" sortable="custom" width="80"></el-table-column>
<el-table-column :prop="'gender'" label="性别" sortable="custom" width="80">
<template slot-scope="scope">
<span>{{scope.row.gender == 1 ? '男' : '女'}}</span>
</template>
</el-table-column>
<el-table-column :prop="'address'" label="地址"></el-table-column>
</el-table>
```
2. 在模板中添加一个按钮,点击后调用导出方法:
```html
<el-button type="primary" @click="handleExport">导出</el-button>
```
3. 在Vue实例中定义导出方法,首先获取选中行的id数组(selection),然后使用axios发送POST请求到后端,传递ids参数作为选中行id数组,以及fields参数作为要导出的字段数组。注意在请求头中设置Content-Type为application/json,以及Response-Type为arraybuffer,以便正常接收Excel文件流:
```javascript
handleExport() {
var ids = this.selection.map(item => item.id)
var fields = ['id', 'name', 'age', 'gender', 'address']
axios({
method: 'post',
url: '/export',
data: {
ids: ids,
fields: fields
},
responseType: 'arraybuffer',
headers: {
'Content-Type': 'application/json'
}
}).then(response => {
const blob = new Blob([response.data], {
type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'
})
const fileName = 'export.xlsx'
FileSaver.saveAs(blob, fileName)
}).catch(e => {
this.$message.error('导出失败')
})
}
```
后端代码:使用Spring Boot和Mybatis-Plus实现
1. 首先创建一个实体类,表示数据库中的一行记录,使用Mybatis-Plus的@TableField注解表示对应的字段,以及@TableId注解表示主键:
```java
import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableField;
import com.baomidou.mybatisplus.annotation.TableId;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
@Data
@NoArgsConstructor
@AllArgsConstructor
public class User {
@TableId(value = "id", type = IdType.AUTO)
private Integer id;
@TableField("name")
private String name;
@TableField("age")
private Integer age;
@TableField("gender")
private Integer gender;
@TableField("address")
private String address;
}
```
2. 创建一个Mapper接口,继承Mybatis-Plus的BaseMapper接口,用于对User表进行操作,其中的selectExportList方法返回要导出的数据列表,使用@Param注解传递ids和fields参数:
```java
import org.apache.ibatis.annotations.Param;
import java.util.List;
public interface UserMapper extends BaseMapper<User> {
List<User> selectExportList(@Param("ids") List<Integer> ids, @Param("fields") List<String> fields);
}
```
3. 创建一个Controller类,用于处理导出请求,使用@RequestBody接收前端传递过来的ids和fields参数,然后调用UserMapper的selectExportList方法获取要导出的数据列表,最后使用EasyPoi进行Excel导出:
```java
import cn.afterturn.easypoi.excel.ExcelExportUtil;
import cn.afterturn.easypoi.excel.entity.ExportParams;
import cn.afterturn.easypoi.excel.entity.enmus.ExcelType;
import cn.afterturn.easypoi.excel.export.styler.IExcelExportStyler;
import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
import org.apache.poi.ss.usermodel.Workbook;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.net.URLEncoder;
import java.util.ArrayList;
import java.util.List;
@RestController
public class ExportController {
@Autowired
private UserMapper userMapper;
@RequestMapping("/export")
public void export(@RequestBody ExportRequest request, HttpServletResponse response) throws IOException {
List<User> userList = userMapper.selectExportList(request.getIds(), request.getFields());
ExportParams params = new ExportParams(null, "用户信息", ExcelType.XSSF);
Workbook workbook = ExcelExportUtil.exportExcel(params, User.class, userList);
String fileName = "export.xlsx";
response.setContentType("application/octet-stream");
response.setHeader("Content-Disposition", "attachment; filename=" + URLEncoder.encode(fileName, "UTF-8"));
workbook.write(response.getOutputStream());
workbook.close();
}
}
class ExportRequest {
private List<Integer> ids;
private List<String> fields;
// getter, setter, toString省略
}
```
至此,您可以开始使用以上代码实现您的需求了,希望能对您有所帮助。
阅读全文