गतिशील रूप से जेनरेट किए गए एसवीजी

Question

का उच्च रिज़ॉल्यूशन प्रिंटआउट मेरे पास एक वेब पेज है जो एक गतिशील रूप से जेनरेट किया गया एसवीजी दस्तावेज़ है। जावास्क्रिप्ट दिनचर्या मूल रूप से एसवीजी के डीओएम का निर्माण करते हैं। पाठक विभिन्न "बटन" या ऑब्जेक्ट्स पर क्लिक करके दस्तावेज़ में हेरफेर कर सकता है जो एसवीजी को बदलने का कारण बनता है। (हालांकि कोई एनीमेशन नहीं है)

मैं पाठक को दस्तावेज़ के एक बड़े प्रारूप, उच्च रिज़ॉल्यूशन छवि को मुद्रित करने में सक्षम होना चाहता हूं। मैं यह कैसे कर सकता हूँ?

आम तौर पर दस्तावेज़ स्केल और स्क्रीन फिट करने के लिए फसल किया जाता है। मैं एक विशाल छवि उत्पन्न कर सकता था, लेकिन फिर ब्राउज़र इसे फसल करेगा।

उच्च रिज़ॉल्यूशन द्वारा मेरा क्या मतलब है इसका विचार पाने के लिए, स्क्रीन छवि आमतौर पर 89 पिक्सेल प्रति इंच और शायद 11 x 16 "या उससे भी अधिक है। एक बड़ी प्रारूप साजिश आसानी से 600 पिक्सेल प्रति इंच पेपर पर हो सकती है जो 36 है इंच चौड़ा। मैं इस तरह के प्रिंटआउट को उत्पन्न करने का तरीका नहीं समझ सकता।

क्या कोई तरीका है कि मैं गतिशील रूप से जेनरेट किए गए डीओएम से एक राज्य एसवीजी मार्कअप दस्तावेज़ उत्पन्न कर सकता हूं? यदि ऐसा है, तो मैं स्थिर एसवीजी को पीडीएफ में परिवर्तित कर सकता हूं और फिर पीडीएफ प्रिंट करें।

Answer 1

XMLSerializer का उपयोग करके आप अपने संशोधित राज्य में अपने एसवीजी को परिवर्तित करने में सक्षम होना चाहिए, और उपयोगकर्ताओं को सीधे अपने ब्राउज़र के साथ इस एसवीजी दस्तावेज़ को खोलने या सहेजने की अनुमति देनी चाहिए।

ब्राउज़र को svg से उच्च गुणवत्ता वाले प्रिंट प्रदान करना चाहिए।

Answer 2

हमारे पास एक ही स्थिति के साथ एक ऐप है। एसवीजी हमारे जावा ऐप में एक फ्रेम में बनाया और छेड़छाड़ की जाती है। लेकिन सभी एसवीजी हेरफेर जावास्क्रिप्ट में होता है। प्रिंट करने के लिए हम क्या करते हैं svg टैग के माध्यम से लूप है और एक फ़ाइल बनाएं जिसमें केवल svg है जो ब्राउज़र में खुल जाएगा। फ़ाइल FileName.svg फ़ाइल करें और इसे ब्राउज़र पर फ़ीड करें। फिर आप प्रिंट करने के लिए ब्राउज़र का उपयोग कर सकते हैं।

यहां बनाने के लिए फ़ाइल का प्रारूप है।

<?xml version="1.0" encoding="utf-8"?> 
<svg 
    xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"> 

    svg elements go here 

</svg> 

यहां कुछ कोड स्निपिट मदद करने के लिए हैं।

// function to export as image, document, or print (SVG) 
function exportSVGas(exFormat, frName) { 
    var exHeight = window.parent.document.getElementById('canvasMainFrame' + frName).offsetHeight; 
    var exWidth = window.parent.document.getElementById('canvasMainFrame' + frName).offsetWidth; 
    var exSvg = '<svg xmlns=\"' + svgNS + '\" xmlns:xlink=\"' + xlkNS + '\" xmlns:ifp=\"' + ifpNS + '\" version=\"1.1\" '; 
    exSvg = exSvg + 'height=\"' + exHeight + 'px\" width=\"' + exWidth + 'px\" >'; 
    if (exFormat.toLowerCase() == 'SVG'.toLowerCase()) { 
     exSvg = exSvg + '<script type=\"text/javascript\">if(window.addEventListener){window.addEventListener(\"load\",function(){setTimeout(\"window.print()\",500);},false);}else if(window.attachEvent){window.attachEvent("onload", function(){setTimeout(\"window.print()\",500);},false);}</script>'; 
    } 
    // serialize by group 
    var groups = getChildren(document.getElementsByTagName('svg')[0], 'g'); 
    for (var i = 0; i < groups.length; i++) { 
     exSvg = exSvg + serializeXmlNode(groups[i]); 
    } 
    exSvg = exSvg + '</svg>'; 
    // remove hidden groups or elements 
    var exXml = $.parseXML(exSvg); 
    $exXml = $(exXml); 
    var exGroups = document.getElementById('layersgroup').getElementsByTagName('g'); 
    for (var i = 0; i < exGroups.length; i++) { 
     var exGroup = exGroups[i]; 
     var exId = exGroup.getAttribute('id'); 
     var exVisible = exGroup.getAttribute('visibility'); 
     if (exVisible == 'hidden') { 
      $exXml.find('#' + exId).remove(); 
     } 
    } 
    $exXml.find('#transform-buttons').removeAttr('transform'); 

    exSvg = serializeXmlNode($exXml[0]); 
    //needs url of svg from javascript to provide context to "url()" function in export 
    window.parent.notify('exportSVG', exFormat, exSvg, document.URL); 
} 

// helper function 
function serializeXmlNode(xmlNode) { 
    if (typeof window.XMLSerializer != "undefined") { 
     return (new window.XMLSerializer()).serializeToString(xmlNode); 
    } else if (typeof xmlNode.xml != "undefined") { 
     return xmlNode.xml; 
    } 
    return ""; 
} 

आप पाते हैं कि यह एक प्रिंट आप एक समूह में रख लिए और फिर पैमाने समूह पर बदलने रखना चाहते हैं के लिए बड़ा हो सकता है की जरूरत है। इस तरह आप इसे 2 3 या 4 गुना बड़ा कर सकते हैं। कुछ इस तरह।

<svg> 
    <g transform="scale(2)"> 
    <g> 
</svg> 

लेकिन जैसे-जैसे हमारे लिए है, क्या 8 में ब्राउज़र में प्रदर्शित करता है "x 8" एक सी आकार शीट को ठीक प्रिंट होगा। मुझे लगता है कि यह एसवीजी की प्रकृति है। लेकिन जैसा कि आपने उल्लेख किया है, आप पीडीएफ रूट भी आजमा सकते हैं क्योंकि पीडीएफ एसवीजी को स्केलेबल के रूप में मानता है। हम एपैच बटिक का उपयोग पीडीएफ निर्यात के लिए करते हैं क्योंकि हमारा ऐप जावा है। सौभाग्य।

Answer 3

गतिशील रूप से बनाए गए एसवीजी तत्व को निर्यात करने के लिए मैंने देखा सबसे अच्छा कार्यान्वयन न्यूयॉर्क टाइम्स टीम द्वारा विकसित SVG-Crowbar 2 है। यह विशेष रूप से उपयोगी बनाता है कि यह बाहरी सीएसएस नियम प्राप्त करता है जो svg तत्व पर लागू होते हैं।

मैं आपके मामले में क्या करूँगा अपने ब्राउज़र पर क्रॉबर स्थापित करें और देखें कि निर्यात की गई एसवीजी फ़ाइल कैसा दिखती है।यदि वह अच्छा लगता है, तो आप कोड का एक टुकड़ा लिख ​​सकते हैं कि

1. प्रतियां पेज के शरीर के लिए वांछित तत्व
2. लोहदंड कार्यों का उपयोग करता है की नकल की तत्व को इनलाइन सीएसएस जोड़ने के लिए
3. एक XMLSerializer करने के लिए उपयोग जिसकी नकल की svg तत्व के एक स्ट्रिंग के रूप में
4. Base64 कि स्ट्रिंग btoa या इस तरह के
5. का उपयोग कर सांकेतिक शब्दों में बदलना का उपयोग कर एक छिपा हुआ form
6. है सर्वर से छवि प्रस्तुत बैकएंड स्ट्रिंग को डीकोड करें और सामग्री को फ़ाइल के रूप में वापस भेजें: माइम प्रकार image/svg+xml और Content-Disposition: attachment; filename=yourfile.svg।

आप सर्वर पर राउंड ट्रिप के बिना फ़ाइल सहेजने का भी प्रयास कर सकते हैं, लेकिन ब्राउजर समर्थन ऐसी विधियों के लिए भिन्न होता है।