Excel 导入导出(前端处理:xslx)(后端处理:hutool+poi || Easy Excel )

 

目录

Excel 导入导出(前端处理:xslx)

代码示例

导入Excel数据

将数据封装好后传给后端 

导出数据

预览(vue-office/excel"……;docx-preview)

Excel 导入导出(后端处理:hutool+poi || Easy Excel )

前端

后端使用Hutool处理Excel 文件

Hutool-poi是针对Apache POI的封装,因此需要用户自行引入POI库

导入

如何给导出的excel表头设置中文?

 list里的对象有键值对,键为表头,值为表头下的内容


一、Excel 导入导出(前端处理:xslx)

  1. 调用文件对象的 arrayBuffer 方法读取文件,然后使用 xslx.read 方法解析数为 Excel 工作簿对象  
  2. readAsBinaryString readAsArrayBufferFileReader 对象的两种不同读取文件的方式:
  • 创建 FileReader 对象。使用FileReader 对象的读取文件方法readAsBinaryString ,将文件读取为二进制字符串;或使用 readAsArrayBuffer 方法会将文件读取为二进制数据缓冲区,即ArrayBuffer对象。
  • 再使用 xslx.read 方法解析数据为 Excel 工作簿对象    

   3.下图为Excel 工作簿对象实例:

代码示例
导入Excel数据
const reader = new FileReader()
reader.readAsBinaryString(file)
reader.onload = function (e) { 
    const data = e.target.result
    let wb = XLSX.read(data, {//Excel 工作簿对象,打印如上
        type: 'binary'
    })
}


const reader = new FileReader()
reader.readAsArrayBuffer(file)
reader.onload = function (e) {
    const data = e.target.result
    let wb = XLSX.read(data, {
        type: 'array'
    })
}
  1. 创建 FileReader 对象。
  2. 使用FileReader 对象的读取文件方法readAsBinaryString ,将文件读取为二进制字符串。

(使用 readAsArrayBuffer 方法会将文件读取为二进制数据缓冲区,即ArrayBuffer对象

  1. 设置 onload 回调函数,该函数在文件读取成功后触发。
  2. 在回调函数中,通过 e.target.result 获取读取文件成功的结果值,即文件的二进制数据。
  3. 使用 XLSX.read 方法解析二进制字符串ArrayBuffer对象为 Excel 工作簿对象

type: 'binary' 表示解析的数据类型是二进制字符串;type: 'array'表解析的数据类型是ArrayBuffer对象

  1. 如果提供了回调函数 callback,则调用该函数,并将解析得到的 workbook 对象传递给回调函数。

这个流程适用于在前端处理 Excel 文件,你可以在回调函数中进一步处理 workbook 对象,比如获取工作表、将工作表转换为 JSON 等。

/*

readAsBinaryString readAsArrayBufferFileReader 对象的两种不同读取文件的方式。

readAsBinaryString 方法是过时的

官方推荐使用 readAsArrayBuffer 方法

*/

<input ref="excel-upload-input" class="excel-upload-input" type="file" a***ept=".xlsx, .xls" @change="handleClick">

let _file = e.target.files[0];//获取input标签里的文件

_file.arrayBuffer().then((res) => {
    const wb = XLSX.read(res);
});

使用 arrayBuffer 方法,更符合现代 JavaScript 异步风格

  1. 获取input标签里的文件
  2. 调用文件对象的 arrayBuffer 方法,该方法返回一个 Promise,该 Promise 在文件数据准备好时解析。
  3. then 方法中,获取解析后的二进制数据 res
  4. 使用 XLSX.read 方法解析二进制数据,得到 wb,这里的 read 方法是你项目中封装的读取 Excel 数据的函数。
将数据封装好后传给后端 
// XLSX.utils.sheet_to_json
const sheet1 = wb.Sheets.Sheet1
const _data = utils.sheet_to_json(sheet1);

const wsname = wb.SheetNames[0]; //取Excel 工作簿对象的第一张表
const ws = XLSX.utils.sheet_to_json(wb.Sheets[wsname]); //将那张表转成json表格内容(实际上是数组)
//把解析出来的Excel数据,直接转成表格需要的数据
ws.forEach((item) => {
    that.lists.push({
        //处理后端要接收的数据格式
        // factoryName: item["工厂"],
        // wokhouseName: item["车间"],
    });
    console.log(that.lists);
})
  1. 取Excel 工作簿对象的第一张表
  2. 使用XLSX.utils.sheet_to_json将那张表转成json表格内容
  3. 可处理转化的JSON数据为后端所需要的格式
导出数据
let book = XLSX.utils.book_new()
let aoa = [
  ['姓名', '性别', '年龄', '注册时间'],
  ['张三', '男', 18, new Date()],
  ['李四', '女', 22, new Date()]
];
// 将一个二维数组转成sheet
// aoa_to_sheet: 这个工具类最强大也最实用了,将一个二维数组转成sheet,会自动处理number、string、boolean、date等类型数据;
let sheet = XLSX.utils.aoa_to_sheet(aoa);
XLSX.utils.book_append_sheet(book, sheet, "sheet1")
XLSX.writeFile(book, `user${new Date().getTime()}.xls`)
},


const wb = XLSX.utils.book_new(); 
let data = [
  { name: "张三", id: 100, score: 99 },
  { name: "张四", id: 200, score: 99 },
  { name: "张五", id: 300, score: 99 }
]//转化JSON数组 
const ws = XLSX.utils.json_to_sheet(data); 
XLSX.utils.book_append_sheet(wb, ws, "people"); 
XLSX.writeFile(wb, "test1.xlsx");
  1. 使用XLSX.utils.aoa_to_sheet方法将一个二维数组转化为一个工作表(sheet)。

一个包含对象的数组 data,通过 XLSX.utils.json_to_sheet 方法将其转换为 Excel 工作表

  1. 使用XLSX.utils.book_new方法创建一个新的工作簿(book)。
  2. 使用XLSX.utils.book_append_sheet方法将之前创建的工作表添加到工作簿中,并命名为"sheet1"。
  3. 使用XLSX.writeFile方法将工作簿保存为一个Excel文件。

const reader = new FileReader()
reader.readAsBinaryString(file)
//onload 回调函数,该函数在文件读取成功后触发
reader.onload = function (e) { 
    //回调函数中,通过 e.target.result 获取读取文件成功的结果值,即文件的二进制数据BinaryString
    const data = e.target.result
    //使用 XLSX.read 方法解析二进制数据BinaryString,type: 'binary为 Excel 工作簿对象
    let wb = XLSX.read(data, {
        type: 'binary'
    })
}

/* 
readAsBinaryString 和 readAsArrayBuffer 是 FileReader 对象的两种不同读取文件的方式。
readAsBinaryString 方法是过时的
官方推荐使用 readAsArrayBuffer 方法
*/
const reader = new FileReader()
reader.readAsArrayBuffer(file)
reader.onload = function (e) {
    const data = e.target.result
    let wb = XLSX.read(data, {//Excel 工作簿对象
        type: 'array'
    })
}
//————————————————————————————————————————————————————————

<input ref="excel-upload-input" class="excel-upload-input" type="file" a***ept=".xlsx, .xls" @change="handleClick">

//使用 arrayBuffer 方法,更符合现代 JavaScript 异步风格
let _file = e.target.files[0];//获取input标签里的文件
//调用文件对象的arrayBuffer方法,该方法返回一个 Promise,该 Promise 在文件数据准备好时解析
_file.arrayBuffer().then((res) => {
	//在 then 方法中,获取解析后的二进制数据 res。
    const wb = read(res);
});

//————————————————————————————————————————————————————
// XLSX.utils.sheet_to_json
const sheet1 = wb.Sheets.Sheet1
const _data = utils.sheet_to_json(sheet1);

const wsname = wb.SheetNames[0]; //取Excel 工作簿对象的第一张表
const ws = XLSX.utils.sheet_to_json(wb.Sheets[wsname]); //将那张表转成json表格内容(实际上是 )
//把解析出来的Excel数据,直接转成表格需要的数据
ws.forEach((item) => {
    that.lists.push({
        //处理后端要接收的数据格式
        // factoryName: item["工厂"],
        // wokhouseName: item["车间"],
    });
    console.log(that.lists);
}) 
预览(vue-office/excel"……;docx-preview)
<vueofficeExcel v-if="excelSrc" :src="excelSrc" style="height:500px"></vueofficeExcel>
<input type="file" @change="change" />

import vueofficeExcel from "@vue-office/excel";
import vueofficedocx from "@vue-office/docx";
import vueofficedpdf from "@vue-office/pdf";

change(e) {
  let _file = e.target.files[0]
  const fr = new FileReader();
  fr.readAsDataURL(_file);
  fr.onload = (e) =>{
    this.excelSrc = e.target.result;
  }
let fr = new FileReader(); 
fr.readAsDataURL(file);
let self = this;
fr.onload = function () {
  self.imgbase64 = fr.result
}
<div ref="docxPreview"></div>

import { renderAsync } from "docx-preview"

let _file = e.target.files[0];
//blob, arrayBuffer
renderAsync(_file, this.$refs.docxPreview)

二、Excel 导入导出(后端处理:hutool+poi || Easy Excel )

1、前端
  1. 导入:前端直接返回给后端文件对象
  2. 导出选中的或导出全部:将选中的id记录在ids数组里;根据ids数组长度判断是选中导出还是导出全部;

调用接口:

导出全部的可向后端传入ids.join(',')//把数组转成字符串

导出全部的传入用户名参数

handleImport(res, file, fileList) {
  if (res.code === '200') {
    this.$message.su***ess("操作成功")
    this.load(1)
  } else {
    this.$message.error(res.msg)
  }
},
exportData() {   // 批量导出数据
  if (!this.ids.length) {   // 没有选择行的时候,全部导出  或者根据我的搜索条件导出
    window.open('http://localhost:9090/user/export?token=' + this.user.token + "&username="
        + this.username + "&name=" + this.name)
  } else {      // [1,2,3] => '1,2,3'//选中的导出
    let idStr = this.ids.join(',')//把数组转成字符串
    window.open('http://localhost:9090/user/export?token=' + this.user.token + '&ids=' + idStr)
  }
},

2、后端使用Hutool处理Excel 文件
Hutool-poi是针对Apache POI的封装,因此需要用户自行引入POI库
<dependency>
  <groupId>***.hutool</groupId>
  <artifactId>hutool-all</artifactId>
  <version>5.3.7</version> 
</dependency>
<dependency>
  <groupId>org.apache.poi</groupId>
  <artifactId>poi-ooxml</artifactId>
  <version>5.2.3</version>
</dependency>
导入
@PostMapping("/import")
public Result importData(MultipartFile file) throws IOException {
    ExcelReader reader = ExcelUtil.getReader(file.getInputStream());
    List<User> userList = reader.readAll(User.class);//读取所有数据并转成user类
    // 写入数据到数据库
    try {
        userService.saveBatch(userList);
    } catch (Exception e) {
        e.printStackTrace();
        return Result.error("数据批量导入错误");
    }
    return Result.su***ess();
}

ExcelUtil : Hutool-poi 模块中的一个工具类,用于处理 Excel 文件的读写。

  1. 通过 ExcelUtil.getReader(file.getInputStream()) 获取了一个 ExcelReader 对象
  2. 使用 reader.readAll(User.class) 读取了 Excel 中的所有数据并将其转换为 User 类的对象列表。
  3. 最后将这些对象列表通过 userService.saveBatch(userList) 写入到数据库中。

@GetMapping("/export")
public void exportData(@RequestParam(required = false) String username,
                       @RequestParam(required = false) String name,
                       @RequestParam(required = false) String ids,//1,2,3,4
                       HttpServletResponse response) throws IOException {
    ExcelWriter writer = ExcelUtil.getWriter(true);
    List<User> list;
    QueryWrapper<User> queryWrapper = new QueryWrapper<>();

    if (StrUtil.isNotBlank(ids)) {
        // 将逗号分隔的字符串转换为整数列表:["1","2","3"]  =>[1,2,3]
        List<Integer> idsArr1 = Arrays.stream(ids.split(regex ",")).map(Integer::value0f).collect(Collectors.tolist());
        queryWrapper.in(column: "id", idsArr1);
    } else {
        // 第一种全部导出或者条件导出
        queryWrapper.like(StrUtil.isNotBlank(username), column: "username", username);
        queryWrapper.like(StrUtil.isNotBlank(name), column: "name", name);
    }

    list = userService.list(queryWrapper);

    // 将查询到的用户数据写入 Excel
    writer.write(list, true);//告知那些key是头,让后把key一样的value放在同一列
    // 设置浏览器响应的格式
response.setContentType("application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8");
response.setHeader("Content-Disposition", "attachment;filename=" + URLEncoder.encode("用户信息表", "UTF-8") + ".xlsx");

ServletOutputStream out = response.getOutputStream();
writer.flush(out, true);
out.close();
writer.close();
}

判断前端是否有传过来ids,有就将其转成数组并queryWrapper查询出,没有就根据其他条件查询出数据列表

  1. 创建 ExcelWriter 对象,参数为是否是 XLSX 格式
  2. 将查询到的用户数据写入 Excel,并告知那些key是表头,让后把key一样的value放在同一列
  3. 设置浏览器响应的格式和文件名
  4. 通过 writer.flush(out, true) 将 Excel 数据输出到浏览器。
  5. 最后关闭输出流和 ExcelWriter 对象
如何给导出的excel表头设置中文?

只需要在实体类的属性上面加一个注解 @Alias("中文")

 list里的对象有键值对,键为表头,值为表头下的内容

 查询出来的list里是一条条user对象,所以有键值对

Excel生成-ExcelWriter | Hutool

map数据的写法 

@GetMapping("/export")
public void exportData(@RequestParam(required = false) String username,
                       @RequestParam(required = false) String name,
                       @RequestParam(required = false) String ids,//1,2,3,4
                       HttpServletResponse response) throws IOException {
    ExcelWriter writer = ExcelUtil.getWriter(true);
    List<User> list;
    QueryWrapper<User> queryWrapper = new QueryWrapper<>();

    if (StrUtil.isNotBlank(ids)) {
        // 将逗号分隔的字符串转换为整数列表:["1","2","3"]  =>[1,2,3]
        List<Integer> idsArr1 = Arrays.stream(ids.split(regex ",")).map(Integer::value0f).collect(Collectors.tolist());
        queryWrapper.in(column: "id", idsArr1);
    } else {
        // 第一种全部导出或者条件导出
        queryWrapper.like(StrUtil.isNotBlank(username), column: "username", username);
        queryWrapper.like(StrUtil.isNotBlank(name), column: "name", name);
    }

    list = userService.list(queryWrapper);

    // 将查询到的用户数据写入 Excel
    writer.write(list, true);//告知那些key是头,让后把key一样的value放在同一列
    // 设置浏览器响应的格式
response.setContentType("application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8");
response.setHeader("Content-Disposition", "attachment;filename=" + URLEncoder.encode("用户信息表", "UTF-8") + ".xlsx");

ServletOutputStream out = response.getOutputStream();
writer.flush(out, true);
out.close();
writer.close();
}


@PostMapping("/import")
public Result importData(MultipartFile file) throws IOException {
    ExcelReader reader = ExcelUtil.getReader(file.getInputStream());
    List<User> userList = reader.readAll(User.class);//读取所有数据并转成user类
    // 写入数据到数据库
    try {
        userService.saveBatch(userList);
    } catch (Exception e) {
        e.printStackTrace();
        return Result.error("数据批量导入错误");
    }
    return Result.su***ess();
}

转载请说明出处内容投诉
CSS教程_站长资源网 » Excel 导入导出(前端处理:xslx)(后端处理:hutool+poi || Easy Excel )

发表评论

欢迎 访客 发表评论

一个令你着迷的主题!

查看演示 官网购买