excel下载后的角路由问题

Question

bounty到期在5天内。该问题的答案有资格获得+ 50声望赏金。neo正在寻找规范答案。

如果我不下载excel文件，但如果我下载文件然后使用路由，则失败，我的路由有效。

似乎有问题的线是这条线：

 **const Excel = require('exceljs');**

此行是下载excel的内部函数。如果我单击“后退”按钮，当前页面和上一页都显示在新页面上，并且未单击OnInit和构造函数

<a  (click)="btnClick()" class="btn btn-default cancel-btn">Back</a>

btnClick() {
    this.router.navigateByUrl('/newPage');
};

我也尝试过，

<a  [routerLink]="['/newPage']" class="btn btn-default cancel-btn">Back</a>

但是在新页面上，我可以看到两个页面的选择器，

 <oldPage></oldPage>
 <newPage></newPage>

然后我尝试了这个：

 I have tried ng Zone code too.

  btnClick() {
    if (this.inTheZone){
       this.inTheZone = false;
       this.ngZone.run(() => {
      this.router.navigate(['/newPage']);
    })
  }
};

我的路由代码是这样的：

const routes: Routes = [
{
  path: 'newPage', component: newPageComponent, data: { title: 'NewPage' }
}]

[请任何人帮助。

Answer 1

[Fmerco所说的，您可能遇到的问题是您使用的是require，这会使您的应用程序崩溃。

在Angular中，我们使用TypeScript，因此至少可以使用ES2015。

这意味着我们使用ES2015中的模块系统，该系统使用import作为关键字从模块中检索信息。

import { Workbook } from 'exceljs';

并且，如果要将文件推送到客户端，则不能使用重定向（因为那样会破坏SPA概念，甚至可能破坏路由），因此您可能需要使用file-saver之类的库。

workbook.xlsx.writeBuffer().then((data) => {
      let blob = new Blob([data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
      fs.saveAs(blob, 'CarData.xlsx');
});

您可以在https://www.ngdevelop.tech/export-to-excel-in-angular-6/中找到一个很好的教程，并在https://github.com/exceljs/exceljs中找到一个示例（已更新为Angular 8）。