有什么方法可以在 Angular 8 应用程序中使用 CDN 加载 pdfmake 等第三方库？

Question

我在我的 angular 8 项目中使用 pdfmake 库来生成客户端 pdf。我已经安装了 pdfmake 库模块并且工作正常。但是这个第三方库增加了 angular 应用构建大小，如下所示。

为了减小构建大小，我想通过 CDN link 使用 pdfmake 库并动态加载它。

请问有没有什么方法可以在 angular 应用程序中从 CDN 加载第三方库？

Answer 1

您可以按照我在 link 中指定的方式使用动态导入。 Angular 是使用 Webpack 构建的，它非常聪明地锻炼 import() 属于它。

我建议创建一种 LibraryResolverService 的下一个内容

public readonly myLib$ = defer(() =>
// webpackChunkName is to have your lib called 'lib.js' when loaded
// there are some other options like prefetch (probably won't work here
// due to defer which I use to not to load library when it's not required
  from(import(/* webpackChunkName: "lib" */ 'lib')))

然后你必须订阅它并在控制台中检查你在输出中得到的内容。

通常您会得到 default，其中包含您需要的所有内容。

然而，当 lib 已过时并且在导入后没有任何结果时，存在一些边缘情况。

这里我只能建议编写自己的脚本加载器，它将：

创建脚本
分配 src
将其附加到 header
侦听加载事件（以便您知道脚本已加载）
通知您的应用您已准备就绪

为什么要拥有脚本加载器而不是 async/defer。因为您可以通过这种方式加载您决定的任何动态库，并且您可以完全控制加载过程（您知道它何时加载并控制它何时开始加载）。

Answer 2

参考了一些文章和答案后，我可以从CDN加载pdfmake库了。

我们可以使用两种方法来做到这一点。

1. Initially Loading : 在 index.html 的 <head> 部分添加脚本标签。并访问window对象中导出的全局库对象。

对于 PDFMake，我在头部添加了以下脚本，

<script src='https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.59/pdfmake.min.js'></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.59/vfs_fonts.js'></script>

并在组件中使用它，在组件顶部将其声明为 declare let pdfMake: any ; 使用此变量访问 pdfmake 方法：pdfMake.createPdf(docDefinition)

2。动态加载：如果你想在特定动作或特定组件上加载库，你可以动态添加脚本标签。

参考此了解此方法。

我已经写了关于这两种方法的文章 Loading External Libraries from CDN in Angular。

Answer 3

使用 async 关键字声明您的函数并使用动态导入。

async downloadPdf() {
    const pdfMake = await import("pdfmake/build/pdfmake.min");
    const pdfFonts = await import("pdfmake/build/vfs_fonts");
    let dd = {
        content: [
            'First paragraph',
            'Another paragraph, this time a little bit longer to make sure, this line will be divided into at least two lines'
        ]   
    }
    pdfMake.createPdf(dd,undefined,undefined,pdfFonts).download();
}

同时安装

npm install --save @types/pdfmake

有什么方法可以在 Angular 8 应用程序中使用 CDN 加载 pdfmake 等第三方库？

Is there any way to load third party libraries like pdfmake using CDN in Angular 8 application?

angular

cdn

pdfmake