![](/img/trans.png)
[英]save-svg-as-png not loading the svg css, while downloading the svg as png
[英]How to use save-svg-as-png with angular 6
我正在尝试在我的 angular 7 项目中使用save-svg-as-png库。
但是,我无法让它发挥作用。 我已经使用安装了库
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
)。
我用谷歌搜索了更多并在 github上遇到了这个问题,有人显然已经通过将它包含在 angular-cli.js 文件中来让它与 Angular 2 一起工作,但是随着对 Angular 的更改,这个文件在版本 7 中不再存在,我不知道现在需要怎么做。
我还发现了以下关于如何将 javascript 库集成到 Angular 2+ 中的文章,但其中大部分依赖于 @types 可用(它们不是,见上文)并且只有一个简短的部分关于如何提供你自己的库typings.d.ts
文件,但在玩了很长一段时间后,我没有进一步了解。 是否有更详细的解释说明如何使用这种方法?
我还在stackoverflow 上找到了这篇关于如何将基于 IIFE 的库集成到打字稿应用程序中的文章,但没有让它工作。
我已将以下行添加到我的index.html
文件中
<script type="javascript" src="node_modules/save-svg-as-png/lib/saveSvgAsPng.js"></script>
但是我现在如何访问库提供的功能? 如果我理解正确,它们现在应该可以在 window 对象上使用,但情况似乎并非如此。
我还阅读了有关如何使用非打字稿库的这个stackoverflow 问题,但我的问题之一是我什至不知道将save-svg-as-png
导入到哪个命名空间中。
有没有人设法让这个库与 Angular 6/7 项目一起工作,并且可以详细解释所需的所有步骤?
我将尝试按照 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
。
此外,我们可以使用 saveSvgAsPng.js 文件作为外部 js 文件,而不是安装该包
"scripts": [ "src/assets/js/saveSvgAsPng.js" ]
declare const saveSvgAsPng: any;
saveSVG(): void{ saveSvgAsPng(document.getElementById('id'), fileName); }
如果您更改脚本数组或声明的名称,请确保重新启动您的 angular 应用程序( ng serve
)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.