Question

我的<div>包含内联svg。我想要一个在新标签/窗口中打开svg的函数。我只想使用前端js，而不必将svg保存在任何地方。

如果我使用window.open()，则会将svg放入<html>标记中，我试图避免使用该标记。

我基本上试图更改此答案，但之后只剩下svg代码： https://stackoverflow.com/a/21667339/1083923

//---print button---
    var printSVG = function()
    {
        var popUpAndPrint = function()
        {
            var container = $('#svgDiv');
            var width = parseFloat(container.getAttribute("width"))
            var height = parseFloat(container.getAttribute("height"))
            var printWindow = window.open('', 'PrintMap',
            'width=' + width + ',height=' + height);
            printWindow.document.writeln($(container).html());
            printWindow.document.close();
            printWindow.print();
            printWindow.close();
        };
        setTimeout(popUpAndPrint, 500);
    };

Answer 1

您可以将元素字符串化为有效的SVG文档，并将其存储为Blob，然后使用blob：// URI将新窗口指向该Blob：

// we need to handle a user gesture to use 'open'
document.getElementById("btn").onclick = (evt) => {
  // grab your svg element
  const svg = document.querySelector("svg");
  // convert to a valid XML source
  const as_text = new XMLSerializer().serializeToString(svg);
  // store in a Blob
  const blob = new Blob([as_text], { type: "image/svg+xml" });
  // create an URI pointing to that blob
  const url = URL.createObjectURL(blob);
  const win = open(url);
  // so the Garbage Collector can collect the blob
  win.onload = (evt) => URL.revokeObjectURL(url);
};

JS-fiddle demo，因为StackSnippet的沙盒iframe不允许打开新窗口。

在新窗口中打开内联SVG - Javascript

1 个答案: