如何使用 save-svg-as-png 和 angular 6

Question

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

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

安装了库

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

我可以在 node_modules 下看到图书馆。

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

readme 指的是 Typings library for which type definitions 显然存在。但是，Typings 页面提到它已被 TypeScript 2 弃用，所以我没有继续研究。

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

安装它时

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

找不到库 (npm ERR! code 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 Whosebug 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 对象上可用，但事实似乎并非如此。

我也读过这个 Whosebug 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

在我的打字稿 file/angular 组件的顶部：

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

在我的 angular 组件中使用它：

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

所有导出的函数都可以在 svg 上使用。

Answer 2

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

将 saveSvgAsPng.js 文件添加到 src/assets/js
并在 angular.json 文件

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

在您的 component.ts

declare const saveSvgAsPng: any;

并在需要下载时调用它。

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

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

如何使用 save-svg-as-png 和 angular 6

How to use save-svg-as-png with angular 6

javascript

angular

angular6

angular7

iife