如何使用 angular 6 的 save-svg-as-png答案

【问题标题】：How to use save-svg-as-png with angular 6如何使用 angular 6 的 save-svg-as-png
【发布时间】：2019-07-02 10:43:12
【问题描述】：

我正在尝试将 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 支持原生 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（它们不可用，见上文），并且只有一个简短的部分介绍如何提供您自己的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>

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

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

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

【问题讨论】：

如果安装了，可以尝试在你的组件中导入为：import * as saveSvgAsPgn from 'saveSvgAsPng';
其实应该是import * as svg from 'save-svg-as-png';，但是现在我可以访问它的方法了（虽然IntelliJ确实提供了方法名的自动补全）。
正确，它需要有''围绕它。我的错。
第一次出现 '' :-) 但是，库名称需要是 kebab-case 而不是 camel-case。不用担心！

标签： javascript angular angular6 angular7 iife

【解决方案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 上使用。

【讨论】：

【解决方案2】：

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

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

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

在你的 component.ts 中声明 saveSvgAsPng

declare const saveSvgAsPng: any;

当你需要下载时调用它。

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

如果您更改脚本数组或声明的名称，请确保重新启动您的 Angular 应用 (ng serve)

【讨论】：