Vue里如何导入导出Excel数据(后端Java)
首先是前端,需要用到的代码包括方法和必要的数据以及element弹框,按钮组件以导入学生为例导出:点击按钮:<el-button type="primary" @click="exportStudentExcel()">导出</el-button>按钮单击事件:// 导出数据exportStudentExcel () {var wb = XLSX.utils.table_t
·
首先是前端,需要用到的代码包括方法和必要的数据以及element弹框,按钮组件
以导入学生为例
导出:
点击按钮:
<el-button type="primary" @click="exportStudentExcel()">导出</el-button>
按钮单击事件:
// 导出数据
exportStudentExcel () {
var wb = XLSX.utils.table_to_book(document.querySelector("#user-out-table"))
var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
try {
FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), 'userlist.xlsx')
} catch (e) {
if (typeof console !== 'undefined') console.log(e, wbout)
}
return wbout
}
需要导入的相关第三方库:
import FileSaver from "file-saver";
import XLSX from "xlsx";
导入:
点击按钮:
<el-button type="primary" @click="importStudentExcel()">导入</el-button>
按钮单击事件:
importStudentExcel(){
this.importDialogVisible = true;
}
需要一个弹框组件以及控制他显示的变量:
importDialogVisible: false
<!-- 点击导入后弹出框 -->
<el-dialog title="导入学生" v-model="importDialogVisible" width="45%">
<input ref="file" type="file" accept=".xlsx,.xls" style="display: none;" @change="uploadFile">
<el-button type="primary" icon="el-icon-upload" @click="clickFile">选择文件</el-button>
</el-dialog>
选择文件事件:
clickFile() {
this.$refs.file.dispatchEvent(new MouseEvent('click'))
}
文件点击事件:
// 上传文件
async uploadFile() {
const file = this.$refs.file.files
var extName = file[0].name.substring(file[0].name.lastIndexOf('.')).toLowerCase()
if (extName === '.xlsx' || extName === '.xls') {
var formData = new FormData()
formData.append('file', file[0])
request.post("/api/user/uploadExcel", formData).then(res => {
if(res.code === '0') {
this.$message({
type: 'success',
message: '数据导入成功!'
})
} else {
this.$message({
type: "error",
message: res.msg
})
}
})
}
else {
this.$message.error('数据导入失败,请选择正确的xlsx模板文件')
}
this.importDialogVisible = false;
this.load();
}
后台对EXCEL数据进行处理的代码:
@PostMapping("/uploadExcel")
@ApiOperation("excel")
public Object taskUploadExcel(@RequestParam(value = "file") MultipartFile file) throws Exception{
SimpleDateFormat df = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
// 判断文件格式 我需要的是EXCEL表
String fileName = file.getOriginalFilename();
if (!fileName.matches("^.+\\.(?i)(xls)$") && !fileName.matches("^.+\\.(?i)(xlsx)$")) {
throw new Exception("上传文件格式不正确");
}
List<User> list = new ArrayList<>();
try{
InputStream is = file.getInputStream();
// 版本不支持了
// HSSFWorkbook workbook = new HSSFWorkbook(new POIFSFileSystem(is));
// 读取工作簿
XSSFWorkbook workbook = new XSSFWorkbook(is);
// 读取工作表
XSSFSheet sheet = workbook.getSheetAt(0);
//获取多少行
int rows = sheet.getPhysicalNumberOfRows();
User task = null;
for (int j = 1; j < rows; j++) {
task = new User();
//获得第 j 行
XSSFRow row = sheet.getRow(j);
System.out.println("row="+row+"++++++++++++++++++++++++++++++++++++++++++");
row.getCell(j).setCellType(Cell.CELL_TYPE_STRING);
task.setAccount(row.getCell(1).getStringCellValue());
task.setUsername(row.getCell(2).getStringCellValue());
// 密码开头要为字母 不然检测失败
task.setPassword(row.getCell(3).getStringCellValue());
task.setSex(row.getCell(4).getStringCellValue());
task.setCellphone(row.getCell(5).getStringCellValue());
task.setEmail(row.getCell(6).getStringCellValue());
task.setIdentify(row.getCell(7).getStringCellValue());
task.setBorrowNumber((int)row.getCell(8).getNumericCellValue());
task.setRemark(row.getCell(9).getStringCellValue());
String stu_num = task.getAccount();
User user1 = userMapper.getUserByAccount(stu_num);
if(user1!=null){
throw new Exception("学生已存在");
}
userMapper.insert(task);
list.add(task);
System.out.println("总条数="+list.size());
System.out.println("结束");
System.out.println("退出循环");
System.out.println("----------------");
}
}catch (Exception e){
return Result.error("-1","导入失败:"+e.getMessage());
}
return Result.success();
}
仅供参考嘞
更多推荐
已为社区贡献1条内容
所有评论(0)