有没有办法将raphael生成的SVG保存为svg文件。请注意,它只需要在chrome中工作。
答案 0 :(得分:14)
我想出了一个使用Raphael.Export的解决方案,它给了我一个有效的svg / xml字符串(我无法从包含svg的DOM对象的innerHTML中得到的东西)和Blobbuilder为链接创建一个url,我将在最后触发一个click事件来保存文件。
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();
答案 1 :(得分:7)
作为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();
答案 2 :(得分: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();
"的保持器强>"是装载拉斐尔的div的id:r = Raphael(" holder"); 请注意,我认为它不适用于不能处理svg的旧浏览器
答案 3 :(得分:0)
对于保存blob的部分,我建议https://github.com/eligrey/FileSaver.js/
或https://www.npmjs.com/package/angular-file-saver如果您正在使用AngularJs
答案 4 :(得分:0)
至少对于简单的情况,我们可以使用写入拉斐尔图的 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>