Ionic 6 Angular 14中使用xlsx库导出Excel无法下载求助

我需要在Ionic 6 Angular 14应用中实现数据导出为Excel并下载的功能，尝试了以下代码，但Excel文件始终无法下载。请帮忙排查是否有遗漏的步骤或配置。

用户提供的代码：

import { Component } from '@angular/core';
import { environment } from '../../environments/environment';
import { ModalController } from '@ionic/angular';
import * as XLSX from 'xlsx';

@Component({
  selector: 'app-exporttoexcel',
  templateUrl: 'exporttoexcel.page.html',
  styleUrls: ['exporttoexcel.page.scss'],
})
export class ExportToExcelPage {

  data:any = [];

  constructor(private modalCtrl: ModalController) {
    this.data = [{ "id": "5001", "type": "None" },
    { "id": "5002", "type": "Glazed" },
    { "id": "5005", "type": "Sugar" },
    { "id": "5003", "type": "Chocolate" },
    { "id": "5004", "type": "Maple" }];
  }

  ngOnInit(){
    
  }

  ExportToExcel(){
    this.getExcelReport()
  }

  async getExcelReport() {
      var filename = "test";
      const ws: XLSX.WorkSheet = XLSX.utils.json_to_sheet(this.data);
      const wb: XLSX.WorkBook = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(wb, ws, filename);
      XLSX.writeFile(wb, filename + '.xlsx');
    }

}

排查与解决步骤 #

1. 确认 xlsx 库的安装与兼容性 #

• 先确保已正确安装库：

  npm install xlsx --save
  

• 若使用最新版 xlsx 出现API兼容问题，可降级到稳定版本（如 ^0.18.5），避免Angular 14与高版本库的适配问题。

2. 移动端环境的文件操作限制 #

Ionic的WebView环境不支持浏览器原生的XLSX.writeFile下载逻辑，需使用原生文件插件处理：

• 安装依赖插件：

  npm install @ionic-native/file @ionic-native/file-opener
  ionic cap sync
  

• 修改导出逻辑为原生文件系统操作：

  import { File } from '@ionic-native/file/ngx';
  import { FileOpener } from '@ionic-native/file-opener/ngx';
  
  // 注入插件到构造函数
  constructor(
    private modalCtrl: ModalController,
    private file: File,
    private fileOpener: FileOpener
  ) {}
  
  async getExcelReport() {
    const filename = "test.xlsx";
    const ws: XLSX.WorkSheet = XLSX.utils.json_to_sheet(this.data);
    const wb: XLSX.WorkBook = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
    
    // 生成二进制文件数据
    const wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'array' });
    
    try {
      // 保存文件到应用可访问目录
      const filePath = await this.file.writeFile(
        this.file.externalDataDirectory || this.file.dataDirectory,
        filename,
        new Blob([wbout], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' }),
        { replace: true }
      );
      
      // 调用系统应用打开导出的Excel
      await this.fileOpener.open(filePath.nativeURL, 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet');
    } catch (err) {
      console.error('文件操作失败:', err);
    }
  }
  

3. 浏览器环境的下载限制 #

• 确保导出函数由用户主动交互触发（比如按钮点击），现代浏览器会拦截非用户操作触发的下载请求。
• 检查浏览器是否禁用了下载弹窗，或阻止了当前域名的下载权限。

4. Angular 配置优化 #

在tsconfig.json中添加配置，避免编译时对xlsx库的错误优化：

"compilerOptions": {
  "allowSyntheticDefaultImports": true
}

5. 移动端权限配置 #

• Android：在AndroidManifest.xml中添加文件访问权限：

  <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
  <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
  

• iOS：在Info.plist中添加权限说明：

  <key>NSDocumentDirectoryUsageDescription</key>
  <string>需要访问文档目录以保存导出的Excel文件</string>
  

内容的提问来源于stack exchange，提问作者Srinivasan M