Excel模板下载功能+前、后端解析Excel⽂件代码封装+前端上传Excel⾄数据库
（S。。。
最近做需求时遇到⼀个可向导的⽂件上传功能，现在做完了来分享下，基本能满⾜⼤伙80%的需求了
⼀、Excel 模板下载功能
后端代码（这是07版的Excel，需要03版的修改 XSSFWorkbook workbook = new XSSFWorkbook(fis); 这⾏代码即可）：
public void download(HttpServletResponse response)throws IOException {
FileInputStream fis =new FileInputStream("⽂件路径");
ServletOutputStream out =null;
try{
XSSFWorkbook workbook =new XSSFWorkbook(fis);
response.setContentType("application/binary;charset=ISO8859-1");
String fileName =de("模板⽂件名字","UTF-8");
response.setHeader("Content-disposition","attachment; filename="+ fileName +".xlsx");
out = OutputStream();
workbook.write(out);
out.flush();
out.close();
}catch(IOException e){
e.printStackTrace();
}finally{
//关闭⽂件输出流
fis.close();
}
return;
}
前端代码：
引⼊跨域请求依赖axios
import axios from'axios'
挂载axios
Vue.prototype.$http = axios
设置访问根路径
axios.defaults.baseURL ="localhost：端⼝号看后端"
JS代码：
downloadFile(){
this.$http({
method:"get",
headers:{
"content-type":"application/json",// 默认值
Authorization:"Bearer "+ Item("access_token"),
},
url:'后端接⼝地址',
params:{'name':'Jack'},
responseType:"blob",
}).then(function(res){
let blob =new Blob([res.data]);// { type: "application/vnd.ms-excel" }
let url = ateObjectURL(blob);// 创建⼀个临时的url指向blob对象
// 创建url之后可以模拟对此⽂件对象的⼀系列操作，例如：预览、下载
let a = ateElement("a");
a.href = url;
a.download ="上传模板.xlsx";
a.click();
// 释放这个临时的对象url
vokeObjectURL(url);
}).catch(function(res){
console.log("error", res);
});
}
⼆、前端解析 Excel 并展⽰在页⾯的功能（需要去下载xlsx 依赖）Html：
按钮部分：
<el-upload action accept=".xlsx, .xls":auto-upload="false":show-file-list="false":on-change="handle">
<el-button slot="trigger"type="primary">选取EXCEL⽂件</el-button>
</el-upload>
数据展⽰部分：
<div v-show="show">
<el-table :data="dataList"stripe :height="height"border>
<el-table-column type="index"width="50"align="center"></el-table-column>
<el-table-column prop="按需填写"label="按需填写"width="180"align="center"></el-table-column>
<el-table-column prop="按需填写"label="按需填写"width="100"align="center"></el-table-column>
<el-table-column prop="按需填写"label="按需填写"width="180"align="center"></el-table-column>
<el-table-column prop="按需填写"label="按需填写"width="90"align="center"></el-table-column>
<el-table-column prop="按需填写"label="按需填写"align="center"width="120"></el-table-column>
<el-table-column prop="按需填写"label="按需填写"align="center"width="100"></el-table-column>
</el-table>
</div>
JS：
return{
dataList:[],
show:false
}
},
methods:{
async handle(ev){
let file = ev.raw;// 获取上传的⽂件
if(!file)return;
// 隐藏表格
this.show =false;
// 读取⽂件中的数据
let data =await readFile(file);
/
/ workbook：创建⼀个EXCEL表，并读取⼆进制数据，worksheet：默认拿第⼀张表的数据
let workbook = ad(data,{type:'binary'}), worksheet = workbook.Sheets[workbook.SheetNames[0]];
// 数据转JSON格式
data = xlsx.utils.sheet_to_json(worksheet);
// 把读取出来的数据变为对应后端的字段
let arr =[];
data.forEach(item =>{
let obj ={};
for(let key in character){
if(!character.hasOwnProperty(key))break;
let v = character[key], text = v.text, type = v.type;
v = item[text]||"";
type ==="string"?(v =String(v)):null;
type ==="number"?(v =Number(v)):null;
obj[key]= v;
}
arr.push(obj);
});
// 解析完毕后展⽰数据
this.show =true;
this.dataList = arr;
},
}
三、前端上传 Excel ⾄数据库
后续就给核⼼实现代码了
// 将数据⼀条⼀条传给后端
let n =0;
let send=async()=>{
if(n >this.dataList.length -1){
this.$message({
message:"亲，⽂件已经上传完毕！",
type:'success',
showClose:true
});
this.show =false;
return;
}
let body =this.dataList[n];
const{data:res}=await this.$http.post("后端接⼝地址",body);
if(res=="success"){
n++;
}
send();
};
send();
四、后端读取 Excel ⼯具类（ POI，较为复杂且会 OOM，建议使⽤下⼀种）
/* 封装⼀个读取⽂件的⼯具类 */
public void read(FileInputStream inputStream)throws Exception{
// 1、创建⼯作簿
Workbook workbook =new XSSFWorkbook(inputStream);
// 2、获取表
Sheet sheet = SheetAt(0);
// 3、获取数据
int rowCount = PhysicalNumberOfRows();
for(int rowNum =1; rowNum < rowCount; rowNum++){
Row rowData = Row(rowNum);
if(rowData !=null){
//获得该⾏的列的数⽬
int lineCount = PhysicalNumberOfCells();
for(int lineNum =0; lineNum < lineCount ;lineNum++){
System.out.print("第"+ rowNum +"⾏，第"+ lineNum +"列：");
Cell cell = Cell(lineNum);
//判断数据类型
前端页面模板if(cell !=null){
CellType cellType = CellTypeEnum();
switch(cellType){
case STRING:
System.out.println("字符串："+ StringCellValue());break;
case BOOLEAN:
System.out.println("布尔："+ BooleanCellValue());break;
case BLANK:
System.out.println("空");break;
case ERROR:
System.out.println("没有该数据类型");break;
case NUMERIC:
//如果是⽇期就直接输出，否则就装换为String，然后输出
if(HSSFDateUtil.isCellDateFormatted(cell)){
System.out.println("时间："+new DateCellValue()).toString("yyyy-MM-dd"));
}else{
cell.setCellType(CellType.STRING);
System.out.println("整型："+ String());break;
}
default:
System.out.println("其他位置没有数据");break;
}
}
}
}
}
inputStream.close();
}
五、后端读取 Excel ⼯具类（ExsyExcel，还是阿⾥的⾹）
⼀句话就搞定了，⾹⼀匹好吧！（读取的数据以对象的形式放在 List 中，并返回给你！）
public<T> List<T>syncReadModel(InputStream file, Class clazz){
ad(file).sheet(0).head(clazz).doReadSync();
}
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论