工作笔记总结 01

工具类之导出 Excel 封装

封装导出 Excel 函数（工作使用）； 注意点：BlobType有没有别的类型，有的话需要自己添加。

// utilFuncs.ts 文件下
export enum BlobType {
  'ms-excel' = 'application/vnd.ms-excel',
  'officedocument' = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
}

export const exportBlobFile: { (data: any, type: BlobType, filename?: string): void } = (data, type, filename = '') => {
  if (data) {
    const aLink = document.createElement('a');
    const blob = new Blob([(data as any).data], {
      type,
    });
    const evt = document.createEvent('HTMLEvents');
    evt.initEvent('click', false, false); //initEvent 不加后两个参数在FF下会报错
    aLink.download = `${filename}导出数据${new Date().toDateString()}.xlsx`;
    const href = URL.createObjectURL(blob);
    aLink.href = href;
    aLink.dispatchEvent(evt);
    aLink.id = 'alink';
    aLink.click();
    //延迟2秒关闭系统提示
    setTimeout(() => {
      notification.destroy(); //关闭系统提示
    }, 1000);
    URL.revokeObjectURL(href);
  }
};

函数应用示例：

// index.tsx
import { exportBlobFile, BlobType } from '@/utils/utilFuncs';

// exportData 是文件流数据
exportBlobFile(exportData, BlobType.officedocument);

关于文件 API 的概念和基本使用

文件 API 使得 web 应用可以访问文件和其中的内容。当用户提供文件时，Web 应用可以通过使用件 <input> 元)或拖放来访问它们。以这种方式提供的文件集被表示为 FileList 对象，这使得 web 应用能够检索单个 File 对象。反过来，File 对象提供对元数据的访问，如文件的名称、大小、类型和最后修改日期。可以将 File对象传递给 FileReader对象以访问文件的内容。

Blob ：代表“二进制大对象”（类似于文件的不可变的原始数据对象）；Blob可以作为文本或二进制数据被读取，或者转换为 ReadableStream 其方法可以用来处理数据。

File ：提供文件的信息并允许网页中的 JavaScript 代码访问其中的内容。

FileList ：由 HTML<input>元素的 files 属性返回；这让你可以访问用 <input type="file"> 元素选择的文件列表。

FileReader ：使 web 应用能够异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob对象来指定要读取的文件或数据。

FileReaderSync ：使 web 应用能够同步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象来指定要读取的文件或数据。

URL.createObjectURL() ：创建一个可用于获取 File 或 Blob 对象的 URL。

URL.revokeObjectURL() ： 释放先前通过调用 URL.createObjectURL() 创建的现有对象 URL。

• @Title: 工作笔记总结 01
• @Content: 工作笔记总结
• @Autor: ling.wang
• @WritingDate: 2022-06-02