如何解决在 D3JS 中创建和下载文件时出现“Failed - Forbidden”错误

Question

I have created a genealogy application based on Mike Bostock's collapsible tree https://observablehq.com/@d3/collapsible-tree .

I am trying to download the tree as an SVG document using the example http://bl.ocks.org/curran/7cf9967028259ea032e8 my code works if I use the static data in dataURL as is in the example

$('#download-SVG').click(function() {
    var dl = document.createElement("a");
    document.body.appendChild(dl); // This line makes it work in Firefox.
    dl.setAttribute("href", dataURL);
    dl.setAttribute("download", "test.svg");
    dl.click();
   });

, however, if I use the modified code to use the SVG, I get a "Failed - Forbidden" error.

 $('#download-SVG').click(function() {
    var dl = document.createElement("a");
    document.body.appendChild(dl); // This line makes it work in Firefox.
    dl.setAttribute("href", function (svg) {
     var svgAsXML = (new XMLSerializer).serializeToString(svg);
     return "data:image/svg+xml," + encodeURIComponent(svgAsXML);
    });
    dl.setAttribute("download", "test.svg");
    dl.click();
   });

I would appreciate support in identifying the reason for this.

Answer 1

I have managed to download the file by doing the following changes:

$('#download-SVG').click(function() {
    var dl = document.createElement("a");
    document.body.appendChild(dl); // This line makes it work in Firefox.
    dl.setAttribute("href", svgDataURL(svg.node())); // pass the node
    dl.setAttribute("download", "test.svg");
    dl.click();
   });

 function svgDataURL(svg) {
     var svgAsXML = (new XMLSerializer).serializeToString(svg);
     var dataURL = "data:image/svg+xml," + encodeURIComponent(svgAsXML);
     return dataURL;
   }

The file downloads, but I am not able to open the file, which I suspect is due to the svg data content, but that is a different issue altogether.