17

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

4

5 回答 5

14

我想出了一个使用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();
于 2012-04-18T20:51:09.427 回答
7

正如stef 评论的那样，BlobBuilder API 已被弃用。相反，请使用 Blob API。

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

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();
于 2013-09-06T21:40:23.333 回答
1

如果不想使用 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 的旧浏览器

于 2015-08-12T11:16:23.673 回答
0

至少对于简单的情况，我们可以使用写入 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>
于 2021-06-01T09:16:08.897 回答
0

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

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

于 2015-12-01T18:00:40.683 回答