vue实现Excel文件的上传与下载功能的两种方式

2023-08-20 19:44:04 54

一.前言项目中使用到比较多的关于Excel的前端上传与下载，整理出来，以便后续使用或分析他人。

1.前端vue:模板下载与导入Excel

导入Excel封装了子组件，点击导入按钮可调用子组件，打开文件上传的对话框，上传成功后返回结果


批量导入
模板下载
新增

importFile(){ this.$refs.refFileUpload.open(); }

向后台提交文件的方法

submitFile(){
const_this=this;
if(!_this.files.name){
_this.$message.warning("请选择要上传的文件！");
returnfalse;
}
letfileFormData=newFormData();
//filename是键，file是值，就是要传的文件
fileFormData.append("file",_this.files,_this.files.name);
if(_this.OtherParams){
constkeys=Object.keys(_this.OtherParams);
keys.forEach(e=>{
fileFormData.append(e,_this.OtherParams[e]);
})
}
letrequestConfig={
headers:{
"Content-Type":"multipart/form-data"
}
};
AjaxHelper.post(_this.apiURL,fileFormData,requestConfig)
.then(res=>{
console.log(res);
if(res.success){
constresult=res.result;
if(result.errorCount==0&&result.successCount>0){
_this.$message({
message:`导入成功,成功${result.successCount}条`,
type:"success"
});
_this.closeFileUpload();
_this.Refresh();
}elseif(result.errorCount>0&&result.successCount>=0){
_this.Refresh();
_this.tableData=result.uploadErrors;
_this.successCount=result.successCount;
_this.innerVisible=true;
}elseif(result.errorCount==0&&result.successCount==0){
_this.$message({
message:`上传文件中数据为空`,
type:"error"
});
}
}
})
.catch(function(error){
console.log(error);
});
},

这是上传文件的调用方法。

2.模板下载

关于模板下载，之前没有考虑到IE10浏览器的兼容问题，导致在IE10下文件没法下载，后来百度后找到了解决办法。

downloadFile(name){
letrequestConfig={
headers:{
"Content-Type":"application/json;application/octet-stream"
}
};
AjaxHelper.post(this.downLoadUrl,requestConfig,{
responseType:"blob"
}).then(res=>{
//处理返回的文件流
constcontent=res.data;
constblob=newBlob([content]);
vardate=
newDate().getFullYear()+
""+
(newDate().getMonth()+1)+
""+
newDate().getDate();
constfileName=date+name+".xlsx";
if("download"indocument.createElement("a")){
//非IE下载
constelink=document.createElement("a");
elink.download=fileName;
elink.style.display="none";
elink.href=URL.createObjectURL(blob);
document.body.appendChild(elink);
elink.click();
URL.revokeObjectURL(elink.href);//释放URL对象
document.body.removeChild(elink);
}else{
//IE10+下载
navigator.msSaveBlob(blob,fileName);
}
});
},

前端的处理就结束了。

3.后端对于文件上传和下载的处理

文件上传

publicUploadResultUploadFiles(IFormFilefile,GuidbrandId)
{
try
{
UploadResultuploadResult=newUploadResult();
if(file==null)
{
thrownewUserFriendlyException(501,"上传的文件为空，请重新上传");
}
stringfilename=Path.GetFileName(file.FileName);
stringfileEx=Path.GetExtension(filename);//获取上传文件的扩展名
stringNoFileName=Path.GetFileNameWithoutExtension(filename);//获取无扩展名的文件名
stringFileType=".xls,.xlsx";//定义上传文件的类型字符串
if(!FileType.Contains(fileEx))
{
thrownewUserFriendlyException(501,"无效的文件类型，只支持.xls和.xlsx文件");
}
//源数据
MemoryStreammsSource=newMemoryStream();
file.CopyTo(msSource);
msSource.Seek(0,SeekOrigin.Begin);
DataTablesourceExcel=ReadStreamToDataTable(msSource,"",true);

//模板数据
stringdataDir=_hosting.WebRootPath;//获得当前服务器程序的运行目录
dataDir=Path.Combine(dataDir,"ExcelTemplate");
varpath=dataDir+"//档案模版.xlsx";
MemoryStreammsModel=newMemoryStream();
FileStreamstream=newFileStream(path,FileMode.Open);
stream.CopyTo(msModel);
msModel.Seek(0,SeekOrigin.Begin);
DataTabletemplateExcel=ReadStreamToDataTable(stream,"",true);
//验证是否同模板相同
stringcolumnName=templateExcel.Columns[0].ColumnName;
if(columnName!=sourceExcel.Columns[0].ColumnName)
{
thrownewUserFriendlyException(501,"上传的模板文件不正确");
}
intsucessCount=0;
interrorCount=0;
//处理后台逻辑执行插入操作

uploadResult.SuccessCount=sucessCount;
uploadResult.ErrorCount=errorCount;
uploadResult.uploadErrors=errorList;
returnuploadResult;
}
catch(Exceptionex)
{
thrownewUserFriendlyException(501,"上传的模板文件不正确");
}
}

将文件流转化为Datable

publicstaticDataTableReadStreamToDataTable(StreamfileStream,stringsheetName=null,boolisFirstRowColumn=true)
{
//定义要返回的datatable对象
DataTabledata=newDataTable();
//excel工作表
ISheetsheet=null;
//数据开始行(排除标题行)
intstartRow=0;
try
{
//根据文件流创建excel数据结构,NPOI的工厂类WorkbookFactory会自动识别excel版本，创建出不同的excel数据结构
IWorkbookworkbook=WorkbookFactory.Create(fileStream);
//如果有指定工作表名称
if(!string.IsNullOrEmpty(sheetName))
{
sheet=workbook.GetSheet(sheetName);
//如果没有找到指定的sheetName对应的sheet，则尝试获取第一个sheet
if(sheet==null)
{
sheet=workbook.GetSheetAt(0);
}
}
else
{
//如果没有指定的sheetName，则尝试获取第一个sheet
sheet=workbook.GetSheetAt(0);
}
if(sheet!=null)
{
IRowfirstRow=sheet.GetRow(0);
//一行最后一个cell的编号即总的列数
intcellCount=firstRow.LastCellNum;
//如果第一行是标题列名
if(isFirstRowColumn)
{
for(inti=firstRow.FirstCellNum;iDownloadFiles()
{
stringdataDir=_hosting.WebRootPath;//获得当前服务器程序的运行目录
dataDir=Path.Combine(dataDir,"ExcelTemplate");
varpath=dataDir+"//档案模版.xlsx";
varmemoryStream=newMemoryStream();
using(varstream=newFileStream(path,FileMode.Open))
{
awaitstream.CopyToAsync(memoryStream);
}
memoryStream.Seek(0,SeekOrigin.Begin);
returnnewFileStreamResult(memoryStream,"application/octet-stream");//文件流方式，指定文件流对应的ContenType。
}

文件下载比较简单

publicasyncTaskDownloadFiles()
{
stringdataDir=_hosting.WebRootPath;//获得当前服务器程序的运行目录
dataDir=Path.Combine(dataDir,"ExcelTemplate");
varpath=dataDir+"//档案模版.xlsx";
varmemoryStream=newMemoryStream();
using(varstream=newFileStream(path,FileMode.Open))
{
awaitstream.CopyToAsync(memoryStream);
}
memoryStream.Seek(0,SeekOrigin.Begin);
returnnewFileStreamResult(memoryStream,"application/octet-stream");//文件流方式，指定文件流对应的ContenType。
}

文件上传结果通知类

publicclassUploadResult
{
publicintRepeatCount{get;set;}
publicintSuccessCount{get;set;}
publicintFileRepeatCount{get;set;}
publicintErrorCount{get;set;}
publicListuploadErrors{get;set;}
}
publicclassUploadErrorDto
{
publicstringRowIndex{get;set;}
publicstringErrorCol{get;set;}
publicstringErrorData{get;set;}
}

通过以上处理后，我们就可以在前端实现文件的上传了，若上传失败则会返回失败结果

以上就是整个前后端关于文件上传与下载的实现，想通过日常记录这种方式，来帮助自己更好的掌握基础，稳固自己的技能

总结

以上所述是小编给大家介绍的vue实现Excel文件的上传与下载功能的两种方式，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

vue实现Excel文件的上传与下载功能的两种方式

热门推荐

随机推荐