Question

我想从SVG元素创建自定义下载（JavaScript生成的JSON文件）（my application接口在SVG中）。但是，虽然我可以使用纯HTML（视频Force download of 'data:text/plain' URL），但它不适用于SVG。

示例（https://jsfiddle.net/stared/qzn7Ldme/）：

HTML：

get()

JS：

<a id="link_html" download="file.txt">download file (from HTML)</a>
<br/>
<svg height="100" width="300">
  <a id="link_svg" download="file.txt">
    <text x="0" y="50">download file (from SVG)</text>
  </a>
</svg>

如果重要，我使用D3.js（3.x）。

有没有明确的解决方案/修复方法？

Answer 1

您只需使用实用程序功能即可创建符合您需要的链接。例如

SVG

<svg height="100" width="300">
  <a id="link_svg" download="file.txt">
    <text x="0" y="50">download file (from SVG)</text>
  </a>
</svg>

JS

var content = "This is the file content.";

d3.select("#link_svg").on("click", function () {
  downloadFile("file.txt", content);
});

var downloadFile = function(filename, content) {
  var blob = new Blob([content]);
  var event = new MouseEvent('click', {
    'view': window,
    'bubbles': true,
    'cancelable': true
  });
  var a = document.createElement("a");
  a.download = filename;
  a.href = URL.createObjectURL(blob);
  a.dispatchEvent(event);
};

Answer 2

我复制了@ Fraser的答案，但使用FileSaver.js使这个任务变得简单：

var content = "This is the file content.";
var blob = new Blob([content]);

d3.select("#link_svg").on("click", function () {
  saveAs(blob, "file.txt");
});

<script src="https://cdn.rawgit.com/eligrey/FileSaver.js/master/FileSaver.min.js"></script>
<script src="https://d3js.org/d3.v3.js"></script>

<svg height="100" width="300">
  <a id="link_svg">
    <text x="0" y="50">download file (from SVG)</text>
  </a>
</svg>

Answer 3

您可以按以下方式更改数据：

Group1: 31
Group2: ,5,46,7,86

强制下载。但是[31, 5, 46, 7, 86]标记了HTML而不是SVG标记。因此，您无法在下载前指定filename.ext。

data:application/octet-stream

需要一个实用功能才能做到这一点。看看here .-

链接到SVG生成的下载文件

3 个答案: