0

在 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, ws, worksheet);
      xlsx.writeFile(wb, filename+'.xlsx');
   })       
}

有没有办法做到这一点？或者你有什么其他建议吗？

4

2 回答 2

0

这样的事情可能会有所帮助：

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 - 出口

于 2020-09-09T09:08:07.113 回答
0

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

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(() => {});
于 2020-09-09T09:28:57.307 回答