vue 中实现文件下载和上传(excel文件)
1.文件下载方法一:适合无参数的下载,有局限性vue中:template:<el-button @click="exportDoc" icon="el-icon-download">下载模板</el-button>scripte:exportDoc() {let me = this;axios.post("...
·
1.文件下载
方法一:适合无参数的下载,有局限性
vue中:
template:
<el-button @click="exportDoc" icon="el-icon-download">下载模板</el-button>
scripte:
exportDoc() {
let me = this;
axios
.post("/api/pageCont/downLoadModel")
.then(function(res) {
//这部分是下载的重点,通过iframe实现对后端返回文件的读取
let iframe = document.createElement('iframe')
iframe.style.display = 'none'
iframe.src = res.request.responseURL
iframe.onload = function () {
document.body.removeChild(iframe)
}
document.body.appendChild(iframe)
})
.catch(function(response) {
console.log(response);
});
}
java中:
// 下载模板
@RequestMapping(value = "downLoadModel")
public void downLoadModel(HttpServletResponse response){
HSSFWorkbook workbook = pageContService.downLoadModel();
try {
String fileName = new String("导入模板.xls".getBytes("gbk"),"iso-8859-1");
//清空response
response.reset();
//设置response的Header
response.addHeader("Content-Disposition", "attachment;filename="+fileName);
OutputStream os = new BufferedOutputStream(response.getOutputStream());
response.setContentType("application/vnd.ms-excel;charset=utf8");
//将excel写入到输出流中
workbook.write(os);
os.flush();
os.close();
} catch (Exception e) {
e.printStackTrace();
}
}
方法二:通用方法
handleExprot() {
let me = this;
let param = {
column:this.checkedmenus,
qianData:this.multipleSelection
};
axios({
// 指定请求方式
method:'post',
url:'/api/pageCont/exportEsData',
// 请求类型为blob
responseType:'blob',
data:param
})
.then(function(res) {
let blob = new Blob([res.data], {type: "application/vnd.ms-excel"}); // res就
//是接口返回的文件流了
let objectUrl = URL.createObjectURL(blob);
window.location.href = objectUrl;
})
.catch(function(response) {
console.log(response);
});
console.log(this.checkedmenus," ",this.multipleSelection)
},
2.文件上传
vue中:
template:
<el-button type="primary" @click="upModel" icon="el-icon-upload">上传数据</el-button>
<el-dialog title="上传文件" :visible.sync="uploadDialog" class="eldialog">
<el-form ref="addForm" class="eldialogForm" id="addForm">
<el-form-item label>
<el-upload
class="upload-demo"
drag
:before-upload="beforeUpload"
:on-exceed="handleExceed"
:limit="1"
:http-request="uploadFile"
multiple
ref="upload"
action
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">
将文件拖到此处,或
<em>点击上传</em>
</div>
<div class="el-upload__tip" slot="tip">只能上传Excel文件,且不超过500kb</div>
</el-upload>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="closeFile()">取 消</el-button>
<el-button type="primary" @click="postFile()" :disabled="uploading">确 定</el- button>
</div>
</el-dialog>
script中:
//上传excel表格
beforeUpload(file) {
if (file.type == "" || file.type == null || file.type == undefined) {
const FileExt = file.name.replace(/.+\./, "").toLowerCase();
if (
FileExt == "xls" ||
FileExt == "xlsx" ||
FileExt == "XLS" ||
FileExt == "XLSX"
) {
return true;
} else {
this.$message.error("上传文件必须是Excel格式!");
return false;
}
}
return true;
},
upModel(){
this.uploading = false;
this.file = [];
this.uploadDialog = true;
},
// 上传文件个数超过定义的数量
handleExceed(files, fileList) {
this.$message.warning(`当前限制选择 1 个文件,请删除后继续上传`);
},
uploadFile(item) {
this.file = item.file;
},
postFile() {
const fileObj = this.file;
var fileData = new FormData();
fileData.append("file", fileObj);
let headers = {
"Content-Type": "multipart/form-data"
};
this.uploading = true;
this.$ajax({
method: "post",
url:"http://localhost:6002/api/pageCont/importDateToEs", //填写上传的接口
headers: headers,
data: fileData
}).then(res => {
console.log("res:",res);
if (res == 200) {
this.$message.success("读取成功");
this.uploadDialog = false;
} else {
this.$message.error("错误!请检查上传文件内容");
}
});
setTimeout(function() {
this.uploading = false;
}, 1500);
},
colseFile() {
this.uploadDialog = false;
},
}
Java后端:
//模板导入es数据
@RequestMapping(value = "importDateToEs")
public ReturnType importDateToEs(@RequestParam("file") MultipartFile file){
ReturnType rt = pageContService.importDateToEs(file);
return rt;
}
更多推荐
已为社区贡献1条内容
所有评论(0)