在Angular中需要时加载库

2024-05-20 • 问答

在Angular 8应用中，我的组件有一个表，可以将其导出到excel文件。我正在为此使用库xlsx。 webpack-bundle-analyzer显示xlsx库使用了我总块大小的65％。

由于很少使用导出功能，因此我想将其从初始捆绑包中排除，以提高大多数用户的性能，并在用户单击“导出”时加载它，而他们需要等待仍然下载。

这是我目前拥有的：

import * as xlsx from 'xlsx';
...
exportToExcel(filename,worksheet) {
   const ws: xlsx.WorkSheet = xlsx.utils.json_to_sheet(this.tableData);
   const wb: xlsx.WorkBook = xlsx.utils.book_new();
   xlsx.utils.book_append_sheet(wb,ws,worksheet);
   xlsx.writeFile(wb,filename+'.xlsx');
}

我会想象这样的事情：

exportToExcel(filename,worksheet) {
   loadScript('/scripts/xlsx.js').then(xlsx => {
      const ws: xlsx.WorkSheet = xlsx.utils.json_to_sheet(this.tableData);
      const wb: xlsx.WorkBook = xlsx.utils.book_new();
      xlsx.utils.book_append_sheet(wb,worksheet);
      xlsx.writeFile(wb,filename+'.xlsx');
   })       
}

有没有办法做到这一点？或者您还有其他建议吗？

类似的事情可能会有所帮助：

exportExcel() {
        import("xlsx").then(xlsx => {
            const worksheet = xlsx.utils.json_to_sheet(this.products);
            const workbook = { Sheets: { 'data': worksheet },SheetNames: ['data'] };
            const excelBuffer: any = xlsx.write(workbook,{ bookType: 'xlsx',type: 'array' });
            this.saveAsExcelFile(excelBuffer,"products");
        });
}

来自PrimeNg - Export

您可以如下所示按角度延迟加载任何脚本库。

1 。指定要延迟加载的特定脚本，而angular只会输出捆绑包，并且不会将其添加到index.html。

而不是angular.json中的简单字符串，

"scripts": [
        "src/some-script.js"
      ]

您可以通过以对象格式指定脚本来执行此操作。如下。

"scripts": [
  {
    "input": "path/to/your/lazy-script.js","lazy": true,"bundleName": "lazy-loaded-script"
  },]

注意：还必须指定输出名称（bundleName），以便以后可以引用它。如果您不这样做，Angular CLI将随机生成一个捆绑软件名称，该名称将在每次构建时更改。

2 。要加载脚本，我们首先创建一个新方法loadExternalScript（scriptURL），该方法将返回如下所示的Promise。

loadExternalScript(scriptURL:string) {
  return new Promise(resolve => {
    const scriptElement = document.createElement('script');
    scriptElement.src = scriptUrl;
    scriptElement.onload = resolve;
    document.body.appendChild(scriptElement);
  });
}

调用如下所示的方法来加载脚本：

this.loadExternalScript('url/to/your/scripts').then(() => {}).catch(() => {});

在Angular中需要时加载库

iCMS 回答：在Angular中需要时加载库

大家都在问