Mockjs：导致 Excel 文件导出后打不开的罪魁祸首

前端

2023-11-01 22:21:38

解决 Mockjs 导致 Excel 文件导出无法打开的难题

什么是 Mockjs？

Mockjs 是一款出色的数据模拟工具，在开发和测试过程中广泛使用。它可以帮助你快速生成大量逼真的数据，用于测试你的应用程序或构建复杂的演示。

问题：导出 Excel 文件后无法打开

最近，在使用 Mockjs 模拟数据时，我遇到了一个棘手的难题：导出为 Excel 文件后，文件却无法打开。经过一番排查，罪魁祸首竟然指向了 Mockjs。

原因：Mockjs 包装了 request 对象

Mockjs 是一款出色的数据模拟工具，但此次问题却暴露了 Mockjs 的一个潜在陷阱。当 Mockjs 包装了 request 对象时，就会导致导出 Excel 文件后打不开。

当 Mockjs 包装 request 对象时，会导致导出时缺少了关键的 header 信息。Excel 无法正确解析这些文件，因此无法打开。

解决方案：解包 request 对象

要解决此问题，可以采用以下步骤：

检查 request 对象： 使用 console.log() 检查 request 对象，确认它是否被 Mockjs 包装。如果被包装，则需要在导出前对其进行解包。
解包 request 对象： 使用 request.unmock() 方法对 request 对象进行解包，恢复其原始状态。
导出 Excel 文件： 对解包后的 request 对象进行 Excel 文件导出操作。

代码示例：

import Mock from 'mockjs';
import { request } from 'umi';

Mock.mock('/api/export', {
  'data|1-10': [
    {
      name: '@cname',
      age: '@integer(1, 100)',
    },
  ],
});

async function exportExcel() {
  const response = await request('/api/export', {
    method: 'GET',
    responseType: 'blob',
  });
  if (response.status === 200) {
    // 检查 request 对象是否被 Mockjs 包装
    if (response.request.unmock) {
      // 解包 request 对象
      response.request.unmock();
    }
    // 导出 Excel 文件
    const url = window.URL.createObjectURL(new Blob([response.data]));
    const link = document.createElement('a');
    link.href = url;
    link.download = 'data.xlsx';
    link.click();
    window.URL.revokeObjectURL(url);
  }
}