前段中关于web端的表格导出功能

后端接口采用get请求

第一建公共文件夹下建公共文件，exelConfig.js，需要在哪里用引用即可。

/**
 * @description 模拟a标签下载
 * @param blobUrl url地址
 * @param fileName 文件名称
 */
export function download(blobUrl, fileName) {
  const a = document.createElement("a");
  a.download = fileName;
  a.href = blobUrl;
  a.click();
}

function formatParams(url, query){
  return Object.keys(query).reduce((res, key, index) => !index ? res += `?${key}=${query[key]}` : res += `&${key}=${query[key]}`, url)
}

/**
 * @description 导出文件
 * @param url 后端url地址
 * @param fileName 导出文件名称；如"管网台账.xlsx"
 */
export function exportFile(url, fileName, query) {
  const req = new XMLHttpRequest();
  req.open("get", formatParams(url, query), true);
  req.responseType = "blob";
  req.setRequestHeader("Content-Type", "application/json");
  req.setRequestHeader("Token", sessionStorage.getItem('minitk'));
  req.onload = () => {
    const data = req.response;
    const blob = data //new Blob([data]);
    const blobUrl = window.URL.createObjectURL(blob);
    download(blobUrl, fileName);
  };
  req.send()
  
}

注意这里的fileName如果命名为“xx.xlsx”,有些电脑下载下来打不开，可以直接命名为“xx”即可。

后端采用post请求

第一建公共文件夹下建公共文件，exelConfig.js，到时候引用即可

/**
 * @description 模拟a标签下载
 * @param blobUrl url地址
 * @param fileName 文件名称
 */
export function download(blobUrl, fileName) {
  const a = document.createElement("a");
  a.download = fileName;
  a.href = blobUrl;
  a.click();
}



/**
 * @description 导出文件
 * @param url 后端url地址
 * @param fileName 导出文件名称；如"管网台账.xlsx"
 */
export function exportFile(url, fileName, query) {
  const req = new XMLHttpRequest();
  req.open("post", url, true);
  req.responseType = "blob";
  req.setRequestHeader("Content-Type", "application/json");
  req.setRequestHeader("Token", sessionStorage.getItem('minitk'));
  req.onload = () => {
    const data = req.response;
    const blob = new Blob([data]);
    const blobUrl = window.URL.createObjectURL(blob);
    download(blobUrl, fileName);
  };
  
  if (query) {
   req.send(JSON.stringify(query));
 } else {
     req.send();
  }
}