角:无法使用ExcelJS导出Excel-错误TS2307:找不到模块“流"-错误TS2503:找不到命名空间"NodeJS"

人气:1,019 发布:2022-10-16 标签: javascript typescript export-to-excel angular exceljs

问题描述

我曾尝试使用 ExcelJS

这是我在VS Code终端中的控制台:

Here is my console in VS Code terminal :

ERROR in node_modules/exceljs/index.d.ts:1398:22 - error TS2307: Cannot find module 'stream'.

1398  read(stream: import('stream').Stream): Promise<Workbook>;
                          ~~~~~~~~
node_modules/exceljs/index.d.ts:1424:23 - error TS2307: Cannot find module 'stream'.

1424  write(stream: import('stream').Stream, options?: Partial<XlsxWriteOptions>): Promise<void>;
                           ~~~~~~~~
node_modules/exceljs/index.d.ts:1511:22 - error TS2307: Cannot find module 'stream'.

1511  read(stream: import('stream').Stream, options?: Partial<CsvReadOptions>): Promise<Worksheet>;
                          ~~~~~~~~
node_modules/exceljs/index.d.ts:1531:23 - error TS2307: Cannot find module 'stream'.

1531  write(stream: import('stream').Stream, options?: Partial<CsvWriteOptions>): Promise<void>;
                           ~~~~~~~~
node_modules/exceljs/index.d.ts:1828:19 - error TS2307: Cannot find module 'stream'.

1828            stream: import('stream').Stream;
                               ~~~~~~~~
node_modules/exceljs/index.d.ts:1872:34 - error TS2503: Cannot find namespace 'NodeJS'.

1872             dictionary: Buffer | NodeJS.TypedArray | DataView | ArrayBuffer; // deflate/inflate only, empty dictionary by default                                      ~~~~~~

这是 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)='downloadExcel()'>Download as Excel</button>
      </div>

    </div>

</body>

</html>

这是 app.component.ts

import { Component } from '@angular/core';
import * as Excel from 'exceljs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'resttest10';

  async downloadExcel() {

    const date = new Date().toISOString().slice(0, 10).split('-').reverse().join('/');
    console.log(date);
    const workbook = new Excel.Workbook();
    const worksheet = workbook.addWorksheet('My Sheet');

    worksheet.columns = [
      { header: 'Id', key: 'id', width: 10 },
      { header: 'Name', key: 'name', width: 32 },
      { header: 'D.O.B.', key: 'dob', width: 15, }
    ];

    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) });

    // save under export.xlsx
    await workbook.xlsx.writeFile('export.xlsx');

    // load a copy of export.xlsx
    const newWorkbook = new Excel.Workbook();
    await newWorkbook.xlsx.readFile('export.xlsx');

    const newworksheet = newWorkbook.getWorksheet('My Sheet');
    newworksheet.columns = [
      { header: 'Id', key: 'id', width: 10 },
      { header: 'Name', key: 'name', width: 32 },
      { header: 'D.O.B.', key: 'dob', width: 15, }
    ];
    await newworksheet.addRow({ id: 3, name: 'New Guy', dob: new Date(2000, 1, 1) });

    await newWorkbook.xlsx.writeFile('export2.xlsx');

    console.log('File is written');
  }
}

我不明白为什么它要寻找流模块(更有趣的是-找不到命名空间'NodeJS'-我可以无错误地运行所有其他有角度的NodeJS项目)

I don't get it why it is looking for stream module (and more funny thing - Cannot find namespace 'NodeJS' - I can run all other angular NodeJS projects without error)

请指出为什么我不能导出excel.

Please point out why i can't export excel.

推荐答案

您不能在客户端直接写文件.该方法是要在nodejs的后端使用的.如果您期望在客户端下载此文件.您的代码应类似于:-

You can't write directly a file on client side. that method is mean to be used on backend side in nodejs. if your expectation is download this file on client side. your code should be like :-

import { Component } from "@angular/core";
import * as Excel from "exceljs";
@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  title = "resttest10";

  async downloadExcel() {
    const date = new Date()
      .toISOString()
      .slice(0, 10)
      .split("-")
      .reverse()
      .join("/");
    console.log(date);
    const workbook = new Excel.Workbook();
    const worksheet = workbook.addWorksheet("My Sheet");

    worksheet.columns = [
      { header: "Id", key: "id", width: 10 },
      { header: "Name", key: "name", width: 32 },
      { header: "D.O.B.", key: "dob", width: 15 }
    ];

    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) });

    workbook.xlsx.writeBuffer().then((data: any) => {
      console.log("buffer");
      const blob = new Blob([data], {
        type:
          "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
      });
      let url = window.URL.createObjectURL(blob);
      let a = document.createElement("a");
      document.body.appendChild(a);
      a.setAttribute("style", "display: none");
      a.href = url;
      a.download = "export.xlsx";
      a.click();
      window.URL.revokeObjectURL(url);
      a.remove();
    });
  }
}

181