Angular 15中URL.createObjectURL不是函数的问题求助

问题描述 #

在Angular 15应用中使用FileSaver工具保存生成的CSV文件时，持续触发以下错误：

TypeError: i.createObjectURL is not a function
at g (FileSaver.min.js:1:1642)
at FileSaverService.save (ngx-filesaver.mjs:38:15)
at ExportService.saveAsFile (export.service.ts:103:29)
at ExportService.exportToCsv (export.service.ts:160:10)
at Object.next (main.component.ts:193:32)
at ConsumerObserver.next (Subscriber.js:91:33)
at SafeSubscriber._next (Subscriber.js:60:26)
at SafeSubscriber.next (Subscriber.js:31:18)
at map.js:7:24
at OperatorSubscriber._next (OperatorSubscriber.js:13:21)

尝试过两种实现方式，均出现相同错误：

方式1：使用ngx-filesaver服务 #

private saveAsFile(buffer: any, fileName: string, fileType: string): void {
    const data: Blob = new Blob([buffer], { type: fileType });
    this.fileSaverService.save(data, fileName);
}

方式2：直接创建下载链接 #

private saveAsFile(buffer: any, fileName: string, fileType: string): void {
    const data: Blob = new Blob([buffer], { type: fileType });
    const link = document.createElement('a');
    link.href = URL.createObjectURL(data);
    link.download = fileName;
    link.click();
}

解决方案 #

1. 检查TypeScript配置的DOM库 #

Angular 15默认tsconfig.json可能缺失DOM全局对象的完整支持，导致URL.createObjectURL无法被识别。在compilerOptions.lib数组中确保包含"DOM"：

{
  "compilerOptions": {
    "lib": [
      "ES2022",
      "DOM",
      "DOM.Iterable"
    ]
    // 其他配置项...
  }
}

2. 限制代码仅在浏览器环境执行 #

URL.createObjectURL是浏览器专属API，若应用启用了服务端渲染（SSR），在Node.js环境执行会报错。需添加环境判断：

private saveAsFile(buffer: any, fileName: string, fileType: string): void {
    // 确认处于浏览器环境
    if (typeof window !== 'undefined' && typeof URL !== 'undefined') {
        const data: Blob = new Blob([buffer], { type: fileType });
        const link = document.createElement('a');
        link.href = URL.createObjectURL(data);
        link.download = fileName;
        link.click();
        // 释放URL对象，避免内存泄漏
        URL.revokeObjectURL(link.href);
    }
}

3. 适配ngx-filesaver版本 #

部分ngx-filesaver版本与Angular 15存在兼容性问题，安装适配的15.x系列版本：

npm install ngx-filesaver@15.0.0

4. 确保Blob对象有效性 #

若保存CSV内容，建议先处理UTF-8编码避免乱码，同时确认输入数据格式正确：

private saveAsFile(csvContent: string, fileName: string): void {
    if (typeof window !== 'undefined' && typeof URL !== 'undefined') {
        // 添加BOM头解决中文乱码
        const utf8Content = new TextEncoder().encode('\uFEFF' + csvContent);
        const data: Blob = new Blob([utf8Content], { type: 'text/csv;charset=utf-8;' });
        const link = document.createElement('a');
        link.href = URL.createObjectURL(data);
        link.download = fileName;
        link.click();
        URL.revokeObjectURL(link.href);
    }
}

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