将SVG图像从浏览器复制到剪贴板

Question

我正在开发一个Web应用程序,它接受用户输入,进行工程计算,然后显示格式化的报告或图形.图形是工程图,并不总是标准图形,如饼图.该应用程序的主要功能是使用户能够将这些图表从浏览器复制到Word或Excel文档.

我必须选择使用客户端生成的SVG或服务器端生成的位图.我喜欢SVG方法和原型看起来不错,但是,复制SVG图形似乎跨浏览器可以支持不一致,尤其是在图形在一个div所示(即整个页面不.SVG).例如,IE在下拉列表中显示"副本",但仅将部分SVG图形复制到剪贴板.如果我右键单击SVG图形,则Chrome不提供复制选项.

如果我谷歌周围,我很惊讶看到有关从Web应用程序获取SVG图像到剪贴板的问题的信息很少.

对于解决过这个问题的读者,我的问题是:

1. 有没有一种一致的方法可以将一个更大的DOM的SVG元素放到剪贴板上,最好是使用JavaScript;

2. 鉴于我要求从浏览器到剪贴板获取图形的任何其他建议？

Answer 1

而不是显示svg作为svg元素显示它与img标记.这有一些限制(你不能显示自定义字体或嵌入脚本,但似乎这不是你的用例).好处是表现与图像完全一样(您可以拖放,右键单击和复制等).

为此,您需要使用base64对其进行编码.您可以使用js在服务器端或客户端执行此操作.您的图片标记最终看起来像......

<img src="data:image/svg;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolf" width="..." height="..." alt="diagram" />

R0lGODlhEAAQAMQ...你的base64编码的svg 在哪里.