如何將 save-svg-as-png 與 angular 6 一起使用

Question

我正在嘗試在我的 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 項目一起工作，並且可以詳細解釋所需的所有步驟？

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 文件，而不是安裝該包

1. 將 saveSvgAsPng.js 文件添加到 src/assets/js
2. 並將此 JavaScript 文件添加到 angular.json 文件的腳本數組中

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

3. 在你的 component.ts 中聲明 saveSvgAsPng

declare const saveSvgAsPng: any;

4. 並在需要下載時調用它。

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

如果您更改腳本數組或聲明的名稱，請確保重新啟動您的 angular 應用程序（ ng serve ）