前端实现一个导出表格的功能

前端实现一个导出表格的功能

---

前言

导出一般是属于后端的功能，前端只负责下载，因为当数据更多更复杂时前端导出会卡顿，后端更快。

一、前端导出

1.调用后台的page接口组装数据
//导出问题反馈记录

function exportExcel() {
  let paramter = {
    current: 1,
    size: 3000
  };
  getPageApi(Object.assign(data.query, paramter)).then(
    response => {
      let exportList: { [propName: string]: any }[] = response.data.records;
      exportList.forEach(el => {
        el.fbType = getLabelByValue(fbTypeOption, el.fbType); //此处时处理label和value的函数
        el.status = getLabelByValue(statusOption, el.status);
      });
      const viewModel = { projects: exportList };
      renderExcel(
        "./excel/table/template.xlsx", //文件路径
        viewModel, //数据
        "问题记录"  //表格名称
      );
    }
  );
}

2. 导入的文件一般放在public目录下
我这里在public中建了一个文件夹excel
3.导入模板的格式

第一行时表格名称；第二行时表格字段必须按格式写 ##project.deviceCode;后面的带上。

二、后端导出

1.调用后台的导出接口

async function exportDevice(params: PageParams) {
  await getDataForExportExcelApi(
    Object.assign(data.query, params, { size: 3000 })
  )
    .then(response => {
      // 创建a标签
      let aLabel = document.createElement("a");
      aLabel.setAttribute(
        "href",
        URL.createObjectURL(
          new Blob([response], { type: "application/x-excel" })
        )
      );
      aLabel.setAttribute("download", "device.xlsx");
      aLabel.click();
    })
    .catch(err => {
      console.error(err);
    });
}

2.处理乱码

（1）注意excel是二进制的文件，接口需要特殊处理
excel，word，图片等需要这样处理

const requestImageConfig: PureHttpRequestConfig = {
  beforeRequestCallback: request => {
    request.responseType = "blob"; //需要设置文件的响应类型为blob
    // request.timeout = 30000;
    request.headers["token"] = $token;
  }
};

（2）接口定义

export const getForExportExcelApi = (
  params: PageParams
): Promise<any> => {
  return http.request(
    "get",
    "/admin/lot-dev/pageForExportExcel",
    { params },
    requestImageConfig
  );
};

总结

导出excel是很常用的功能，尽量后端实现导出，如果表格很规范，而且数据量和字段量比较少，前端的方法也可以。