列表的导入 导出 下载模板 功能实现

样式

按钮代码：

<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对象
        }
      });
    },