上传功能
代码一
下载模板
代码二
下载模板
/*** 用户导入参数 */
const upload = ref({
open: false,
title: '设备导入',
// 是否禁用上传
isuploading: false,
headers: { authorization: 'bearer ' gettoken() },
url: import.meta.env.vite_app_base_api '/ar_check/device/importdata'
})
// 打开导入
function handleteamimport() {
upload.value.open = true
}
// 文件上传中
function handlefileprogress() {
upload.value.isuploading = true
}
// 文件上传完成
function handlefilesuccess(response, file) {
upload.value.open = false
upload.value.isuploading = false
proxy.$refs['uploadref'].handleremove(file)
proxy.$alert(''
response.msg '', '导入结果', { dangerouslyusehtmlstring: true })
getlist()
}
// 下载模板
function importtemplate() {
proxy.download('ar_check/device/importtemplate', {}, `device_template_${new date().gettime()}.xlsx`)
}
// 确定上传
async function submitfileform() {
proxy.$refs.uploadref.submit()
}
介绍一下 poi ooxml 的使用
首先需要创建一个工作薄，这里有几个注意事项
- hssf － 提供读写microsoft excel xls格式档案的功能。
- xssf － 提供读写microsoft excel ooxml xlsx格式档案的功能。
- hwpf － 提供读写microsoft word doc97格式档案的功能。
- xwpf － 提供读写microsoft word doc2003格式档案的功能。
- hslf － 提供读写microsoft powerpoint格式档案的功能。
- hdgf － 提供读microsoft visio格式档案的功能。
- hpbf － 提供读microsoft publisher格式档案的功能。
- hsmf － 提供读microsoft outlook格式档案的功能。
在工作页创建行以及单元格。
// 新建一个工作簿
workbook workbook = new xssfworkbook();
// 创建sheet页
sheet sheet = workbook.createsheet();
// 在第三行开始写
row row = sheet.createrow(3);
cell cell = row.createcell(0);
cell.setcellvalue("哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈");
// 合并行，表示表的第三列，结束第三列，合并 0 - 6 行
sheet.addmergedregion(new cellrangeaddress(3, 3, 0, 8));
// 创建单元格样式
cellstyle cellstyle = workbook.createcellstyle();
// 设置单元格居中方式---左对齐
cellstyle.setalignment(horizontalalignment.left);
// 应用单元格样式
cell.setcellstyle(cellstyle);
// 将数据写入到文件中
fileoutputstream fout = new fileoutputstream("d:\\downloads\\example.xlsx");
workbook.write(fout);
fout.close();
workbook.close();
设置单元格格式以及字体样式
// 创建单元格样式 cellstyle cellstyle2 = workbook.createcellstyle(); // 设置单元格居中方式---居中 cellstyle2.setalignment(horizontalalignment.center); // 设置单元格颜色--灰色 cellstyle2.setfillforegroundcolor(indexedcolors.grey_50_percent.getindex()); // 使用单一颜色填充 cellstyle2.setfillpattern(fillpatterntype.solid_foreground); // 字体格式 font font = workbook.createfont(); // 加粗 font.setbold(true); // 设置颜色--白色 font.setcolor(indexedcolors.white.getindex()); // 将字体设置到样式上 cellstyle2.setfont(font); // 最后单元格使用样式 t1.setcellstyle(cellstyle2);
最后输出到指定位置
// 创建一个文件输出流，用于将工作簿写入文件
fileoutputstream fout = new fileoutputstream("d:\\downloads\\example.xlsx");
// 将工作簿写入文件流
workbook.write(fout);
// 关闭文件流
fout.close();
// 关闭工作簿
workbook.close();
获取 excel 的图片
图片是独立的，根据单元格的位置获取
inputstream inputstream = files.newinputstream(paths.get("d:\\downloads\\device_template_1714287622392.xlsx"));
xssfworkbook workbook = new xssfworkbook(inputstream);
// 获取第一个 sheet 表
xssfsheet sheet = workbook.getsheetat(0);
if (sheet == null) {
throw new ioexception("损坏的文件！");
}
// 获取绘图包
xssfdrawing drawing = sheet.getdrawingpatriarch();
if (drawing != null) {
// 获取所有图形形状
list shapes = drawing.getshapes();
for (xssfshape shape : shapes) {
// 形状获取对应的图片数据
xssfpicture picture = (xssfpicture) shape;
xssfpicturedata picturedata = picture.getpicturedata();
//图片形状在工作表中的位置, 所在行列起点和终点位置
xssfclientanchor anchor = (xssfclientanchor) shape.getanchor();
// 行
short col1 = anchor.getcol1();
// 列
int row1 = anchor.getrow1();
//文件扩展名
string suffix = picturedata.suggestfileextension();
// 文件格式
string mimetype = picturedata.getmimetype();
// 文件数据
byte[] data = picturedata.getdata();
// 转换成 multipartfile 进行文件上传，参数一和参数二是文件名，参数三是类型，参数四是字节数据
multipartfile multipartfile = new mockmultipartfile("", "", mimetype, data);
}
}
下载模板功能实现
首先后端完成上面的excel 文件格式内容等
前端调用 springmvc 接口
import { saveas } from 'file-saver'
try {
const downloadloadinginstance = elloading.service({ text: '正在下载数据，请稍候', background: 'rgba(0, 0, 0, 0.7)' })
// 发送 post 请求到指定的 url，获取响应数据
const data = await service.post(url, {}, {
// 设置请求头为 'application/x-www-form-urlencoded'
headers: { 'content-type': 'application/x-www-form-urlencoded' },
// 设置响应类型为 blob
responsetype: 'blob'
})
// 如果响应数据存在
if (data) {
// 检查响应数据是否为 blob 类型---是否是json
const isblob = blobvalidate(data)
if (isblob) {
// 如果是 blob 类型，则创建 blob 对象并保存为文件
const blob = new blob([data])
saveas(blob, filename)
}
}
// 关闭加载动画
downloadloadinginstance.close()
} catch (error) {
console.error(error)
// 显示下载文件错误信息
elmessage.error('下载文件出现错误，请联系管理员！')
// 关闭加载动画
downloadloadinginstance.close()
}
上传导入
需要创建一个输入流来读取 execel 文件。
getlastrownum 获取有文本内容的最后一行列的索引，因为我这里前五行是解释内容，所以 == 5 表示没有数据。
如果是前端传递的，要这样写 multipartfile 的 getinputstream 方法获取流
inputstream inputstream = files.newinputstream(paths.get("d:\\downloads\\team_template_1714287622392.xlsx"));
workbook workbook = workbookfactory.create(inputstream);
// 获取第一个 sheet 表
sheet sheet = workbook.getsheetat(0);
if (sheet == null) {
throw new ioexception("损坏的文件！");
}
if (sheet.getlastrownum() == 5) {
throw new ioexception("导入班组数据不能为空！");
}
由于 poi ooxml 读取数据需要指定类型很麻烦，我做了一个方法转换
/**
* 将单元格的值以字符串形式返回。
*
* @param cell 单元格对象
* @return 字符串形式的单元格值，如果单元格为 null，则返回空字符串
*/
public static string getcellvalueasstring(cell cell) {
if (cell == null) {
return "";
}
switch (cell.getcelltype()) {
case numeric:
// 如果单元格类型为数字，将数字转换为字符串并去除空格
return string.valueof((long) cell.getnumericcellvalue()).trim();
case boolean:
// 如果单元格类型为布尔值，将布尔值转换为字符串并去除空格
return string.valueof(cell.getbooleancellvalue()).trim();
case string:
// 如果单元格类型为字符串，直接返回字符串并去除空格
return cell.getstringcellvalue().trim();
case formula:
// 如果单元格是公式，将计算结果作为字符串返回，并去除空格
return cell.getcellformula().trim();
case blank:
// 如果单元格为空，返回空字符串
return "";
case error:
// 如果单元格是错误类型，返回错误码作为字符串
return string.valueof(cell.geterrorcellvalue());
default:
// 其他类型的单元格返回空字符串
return "";
}
}
以上就是浅析vue3中excel下载模板并导入数据功能的实现的详细内容，更多关于vue3 excel下载模板并导入数据的资料请关注其它相关文章！
