Question

我试图在我的angular 7项目中使用save-svg-as-png库。

但是，我无法使其正常运行。我已经使用

安装了该库

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

我可以在node_modules下看到该库。

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

自述文件引用了Typings显然存在的type definitions库。但是，“打字”页面提到TypeScript 2不推荐使用它，因此我没有继续这样做。

显然有@types/save-svg-as-png提供了对本机Angular 2+的支持，但是当我尝试使用它安装时

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

找不到该库（npm ERR! code 404）。

我在google上搜索了更多内容，发现this issue on github显然有人通过将其包含在angular-cli.js文件中而使其与Angular 2兼容，但是随着对Angular的更改，该文件不再存在于版本7，我不知道现在该怎么做。

我也发现了following article on how to integrate javascript libraries into Angular 2+，但是大多数情况都依赖于可用的@types（它们没有，见上文），并且仅简要介绍了如何提供自己的{{1} }文件，但玩了一段时间后，我再也听不见了。是否有更详细的说明显示如何使用此方法？

我也找到了这个article on stackoverflow on how to integrate IIFE based libraries into typescript apps，但没有使其正常工作。

我已将以下行添加到我的typings.d.ts文件中

index.html

但是现在如何访问该库提供的功能？如果我正确理解了这些内容，那么它们现在应该可以在window对象上使用，但事实并非如此。

我也读过这个stackoverflow question on how to use non typescript libraries，但是我的问题之一是我什至不知道将<script type="javascript" src="node_modules/save-svg-as-png/lib/saveSvgAsPng.js"></script>导入哪个名称空间。

有没有人设法使这个库与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文件，而不必安装该软件包

将saveSvgAsPng.js文件添加到src / assets / js
并将此JavaScript文件添加到angular.json文件的scripts数组中

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

在component.ts中声明saveSvgAsPng

declare const saveSvgAsPng: any;

然后在需要下载时调用它。

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

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

如何在角度6中使用save-svg-as-png

2 个答案: