[JavaScript知识库]react antd Class 组件 点击按钮下载excle文件

工具文件.js：

import saveAs from 'file-saver';

// base64 转 Blob
function dataURLtoBlob(b64Data, contentType) {
 // const bstr =window.atob(b64Data);？ 加个window.
  const bstr = atob(b64Data);
let n = bstr.length;
const u8arr = new Uint8Array(n);
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new Blob([u8arr], {
    type: contentType,
  });
}

// 转成file
function blobToFile(Blob, fileName) {
  Blob.lastModifiedDate = new Date();
  Blob.name = fileName;
  return Blob;
}

export function downLoadFile(base64Data, fileName = "test") {
  // base64Data 是服务器获取到的数据
  const file = blobToFile(dataURLtoBlob(base64Data, 'application/vnd.ms-excel;charset=utf-8'), fileName);
  // 利用FileSaver.js 下载文件为Excel文件
  saveAs(file, fileName);
}


接口：
export async function ExportSerialNumberList(params) {
  return request(Ip + '/api/pes/ExportSerialNumberList', {
    method: 'POST',
    body: params,
  });
}

组件：
import { downLoadFile } from '../../../utils/utils';
import {
  ExportSerialNumberList,
} from '../../../services/waiting';

class:

exportSerialNumberList = debounce(() => {
    ExportSerialNumberList({}).then(res => {
      if (res) {
        downLoadFile(res.FileContent, res.FileName);
      }
    });
  }, 300);
render() {
return (
 <Button onClick={this.exportSerialNumberList} type="primary">
              导出
  </Button>
)
}