25

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

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

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

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

  1. 是否有一致的方法将作为较大 DOM 一部分的 SVG 元素放到剪贴板上，最好使用 JavaScript；

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

4

4 回答 4

15

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

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

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

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

于 2012-09-04T05:16:55.577 回答
2

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

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

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

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

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

于 2012-09-04T01:04:09.857 回答
2

我设法将 SVG 内容作为纯 XML 文本复制到剪贴板，但它对我来说似乎没用，因为 Inkscape（我用来处理 SVG）不能将剪贴板中的文本识别为 SVG。看来复制 SVG 的文本是不够的，浏览器还应该将mime-type设置为image/svg+xml.

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

于 2015-07-08T08:33:41.200 回答
1

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

该图在页面中是这样的：

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

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

  1. 我安装了上面提到的包。
<script src="/path/to/lib/save-svg-as-png/lib/saveSvgAsPng.js"></script>
  1. 在 svg 代码中添加了“display: none:”，否则我们将有两个相同图像的实例： 
<svg id="graph1" style="width: 700px; height: 700px; display: none">

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


</svg>
  1. 在 svg 图的声明之后，我直接添加了一个新图像。此图像是 svg 图像的新 png 图像表示的占位符。我先隐藏它，以防止图像在加载时闪烁。最初未指定源：
<img id="graph1_as_png" src="" width="700" height="700" style="display: none">
  1. 在新添加的图像之后，我添加了一些代码行，即转换技巧：
<script>

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

</script>

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

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

于 2019-06-27T20:26:24.497 回答