列表的导入 导出 下载模板 功能实现
样式
按钮代码:
<el-row :gutter="10" class="mb8 mar-top-20">
<el-col :span="1.5">
<el-button
type="info"
plain
icon="el-icon-upload2"
size="mini"
@click="handleImport"
>导入</el-button
>
</el-col>
<el-col :span="1.5">
<el-button type="success" plain icon="el-icon-edit" size="mini" class="downTem"
@click="handleTemplate">下载模板</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="warning" plain icon="el-icon-download" size="mini"
@click="handleExport">导出</el-button>
</el-col>
</el-row>
一 post封装统一下载方法 点击事件处理--导入
//导入功能
//说明 :点击按钮打开导入弹窗,可拖拽文件上传,上传后点击确定按钮
handleImport() {
this.upload.title = '用户导入'
this.upload.open = true
},
//弹窗代码
<!-- 导入对话框 -->
<el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-
body>
<el-upload
ref="upload"
:limit="1"
accept=".xlsx, .xls"
:headers="upload.headers"
:action="upload.url + '?updateSupport=' + upload.updateSupport"
:disabled="upload.isUploading"
:on-progress="handleFileUploadProgress"
:on-success="handleFileSuccess"
:auto-upload="false"
drag
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
</el-upload>
<div slot="footer" class="dialog-footer align-right">
<el-button type="primary" @click="submitFileForm">确 定</el-button>
</div>
</el-dialog>
//data中声明变量
// 导入参数
upload: {
// 是否显示弹出层
open: false,
// 弹出层标题
title: '',
// 是否禁用上传
isUploading: false,
// 是否更新已经存在的用户数据
updateSupport: 0,
// 设置上传的请求头部
headers: { Authorization: 'Bearer ' + getToken() },
// 上传的地址
url: process.env.VUE_APP_BASE_API + '/service/personnel/importData',
},
//上传的点击事件
// 文件上传中处理
handleFileUploadProgress(event, file, fileList) {
this.upload.isUploading = true
},
// 文件上传成功处理
handleFileSuccess(response, file, fileList) {
this.upload.open = false
this.upload.isUploading = false
this.$refs.upload.clearFiles()
this.$alert(
"<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" +
response.msg +
'</div>',
'导入结果',
{ dangerouslyUseHTMLString: true }
)
this.getList() //导入本地文件后刷新列表查看导入数据
},
//点击弹窗提交按钮
// 提交上传文件
submitFileForm() {
this.$refs.upload.submit()
},
点击事件处理 --下载模板
//download为请求接口 自调整
handleTemplate() {
this.download('service/personnel/importTemplate', {}, `personnel_模板.xlsx`)
},
点击事件处理 --导出
/** 导出按钮操作 */
handleExport() {
this.download('service/personnel/export', {}, `personnel_${new
Date().getTime()}.xlsx`)
},
二 get方法导出文件 不封装
(1)先在js文件封装请求方法
export function liquidationReport(query) {
return request({
url: '/trade/liquidation--Export',
method: 'get',
params: query,
responseType: 'blob'
})
}
(2)在需要的页面引入,例:
import { liquidationReport } from '@/api/recinciliation/recinciliation.js'
(3)导出点击事件
handleExport() { let params={//有条件导出数据参数 startDate:this.queryParams.settleDate.length>0? this.queryParams.settleDate[0]:'', endDate:this.queryParams.settleDate.length>0?this.queryParams.settleDate[1]:'', settleType:this.queryParams.settleType,//(划账类型) manageCode:this.queryParams.manageCode, pageNum: this.queryParams.pageNum, pageSize: this.queryParams.pageSize, } liquidationReport(params).then((res) => {//请求接口 const blob = new Blob([res], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8", }); // 构造一个blob对象来处理数据,并设置文件类型 if (window.navigator.msSaveOrOpenBlob) { //兼容IE10 navigator.msSaveBlob(blob, "test"); } else { const href = URL.createObjectURL(blob); //创建新的URL表示指定的blob对象 const a = document.createElement("a"); //创建a标签 a.style.display = "none"; //隐藏 a.href = href; // 指定下载链接 a.download = "清算账单表"; //指定下载文件名 a.click(); //触发下载 URL.revokeObjectURL(a.href); //释放URL对象 } }); },