前端导出及接口导出总结

第一种通过请求接口导出，一般是表格有分页的情况

/**
 * 导出word或者excle
 * 
 * @param {*} type post/get
 * @param {*} url 请求地址
 * @param {*} name 文件名称 test.xlsx
 * @param {*} data 数据 JSON
 */
export function exportByRequest(type, url, name, data, timeout, _this) {
  let params = {
    method: type,
    url: url,
    responseType: 'blob',
    data: data
  }
  // 是否设置超时时间
  if (timeout) {
    params.timeout = timeout;
  }
  request(params).then(res => {
    let blob = res
    let a = document.createElement("a");
    let url = window.URL.createObjectURL(blob);
    a.href = url;
    a.download = name; //设置文件名称
    a.click();

    //解禁按钮
    if (_this) {
      _this.isExpButton = true;
    }
  })
}

---

第二种是前端直接导出

/**
 * 前端导出表格
 * 
 * @param {*} header表头
 * @param {*} data数据
 * @param {*} filename 文件名称
 */

export function export_json_to_excel({
  multiHeader = [],
  header,
  data,
  filename,
  merges = [],
  autoWidth = true,
  bookType = 'xlsx'
} = {}) {
  /* original data */
  filename = filename || 'excel-list'
  data = [...data]
  data.unshift(header);

  for (let i = multiHeader.length - 1; i > -1; i--) {
    data.unshift(multiHeader[i])
  }

  var ws_name = "SheetJS";
  var wb = new Workbook(),
    ws = sheet_from_array_of_arrays(data);

  if (merges.length > 0) {
    if (!ws['!merges']) ws['!merges'] = [];
    merges.forEach(item => {
      ws['!merges'].push(XLSX.utils.decode_range(item))
    })
  }

  if (autoWidth) {
    /*设置worksheet每列的最大宽度*/
    const colWidth = data.map(row => row.map(val => {
      /*先判断是否为null/undefined*/
      if (val == null) {
        return {
          'wch': 10
        };
      }
      /*再判断是否为中文*/
      else if (val.toString().charCodeAt(0) > 255) {
        return {
          'wch': val.toString().length * 2
        };
      } else {
        return {
          'wch': val.toString().length
        };
      }
    }))
    /*默认以第一行为初始值*/
    let result;
    if (multiHeader.length > 0) {
      // 如果有多级表头，则跳过多级表头，从常规表头开始
      result = colWidth[multiHeader.length];
    } else {
      result = colWidth[0];
    }
    for (let i = multiHeader.length + 1; i < colWidth.length; i++) {
      for (let j = 0; j < colWidth[i].length; j++) {
        if (result[j]['wch'] < colWidth[i][j]['wch']) {
          result[j]['wch'] = colWidth[i][j]['wch'];
        }
      }
    }
    ws['!cols'] = result;
  }

  /* add worksheet to workbook */
  wb.SheetNames.push(ws_name);
  wb.Sheets[ws_name] = ws;
  var dataInfo = wb.Sheets[wb.SheetNames[0]];

  // console.log(dataInfo)
  // 这是表头行的样式
  var tableTitleFont = {
    font: {
      name: '宋体',
      sz: 18,
      color: {
        rgb: "ff0000"
      },
      bold: true,
      italic: false,
      underline: false
    },
    alignment: {
      horizontal: "center",
      vertical: "center"
    },
    fill: {
      fgColor: {
        rgb: "008000"
      },
    },
  };

  var wbout = XLSX.write(wb, {
    bookType: bookType,
    bookSST: false,
    type: 'binary'
  });
  saveAs(new Blob([s2ab(wbout)], {
    type: "application/octet-stream"
  }), `${filename}.${bookType}`);
}

调用举例

const header = ['序号','表头名称1']  
const field = ['index','tableOne']   //对应header的字段
const data = this.formatJson(field, this.formatData(this.currentTableData))
//处理数据；formatData可以处理表格数据比如增加序号或者合计，不需要处理直接传入即可
formatJson(filterVal, jsonData) {
   return jsonData.map(v => filterVal.map(j => v[j]))
},
 formatData: function(data) {
      var list = [],heji = []
      if (data && data.length > 0) {
        for (let i = 0; i < data.length; i++) {
          var obj = {}
          Object.assign(obj, data[i])
          obj.index = i + 1
          obj.addvnm = this.MAP_Sys_Dict_Addvcd[obj.addvcd] || '合计'
          list.push(obj)

          Object.keys(obj).map((key) => {
            heji[key] = (heji[key] || 0) + obj[key]
          })
        }
        heji.addvnm = ''
        heji.index = '合计'
        list.push(heji)
      }
      return list
    }

export_json_to_excel({header: header,data: data,filename: ‘文件名称’ })

还有一点需要注意，export_json_to_excel是在js中暴露然后引用,这样多个文件都引入使用即可