html代码：
<el-upload
class="upload-demo"
:auto-upload="false"
action="string"
:on-change="videoWatchHandleChange"
multiple
:show-file-list="false"
>
<el-button>
导入文件
</el-button>
</el-upload>
<el-button @click="exporttable">
导出文件
</el-button>
<el-button @click="outputPicture">
导出图片
</el-button>js代码：
//导入文件
videoWatchHandleChange(files, fileList) {
// console.log(fileList, "fileList");
let formData = new FormData();
formData.append("file", fileList[fileList.length - 1].raw);
importtable(formData).then((res) => {
this.$message.success("导入成功");
this.getrighttablepage();
});
},
//导出文件
exporttable() {
exporttable(this.id).then(res => {
// res就是接口返回的文件流了
//下载excel文件
let blob = new Blob([res.data], { type: "application/vnd.ms-excel" });
// let blob = new Blob([res.data], {type: "application/msword"}); //下载word文件
let objectUrl = URL.createObjectURL(blob);
window.location.href = objectUrl;
this.$message.success("导出成功");
})
},
//导出图片
outputPicture() {
outputPictureList(this.id).then(res => {
// res就是接口返回的文件流了
const blob = new Blob([res.data]);
const fileName = "report.jpg";
if ("download" in document.createElement("a")) {
// 非IE下载
const dlink = document.createElement("a");
dlink.download = fileName;
dlink.style.display = "none";
dlink.href = URL.createObjectURL(blob);
document.body.appendChild(dlink);
dlink.click();
URL.revokeObjectURL(dlink.href); // 释放URL 对象
document.body.removeChild(dlink);
} else {
// IE10+下载
navigator.msSaveBlob(blob, fileName);
}
})
},接口对应的js代码：
//导入表格
export function importtable(data,params) {
return request({
url: '/admin/pmsproduct/excelInput',
method: 'post',
headers: {
"Content-Type": "multipart/form-data;charset=utf-8"
},
data,params
})
}
//导出表格
export function exporttable(params) {
return request({
url: '/admin/pmsproduct/excelOutput',
method: 'get',
responseType: 'blob',
params
})
}
//导出图片
export function outputPictureList(id) {
return request({
url: '/admin/clxsjl/expPic/'+id,
method: 'post',
responseType: 'blob',
})
}字段 responseType: 'blob' 一定要有，不然会出现excel表格打不开的情况：
