Question

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

我必须选择使用客户端生成的SVG，或者在服务器端生成的位图。我更喜欢SVG方法并且原型设计看起来不错，但是，复制SVG图表似乎在浏览器中不一致，特别是如果图形以div显示（即整个页面不是.svg）。例如，IE在下拉列表中显示“副本”，但仅将部分SVG图形复制到剪贴板。如果我右键单击SVG图形，则Chrome不提供复制选项。

如果我谷歌周围，我很惊讶地看到从Web应用程序将SVG图像放到剪贴板上的信息很少。

我对那些解决过这个问题的读者的问题：

是否有一致的方法来获取属于a的SVG元素更大的DOM到剪贴板上，最好使用JavaScript;
根据我要求获取图形的任何其他建议从浏览器到剪贴板？

Answer 1

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

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

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

R0lGODlhEAAQAMQ...是你的base64编码的svg。

Answer 2

我设法将SVG内容作为纯XML文本复制到剪贴板，但它对我来说似乎毫无用处，因为Inkscape（我用它来处理SVG），doesn't recognize the text in clipboard as SVG。看来复制SVG文本是不够的，浏览器也应该将 mime-type 设置为image/svg+xml。

我尝试了一些使用HTML5 Clipboard API的技巧，但结果却出现了Chrome无法将mime-type导出到系统剪贴板的问题。相关的错误报告和jsfiddle链接在这里https://code.google.com/p/chromium/issues/detail?id=504700

Answer 3

Javascript和剪贴板是一个痛苦的**。

我知道您的情况有一种解决方法：

如果是真正的SVG文件，请在Chrome中右键单击图像，然后选择“检查元素”。浏览器控制台将打开，并且应该打开一个可以在检查器中选择的SVG元素。右键单击检查器中的svg标记，然后选择“复制”或“复制为HTML”（我无法完全回想起这些选择）

将该文本粘贴到文本文件中，然后使用SVG扩展名保存文件。然后可以在任何浏览器或SVG编辑程序中打开它。 Inkscape是编辑和调试的不错选择，因为您可以在XML样式编辑器中查看和编辑整个SVG文件。

* *抱歉 - 我错过了您请求的第一部分。这将是棘手的。我担心我无法帮助解决这个问题。复制和粘贴可能不是你最好的选择。有两种操作SVG和Excel文件的PHP类，这可能是最佳选择。

Answer 4

我在一个项目中遇到了同样的问题。客户想要一张相当复杂的图表。我们决定使用svg开发它。工作完美，但客户希望能够将图形下载为图片。在互联网上搜索后，我们发现了saveSvgAsPng（https://www.npmjs.com/package/save-svg-as-png）。那对我们有用。

图形在这样的页面中：

<svg id="graph1" style="width: 700px; height: 700px">
....
.....
...
</svg>

该图已显示，但无法下载或复制。所以，这是我采取的步骤：

我安装了上述软件包。

<script src="/path/to/lib/save-svg-as-png/lib/saveSvgAsPng.js"></script>

在svg代码中添加了“ display：none：”，否则我们将具有同一图像的两个实例：

<svg id="graph1" style="width: 700px; height: 700px; display: none">

 <!-- // code goes here  -->


</svg>

在svg图声明之后，我立即添加了一个新图像。此图像是svg图像的新png图像表示形式的占位符。我先将其隐藏，以防止加载时图像闪烁。最初未指定来源：

<img id="graph1_as_png" src="" width="700" height="700" style="display: none">

在新添加的图像之后，我向转换技巧添加了几行代码：

<script>

    svgAsPngUri(document.getElementById("graph1")).then(uri => {
      $("#graph1_as_png").attr('src', uri).show();
    });

</script>

第二个图像的源充满了svg的BASE64编码版本。转换后，将显示图像。现在，我们拥有与svg图像完全相同的图像，但是可以下载或复制该图像。

希望这对您有帮助。

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

4 个答案: