如何将 save-svg-as-png 与 Angular 6 一起使用

Question

我正在尝试将 save-svg-as-png 库与我的 Angular 7 项目一起使用。

但是，我无法让它工作。我已经使用

安装了该库

npm install --save save-svg-as-png

我可以在node_modules下看到该库。

不幸的是，该库是一个旧式的 javascript 库，我不知道需要做什么才能在我的打字稿组件中访问它。

自述文件引用了 Typings 库，其中显然存在类型定义。然而，Typings 页面提到 TypeScript 2 已弃用它，所以我没有追究这一点。

显然有 @types/save-svg-as-png 用于原生 Angular 2+ 支持，但是当我尝试使用

安装它时

npm install --save @types/save-svg-as-png

找不到该库(

npm ERR! code 404

)。

我在 google 上搜索了更多内容，并在 github 上发现了这个问题，显然有人通过将其包含在 angular-cli.js 文件中来使其与 Angular 2 一起使用，但随着 Angular 的更改，该文件不再存在于版本中7，我不知道现在需要如何完成。

我还找到了以下关于如何将 javascript 库集成到 Angular 2+ 中的文章，但其中大部分依赖于可用的 @types（它们并不可用，请参见上文），并且只有一小部分介绍了如何提供你自己的

typings.d.ts

文件，但玩了一段时间后，我没有得到任何进一步的信息。有更详细的解释来说明如何使用这种方法吗？

我已将以下行添加到我的

index.html

文件中

<script type="javascript" src="node_modules/save-svg-as-png/lib/saveSvgAsPng.js"></script>

但是我现在如何访问库提供的功能呢？如果我理解正确的话，它们现在应该可以在窗口对象上使用，但情况似乎并非如此。

我还阅读了有关如何使用非打字稿库的stackoverflow问题，但我的问题之一是我什至不知道

save-svg-as-png

正在导入哪个命名空间。

有没有人设法让这个库与 Angular 6/7 项目一起工作，并且可以对所需的所有步骤进行详细解释？

Answer 1

我将尝试总结 Hypenate 建议的解决方案：

安装库：

npm install --save save-svg-as-png

在我的打字稿文件/角度组件的顶部：

import * as svg from 'save-svg-as-png';

在我的角度分量中使用它：

svg.svgAsPngUri(document.getElementById('idOfMySvgGraphic'), {}, (uri) => {
      console.log('png base 64 encoded', uri);
    });

所有导出功能均可在

svg

上使用。

Answer 2

此外，我们可以使用 saveSvgAsPng.js 文件作为外部 js 文件，而不是安装该包

"scripts": [ "src/assets/js/saveSvgAsPng.js" ]

declare const saveSvgAsPng: any;

saveSVG(): void{ saveSvgAsPng(document.getElementById('id'), fileName); }

如果更改脚本数组或声明的名称，请确保重新启动角度应用程序（

ng serve

）

Answer 3

定义以下类型：

declare module "save-svg-as-png" {
    const saveSvgAsPng: (el: HTMLElement, filename: string) => void;
    export { saveSvgAsPng };
}