如何保存由 raphael 生成的 svg答案

【问题标题】：How to save an svg generated by raphael如何保存由 raphael 生成的 svg
【发布时间】：2012-04-24 15:29:40
【问题描述】：

有没有办法将 raphael 生成的 SVG 保存为 svg 文件。请注意，它只需要在 chrome 中工作。

【问题讨论】：

我想你的意思是在客户端保存？肯定有比这更好的方法，但在最坏的情况下，您可以使用 JavaScript/jQuery 获取 XML，通过 AJAX 将其发送到服务器，然后通过您通常设置了适当标头的 Web 框架将其提供给用户。
啊，另一种方式：您可以将 SVG 文件编码为 base64 字符串，然后将其添加到 data: 链接。用户可以点击它来显示，并在他们的浏览器中使用“保存”。

【解决方案1】：

我想出了一个使用Raphael.Export 的解决方案，它为我提供了一个有效的 svg/xml 字符串（我无法从包含 svg 的 DOM 对象的 innerHTML 中简单地得到它）和 Blobbuilder 来创建链接的 url，我将在最后触发点击事件以保存文件。

svgString = @paper.toSVG();
a = document.createElement('a');
a.download = 'mySvg.svg';
a.type = 'image/svg+xml';
bb = new(window.BlobBuilder || WebKitBlobBuilder);
bb.append(svgString);
blob = bb.getBlob('image/svg+xml');
a.href = (window.URL || webkitURL).createObjectURL(blob);
a.click();

【讨论】：

可悲的是，BlobBuilder 看起来已经过时了。 Blob 似乎是替代品，但没有附加方法。
Neema 的答案有当前的解决方案。

【解决方案2】：

作为stef commented，不推荐使用 BlobBuilder API。相反，use the Blob API。

在Andreas' answer 的基础上，这是我快速让它工作的方法：

svgString = r.toSVG();
a = document.createElement('a');
a.download = 'mySvg.svg';
a.type = 'image/svg+xml';
blob = new Blob([svgString], {"type": "image/svg+xml"});
a.href = (window.URL || webkitURL).createObjectURL(blob);
a.click();

【讨论】：

【解决方案3】：

如果你不想使用Rapahel.Export，你可以直接从dom中获取svg，像这样：

var svgString = document.getElementById('holder').innerHTML;
a = document.createElement('a');
a.download = 'mySvg.svg';
a.type = 'image/svg+xml';
blob = new Blob([svgString], {"type": "image/svg+xml"});
a.href = (window.URL || webkitURL).createObjectURL(blob);
a.click();

"holder" 是加载 Raphael 的 div 的 id ： r = Raphael("holder"); 请注意，我认为它不适用于不处理 svg 的旧浏览器

【讨论】：

【解决方案4】：

对于保存 blob 的部分，我推荐https://github.com/eligrey/FileSaver.js/

或https://www.npmjs.com/package/angular-file-saver，如果您使用的是 AngularJs

【讨论】：

【解决方案5】：

至少对于简单的情况，我们可以使用写入 Raphael 绘图的 div（通常是“画布”）并从中下载 innerhtml。首先，我们需要一个 javascript 函数，它将复制 div 的内容并创建一个下载链接（这个函数来自另一个页面，不是我的工作）：

<script>
function downloadInnerHtml(filename, divId, mimeType) {
var elHtml = document.getElementById(divId).innerHTML;
console.log(elHtml); //useful for troubleshooting
var link = document.createElement('a');
mimeType = mimeType || 'text/plain';
link.setAttribute('download', filename);
link.setAttribute('href', 'data:' + mimeType + ';charset=utf-8,' + encodeURIComponent(elHtml));
link.click(); 
}
</script>

其次，我们需要在页面上有一个按钮来运行该功能

<button onclick="downloadInnerHtml('raphaelplot.svg', 'canvas','text/html')">save plot as svg</button>

【讨论】：