javascript - 如何使用 angular 6 的 save-svg-as-png
问题描述
我正在尝试将save-svg-as-png库与我的 angular 7 项目一起使用。
但是,我无法让它工作。我已经使用安装了库
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
.
推荐阅读
- java - 如何在 java 条件语句中使用 or ,例如 if (a or b != c)
- javascript - Javascript `await` "SyntaxError: Unexpted identifier" 即使我在 `async` 函数中等待
- r - 如何从协方差矩阵中获取唯一对?
- puppeteer - 通过句柄循环获取内部元素文本
- php - 如何修复“将元素添加到数组而不是替换它”?
- javascript - $.getJSON 适用于本地主机但不适用于远程服务器
- jquery - 使用带有 AMCharts 4 饼图的 Jquery UI 滑块
- windows - 如何在纱线脚本中编写powershell语法
- python - 如何在 Python 中使用 Plotly Express 在同一 y 轴上绘制多条线
- angular - 一些嵌套 JSON 对象的 Angular 自定义过滤器