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

【问题标题】：Copy SVG Images from Browser to Clipboard将 SVG 图像从浏览器复制到剪贴板
【发布时间】：2012-08-28 15:19:32
【问题描述】：

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

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

如果我用 Google 搜索一下，我会惊讶地发现关于从 Web 应用程序获取 SVG 图像到剪贴板的问题的信息如此之少。

我对已解决此问题的读者的问题：

是否有一致的方法来获取作为更大的 DOM 到剪贴板，最好使用 JavaScript；
鉴于我需要获取图形的任何其他建议从浏览器到剪贴板？

【问题讨论】：

标签： google-chrome svg clipboard

【解决方案1】：

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

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

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

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

【讨论】：

感谢 Duopixel 的建议。这看起来可以解决我的问题。请给我一两天的时间来探索，如果它有效，我希望我会将您的建议标记为答案。感谢您抽出宝贵时间提供帮助！

【解决方案2】：

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

据我所知，有一种针对您的情况的解决方法：

如果是真正的 SVG 文件，在 Chrome 中，右键单击图像，然后选择“检查元素”。浏览器控制台将打开，并且应该打开一个 SVG 元素，您可以在检查器中选择该元素。右键单击检查器中的 svg 标签，然后选择“复制”或“复制为 HTML”（我不记得确切的选择）

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

**抱歉 - 我错过了您请求的第一部分。那会很棘手。恐怕我对那部分无能为力。不过，复制和粘贴可能不是您的最佳选择。有一些 PHP 类可以处理 SVG 和 Excel 文件，这很可能是要走的路。

【讨论】：

另外，您可以调查 raphael.js - raphaeljs.com。我以前没有使用过它，但它看起来可能可以解决您的问题，如果没有 - 肯定会为您提供使用 js 的其他选项。
恐怕 Raphael 会将 OP 留在他现在所在的位置：一个他无法复制到剪贴板的 SVG 元素。
感谢 user1167442 的建议。我认为它们都是有效的探索途径。但是，必须由用户进行复制和粘贴，并且由于他们只是工程师（开个玩笑），所以我真的不能要求他们更多，只能右键单击并选择复制。我将在下面查看 Duopixel 提供的答案。感谢您抽出宝贵时间提供帮助！

【解决方案3】：

我设法将 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

【讨论】：

【解决方案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 图像完全相同的图像，但可以下载或复制图像。

我希望这对你也有帮助..

【讨论】：