javascript - 如何使用带有 Angular 6 的 save-svg-as-png

Question

我正在尝试使用 save-svg-as-png带有我的 Angular 7 项目的库。

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

安装了库

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

我可以在 node_modules 下看到这个库。

不幸的是，这个库是一个老式的 javascript 库，我不知道我需要做什么才能在我的 typescript 组件中访问它。

自述文件指的是 Typings type definitions 的图书馆显然存在。但是，Typings 页面提到它已被 TypeScript 2 弃用，所以我没有继续研究。

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

安装它时

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

找不到库(npm ERR!代码 404)。

我又在谷歌上搜索了一些，发现了 this issue on github有人显然通过将它包含在 angular-cli.js 文件中使其与 Angular 2 一起工作，但是随着对 Angular 的更改，该文件在版本 7 中不再存在，我不知道现在需要怎么做.

我还找到了 following article on how to integrate javascript libraries into Angular 2+ ，但其中大部分依赖于可用的@types(它们不可用，见上文)，并且只有一个简短的部分介绍如何提供您自己的 typings.d.ts 文件，但在玩过之后好半天，我没有再进一步。是否有更详细的说明说明如何使用此方法？

我也找到了这个 article on stackoverflow on how to integrate IIFE based libraries into typescript apps但没有让它工作。

我已将以下行添加到我的 index.html 文件

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

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

我也读过这个 stackoverflow question on how to use non typescript libraries但我的问题之一是我什至不知道 save-svg-as-png 被导入到什么命名空间。

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

Answer 1

我将尝试按照 Hypenate 的建议总结解决方案:

安装库:

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

在我的 typescript 文件/Angular 组件的顶部:

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

在我的 Angular 组件中使用它:

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

svg 上提供了所有导出的函数。