Question

我的HTML中有一个SVG文件（图形显示），我需要将其转换为PDF，其余的HTML内容已成功转换但SVG不是，有没有人知道如何用JS完成还是其他任何编程？提前感谢你的回应，

Answer 1

这可能不是正确的答案，但你可以看到他们是如何实现的

/*
   Utility function: populates the <FORM> with the SVG data
   and the requested output format, and submits the form.
*/
function submit_download_form(output_format)
{
    // Get the d3js SVG element
    var tmp = document.getElementById("ex1");
    var svg = tmp.getElementsByTagName("svg")[0];
    // Extract the data as SVG text string
    var svg_xml = (new XMLSerializer).serializeToString(svg);

    // Submit the <FORM> to the server.
    // The result will be an attachment file to download.
    var form = document.getElementById("svgform");
    form['output_format'].value = output_format;
    form['data'].value = svg_xml ;
    form.submit();
}

/*
d3js Example code, based on the "Three Little Circles" tutorial:
http://mbostock.github.com/d3/tutorial/circle.html
*/
function create_d3js_drawing()
{
    var data = [32, 57, 112],
        dataEnter = data.concat(293),
        dataExit = data.slice(0, 2),
        w = 360,
        h = 180,
        x = d3.scale.ordinal().domain([57, 32, 112]).rangePoints([0, w], 1),
        y = d3.scale.ordinal().domain(data).rangePoints([0, h], 2);

    var svg = d3.select("#ex1").append("svg")
        .attr("width", w)
        .attr("height", h);

    svg.selectAll(".little")
        .data(data)
        .enter().append("circle")
        .attr("class", "little")
        .attr("cx", x)
        .attr("cy", y)
        .attr("r", 12);

    d3.select("#randomize").on("click", function() {
        svg.selectAll(".little")
            .transition()
            .duration(750)
            .attr("cx", function() { return Math.random() * w; })
            .attr("cy", function() { return Math.random() * h; })
            .attr("fill", function() { return '#'+Math.floor(Math.random()*16777215).toString(16); });
        /* Random Hex Color in Javascript, from: http://paulirish.com/2009/random-hex-color-code-snippets/ */

        // Show the new SVG code
        show_svg_code();
        });
}

function show_svg_code()
{
    // Get the d3js SVG element
    var tmp  = document.getElementById("ex1");
    var svg = tmp.getElementsByTagName("svg")[0];

    // Extract the data as SVG text string
    var svg_xml = (new XMLSerializer).serializeToString(svg);

    //Optional: prettify the XML with proper indentations
    svg_xml = vkbeautify.xml(svg_xml);

    // Set the content of the <pre> element with the XML
    $("#svg_code").text(svg_xml);

    //Optional: Use Google-Code-Prettifier to add colors.
    prettyPrint();
}

如何将SVG元素转换为PDF

1 个答案: