web端导出功能

新建一个observable 储存列表数据

import Vue from 'vue';

export const storeError = Vue.observable({
  dataList: [],
  rowIndex: '',
});
export const mutations = {
  saveErrorList(value) {
    storeError.dataList = value;
  },
  deleteErrorList(rowIndex) {
    storeError.dataList.splice(rowIndex, 1);
  },
};

数据列表请求

getPersonal() {
      const params = { ...this.ruleForm, ...this.params };
      get_personal(params).then((res) => {
        const { code, data, message } = res;
        if (code == 200) {
          this.total = data.totalCount;
          this.formData = data || [];
          // 把数据放进store里
          mutations.saveErrorList(data);
        } else {
          this.$message.warning(message);
        }
      });
    },

导出功能

/**
     * @description 导出
     */
    exportExecl() {
      if (this.loading === true) return;
      if (this.errorListTotal === 0) {
        this.$message.warning('暂无数据！');
        return;
      }
      const h = this.$createElement;
      this.$messageBox({
        title: '消息',
        message: h('p', null, [
          h('i', null, '已选定 '),
          h('i', null, this.errorListTotal),
          h('i', null, '条人员数据，确认导出吗？'),
        ]),
        showCancelButton: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        closeOnClickModal: false,
      }).then(() => {
          this.loading = true;
          let params = Object.assign({}, this.ruleForm);
          params.mchDetailId = this.ruleForm.mchDetailId;
          params.start = this.params.start;
          params.limit = this.params.limit;
          get_salary_fire_user_page(params)
            .then((res) => {
              if (res) {
                let blob = new Blob([res], { type: 'application/vnd.ms-excel' });
                let reader = new FileReader();
                reader.onload = (readResponent) => {
                  try {
                    let result = readResponent.target.result;
                    let resultObj = JSON.parse(result);
                    this.$message.warning(resultObj.message);
                  } catch (error) {
                    let ANode = document.createElement('a');
                    ANode.style.display = 'none';
                    ANode.href = URL.createObjectURL(blob);
                    ANode.download = '薪火计划人员信息.xls';
                    document.body.appendChild(ANode);
                    ANode.click();
                    document.body.removeChild(ANode);
                    window.URL.revokeObjectURL(ANode.href);
                  }
                };
                reader.readAsText(blob);
              } else {
                this.$message.warning('导出失败');
              }
              this.loading = false;
            })
            .catch(() => {
              this.$mesage.warning('导出失败');
              this.loading = false;
            });
        })
        .catch(() => {
          this.loading = false;
        });
    },

在请求api.js中

//导出
export function get_salary_fire_user_page(params) {
  return api.post(
    'https://dspmicrouag.shupian.cn/crm-middle-pc/api/crisps-crm/service/get_salary_fire_user_page.export',
    params,
    {},
    true,
  );
}

api 请求拦截

/**
 * axios请求封装
 * @author chenmb
 * @since 2020/11/12
 */
import Vue from 'vue';
import axios from 'axios';
import { sign } from '@fe/common';
import CONFIG from '@/config';
import store from 'storejs';
import router from '@/router';

// 支持的方法
const methods = ['get', 'head', 'post', 'put', 'delete', 'options', 'patch', 'form'];
const paramsMethods = ['get', 'delete'];

// 添加请求前缀
const API_PREFIX = '/api';

// 允许携带cookie
axios.defaults.withCredentials = true;

class Api {
  constructor() {
    methods.forEach(
      (method) =>
        (this[method] = (path, data = {}, headers = {}, isFile) =>
          new Promise((resolve, reject) => {
            this.doFetch(method, path, data, headers, resolve, reject, isFile);
          })),
    );
  }

  doFetch(method, path, data, headers, resolve, reject, isFile = false) {
  //下载文件，后端如果返回的是二进制数据，需要将responseType设置为blob
    axios.defaults.responseType = isFile ? 'blob' : 'text';
    let fileConfig = {};
    const isForm = method === 'form';
    const formData = isForm ? new FormData() : null;
    //上传，使用form方法上传
    if (isForm) {
      if (data && data.length > 0) {
        const paths = [];
        data.forEach((file) => {
          formData.append('file', file);
          paths.push(file.title);
        });
        formData.append('paths', paths.toString(','));
      } else {
        if (data.file instanceof File) {
          fileConfig = {
            onUploadProgress: function (e) {
              if (e.total > 0) {
                e.percent = (e.loaded / e.total) * 100;
              }
              data.onProgress(e);
            },
          };
          formData.append('file', data.file, data.file.name);
        } else {
          const dataKeys = Object.keys(data);
          for (const key of dataKeys) {
            formData.append(key, data[key]);
          }
        }
      }
    }
    const token = store.get('token') || undefined;
    // 签名
    const signData = sign({
      method,
      rawData: data,
      sysCode: CONFIG.SYS_CODE,
      secret: CONFIG.SECRET,
      token: token,
    });
    const config = {
      headers: {
        'Content-Type': isForm ? 'multipart/form-data' : 'application/json',
        ...headers,
        ...signData,
      },
    };
    data = paramsMethods.indexOf(method) !== -1 ? { params: data, ...config } : data;
    const _path = path.indexOf('http') === 0 ? path : `${API_PREFIX}${path}`;
    axios[isForm ? 'post' : method](
      _path,
      isForm ? formData : data,
      Object.assign({}, config, fileConfig),
    )
      .then(({ data }) => {
        resolve(data);
        if (data.code === 5223) {
          Vue.prototype.$mainService?.logout();
          if (!window.SP_MICRO_FE) {
            router.push('/login');
          }
        }
      })
      .catch(async (error) => {
        reject(error);
      });
  }
}

const api = new Api();

export default api;