uniapp 如何导出excel表格

在uniapp中如何将数据导出为Excel表格？需要用到哪些插件或方法？能否提供一个具体的代码示例？导出的Excel文件能否自定义样式和表头？在H5和App端都能正常使用吗？

2 回复

在uniapp中导出Excel，可以使用第三方插件如 xlsx 库。步骤如下：

  1. 安装 xlsx 库：npm install xlsx。
  2. 引入库：import XLSX from 'xlsx'。
  3. 创建数据并生成工作簿，使用 XLSX.utils.book_new() 和 XLSX.utils.json_to_sheet(data)。
  4. 导出文件：调用 uni.downloadFile 和 uni.saveFile 保存到本地。

注意：H5端可直接下载，App端需使用文件系统保存。


在 UniApp 中导出 Excel 表格，通常需要借助第三方库或插件来实现，因为 UniApp 本身不提供直接导出 Excel 的功能。以下是两种常用方法，包括代码示例：

方法一：使用 xlsx 库（适用于 H5 和小程序）

  1. 安装 xlsx 库：
    在项目根目录运行命令安装：

    npm install xlsx

  2. 代码示例：
    在 UniApp 页面中引入 xlsx 并导出数据为 Excel 文件：

    import XLSX from 'xlsx';

export default {
  methods: {
    exportToExcel() {
      // 示例数据
      const data = [
        ['姓名', '年龄', '城市'],
        ['张三', 25, '北京'],
        ['李四', 30, '上海']
      ];

      // 创建工作簿和工作表
      const ws = XLSX.utils.aoa_to_sheet(data);
      const wb = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');

      // 导出为 Excel 文件
      XLSX.writeFile(wb, 'example.xlsx');
    }
  }
}

    注意：

    • 在 H5 环境中，XLSX.writeFile 会直接触发浏览器下载。
    • 在小程序中，需使用 uni.downloadFile 和 uni.openDocument 实现文件保存和打开，但需处理兼容性。

方法二：使用 UniApp 插件（如 uni-file-picker 配合后端）

如果数据量较大或需要复杂格式，建议通过后端生成 Excel 文件，前端调用接口下载：

  1. 前端发送请求：
    uni.request({
  url: 'https://your-api.com/export-excel',
  method: 'POST',
  responseType: 'blob', // 重要：指定响应类型为二进制
  success: (res) => {
    // 保存文件到本地
    const filePath = `${uni.env.USER_DATA_PATH}/export.xlsx`;
    uni.writeFile({
      path: filePath,
      data: res.data,
      success: () => {
        uni.openDocument({
          filePath: filePath,
          showMenu: true // 显示操作菜单
        });
      }
    });
  }
});

注意事项：

  • 平台兼容性：H5 支持直接下载，小程序和 App 需依赖原生 API 保存文件。
  • 数据量：大量数据导出建议使用后端服务，避免前端性能问题。
  • 权限：在 App 中需配置文件存储权限。

根据需求选择合适的方法，优先测试目标平台的兼容性。

回到顶部