Javascript 使用ExcelJS导出文件时出错-Error Uncaught（承诺中）：TypeError:u.readFile不是函数_Javascript_Angular_Typescript_Export To Excel_Exceljs

Javascript 使用ExcelJS导出文件时出错-Error Uncaught（承诺中）：TypeError:u.readFile不是函数

javascript angular typescript

Javascript 使用ExcelJS导出文件时出错-Error Uncaught（承诺中）：TypeError:u.readFile不是函数,javascript,angular,typescript,export-to-excel,exceljs,Javascript,Angular,Typescript,Export To Excel,Exceljs,我试图在Angular 10中使用ExcelJS在客户端导出一个文件单击“导出”按钮时，在浏览器控制台中出现以下错误 core.js:4197 ERROR Error: Uncaught (in promise): TypeError: u.readFile is not a function TypeError: u.readFile is not a function at exceljs.min.js:3 at new ZoneAwarePromise (zone-eve

我试图在Angular 10中使用ExcelJS在客户端导出一个文件

单击“导出”按钮时，在浏览器控制台中出现以下错误

core.js:4197 ERROR Error: Uncaught (in promise): TypeError: u.readFile is not a function
TypeError: u.readFile is not a function
    at exceljs.min.js:3
    at new ZoneAwarePromise (zone-evergreen.js:960)
    at T (exceljs.min.js:3)
    at exceljs.min.js:3
    at f (exceljs.min.js:17)
    at Generator._invoke (exceljs.min.js:17)
    at Generator.next (exceljs.min.js:17)
    at i (exceljs.min.js:3)
    at s (exceljs.min.js:3)
    at exceljs.min.js:3
    at resolvePromise (zone-evergreen.js:798)
    at resolvePromise (zone-evergreen.js:750)
    at zone-evergreen.js:860
    at ZoneDelegate.invokeTask (zone-evergreen.js:399)
    at Object.onInvokeTask (core.js:27419)
    at ZoneDelegate.invokeTask (zone-evergreen.js:398)
    at Zone.runTask (zone-evergreen.js:167)
    at drainMicroTaskQueue (zone-evergreen.js:569)
    at ZoneTask.invokeTask [as invoke] (zone-evergreen.js:484)
    at invokeTask (zone-evergreen.js:1621)

app.component.html

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> -->

  <!-- serial must : first jquery then popper then bootstrap -->
  <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script> -->


</head>

<body>

    <div class="row">

      <div class="col-md-2">
        <button class="btn btn-secondary" (click)='exportAsExcelFile()'>Download as Excel</button>
      </div>

    </div>

</body>

</html>


引导示例
以Excel格式下载

应用程序组件.ts

import { Component } from '@angular/core';
import * as Excel from 'exceljs';
import * as fs from 'file-saver';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  title = 'resttest10';
    
      async exportAsExcelFile(): Promise<void> {
        // Create workbook and worksheet
        const workbook = new EXCEL.Workbook();
        const worksheet = workbook.addWorksheet('Export_Data');
        const logo = workbook.addImage({
          filename: '/path/to/image',
          extension: 'gif',
        });
        worksheet.addImage(logo, 'A1:B3');
        worksheet.mergeCells('A1:B3');
        // Blank Row
        worksheet.addRow([]);
       // Data
        worksheet.addRow({ id: 1, name: 'John Doe', dob: new Date(1970, 1, 1) });
        worksheet.addRow({ id: 2, name: 'Jane Doe', dob: new Date(1965, 1, 7) });
    
        // Generate Excel File with given name
        console.log('writing to file');
        await workbook.xlsx.writeBuffer().then((data: any) => {
          console.log('buffer');
          const blob = new Blob([data], {
            type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
          });
          console.log('Saving File');
          fs.saveAs(blob, 'Export_Data' + new Date().getHours() + ':'
            + new Date().getMinutes() + ':' + new Date().getSeconds() + '.xlxs');
        });
      }
    }

从'@angular/core'导入{Component}；
从“exceljs”导入*作为Excel；
从“文件保护程序”导入*作为fs；
@组成部分({
选择器：'应用程序根'，
templateUrl:“./app.component.html”，
样式URL:['./app.component.css']
})
导出类AppComponent{
标题='resttest10'；
异步exportAsExcelFile（）：承诺{
//创建工作簿和工作表
常量工作簿=新建EXCEL.工作簿（）；
const-worksheet=workbook.addWorksheet（'Export_Data'）；
const logo=workbook.addImage({
文件名：'/path/to/image'，
扩展名：“gif”，
});
工作表.添加图像（徽标“A1:B3”）；
工作表.合并单元格（'A1:B3'）；
//空白行
工作表.addRow（[]）；
//资料
工作表.addRow（{id:1，名称：'johndoe'，dob:newdate（1970,1,1）}）；
工作表.addRow（{id:2，名称：'Jane Doe'，dob:new Date（1965，1，7）}）；
//生成具有给定名称的Excel文件
log（“写入文件”）；
等待工作簿.xlsx.writeBuffer（）。然后（（数据：any）=>{
log（'buffer'）；
const blob=新blob（[data]{
键入：“application/vnd.openxmlformatsofcedocument.spreadsheetml.sheet”
});
log（“保存文件”）；
fs.saveAs（blob，'Export_Data'+new Date（）.getHours（）+'：'
+新日期（）.getMinutes（）+'：'+新日期（）.getSeconds（）+'.xlxs'）；
});
}
}

是否尝试将图像添加为base64编码字符串

const myBase64Image=“数据：image/png；base64，iVBORw0KG…”

和

workbook.addImage（{base64:myBase64Image，扩展名：'png'}）。我已尝试删除整个图像部分，但仍然出现相同的错误。因此，我添加了控制台日志以查看它的运行情况<代码>写入文件

是出错前的最后一个日志。如果在

工作簿.xlsx.writeBuffer（）之前添加等待
，会发生什么情况？所以：wait workbook.xlsx.writeBuffer（）。然后（…）
也尝试过，仍然是相同的错误。