2014-10-14 6 views
0

У меня есть SVG-файл в моем HTML (графики отображаются), и мне нужно преобразовать его в PDF, остальные элементы HTML успешно конвертируются, но SVG нет, кто-нибудь имеет какую-либо идею как это могло быть сделано с JS или любой другой прогой? Цените ваш ответ вперед,как преобразовать элементы SVG в PDF

+0

https://github.com/CBiX /svgToPdf.js/tree/master –

ответ

0

проверить ссылку d3js/SVG Export demo

это может быть не правильный ответ, но вы можете увидеть, как они достигают его

/* 
    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(); 
} 
+0

Отлично, спасибо за ответ, я нашел способ, используя window.print(), который позволяет пользователям печатать показанные материалы. – user3631872

Смежные вопросы