<p>html2canvas IE11 में SVG कैप्चर करने में सक्षम नहीं है।</p>

अद्यतन
मैं संस्करण को [email protected] से चाहता हूं।

// import the following 2
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.5.0-beta4/html2canvas.js"
                type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.5.0-beta4/html2canvas.svg.js"
                type="text/javascript"></script>

प्रश्न
क्या ऐसा हो सकता है कि संस्करण "1.0.0-alpha.10" के लिए भी "html2canvas.svg.js" मौजूद हो?

@ पॉल-किजतापार्ट हाय मुझे एक ही समस्या का सामना करना पड़ रहा है और क्या आपने अपना मुद्दा ठीक कर लिया है?
वर्तमान में मेरा प्रोजेक्ट केवल इंटरनेट एक्सप्लोरर, एज, क्रोम और ओपेरा के लिए काम करता है। [email protected] खोज रहे हैं जो SVG का समर्थन करता है क्योंकि मेरा HTML2PDF फ़ायरफ़ॉक्स के लिए काम नहीं कर रहा है।

वर्तमान में अगर मैं v1.0.0-alpha.11 (नवीनतम संस्करण) का उपयोग करता तो पीडीएफ फाइल पर एसवीजी प्रदर्शित नहीं होगा।
अगर मैं 0.5.0-बीटा 4 का उपयोग करता, तो फ़ायरफ़ॉक्स एक भी फाइल प्रदर्शित नहीं करता। मैं उनके कोड देखता हूं, मेरे लिए इसे समझना बहुत मुश्किल है

हाय @GoodJeans ,

प्रगति
मैंने "0.5.0-बीटा4" संस्करण का उपयोग नहीं किया क्योंकि इसमें "स्केल" सुविधा नहीं है।

प्रयास
मैंने हाल ही में संस्करण को "v1.0.0-alpha.11" में अपडेट किया है, जो चैंज के अनुसार, IE11 सदस्य को त्रुटि नहीं मिली को ठीक करना चाहिए।
हालांकि, इस नवीनतम संस्करण "v1.0.0-alpha.11" के साथ भी, html2canvas IE11 में अधिकांश SVG घटकों को कैप्चर नहीं करता है।

समस्याओं का निवारण
html2canvas द्वारा प्रदान किए गए लॉग के अनुसार, यह शायद अल्फा.10 के साथ एक ही समस्या है,

क्रोम के साथ:

1468ms html2canvas: Finished parsing node tree
1487ms html2canvas: Finished loading 3 images (3) [img, img, img]
1489ms html2canvas: Starting renderer

IE11 . के साथ

2137ms html2canvas: Starting node parsing
2451ms html2canvas: Finished parsing node tree
2455ms html2canvas: Finished loading 0 images 
2455ms html2canvas: Starting renderer

ऊपर दिए गए लॉग से, क्रोम के विपरीत, IE11 SVG डोम से 3 छवियों को कैप्चर करने में विफल रहता है।

@ पॉल-किज्टापार्ट मैं देख रहा हूं .. मैं जिस अल्फा संस्करण का उपयोग कर रहा हूं वह दुर्भाग्य से इंटरनेट एक्सप्लोरर पर एसवीजी का समर्थन नहीं करता है .. अनुमान है कि मुझे अगली रिलीज के लिए इंतजार करना होगा।

मैं वास्तव में html2canvas के साथ eKoopmans/html2pdf का उपयोग कर रहा हूं।

यह अभी भी 11 में काम नहीं कर रहा है। नीचे वह कोड है जिसका मैं उपयोग कर रहा हूं।

डेटा दें = document.getElementById('contentToConvert');
html2canvas(डेटा, {
ऑनरेंडर: फ़ंक्शन (कैनवास) {
चलो imgWidth = 208;
चलो पेजहाइट = २९५;
चलो imgHeight = कैनवास। ऊँचाई * imgWidth / कैनवास। चौड़ाई;
चलो ऊंचाई लेफ्ट = imgHeight;
कॉन्स्ट कंटेंटडेटायूआरएल = कैनवास.टूडाटायूआरएल ('इमेज/पीएनजी')
चलो पीडीएफ = नया जेएसपीडीएफ ('पी', 'मिमी', 'ए 4'); // पीडीएफ का A4 साइज पेज
चलो स्थिति = 0;
pdf.addImage(contentDataURL, 'PNG', 0, स्थिति, imgWidth, imgHeight)
pdf.save ("testf .pdf'); // जेनरेट की गई पीडीएफ
}
});

मेरे पास एक ही समस्या है और यह आईई 11 में काम नहीं कर रहा है। मैं जो करने की कोशिश करता हूं वह कुछ हाईचार्ट ग्राफ (जो एसवीजी है) के साथ रिपोर्ट पेज के लिए पीडीएफ फाइल जेनरेट करना है। मैं html2canvas और jspdf का उपयोग कर रहा हूँ। जब मैं संस्करण को [email protected] से हूं , तो यह हाईचार्ट ग्राफ दिखा सकता है, लेकिन लेआउट जैसे अन्य मुद्दे भी हैं। अगर मैं [email protected] का उपयोग करता

मैं इस सुधार के साथ नई रिलीज की प्रतीक्षा कर रहा हूं।

यह अभी भी 1.0.0-rc.1 में एक मुद्दा है। IE11 हाईचार्ट्स (svg कैनवास) नहीं देखता है जबकि क्रोम और फ़ायरफ़ॉक्स करते हैं।

अभी भी 1.0.0-rc.3 में एक मुद्दा लगता है।

इस मुद्दे पर कोई अपडेट?
इसके अलावा मुझे अव्यवस्थित ग्राफ डेटा मिल रहा है।

मैंने 1.0.0-rc.5 का उपयोग करने के लिए अद्यतन किया है। लेकिन अभी भी काम नहीं कर रहा है।
श्रीमान बिल गेट्स क्या आप कृपया IE को तत्काल समर्थन की घोषणा कर सकते हैं? मैं तब इसे छोड़ सकता हूं ....

कोई खबर? आखिरी चीज जो मुझे अपने प्रोजेक्ट पर चाहिए वह है IE11 में अच्छी पीडीएफ।

अभी भी IE11 में svg के साथ काम नहीं कर रहा है। क्या किसी के पास कोई उपाय है?

@कुलदीप२७७९२
पहले canvg का उपयोग करें, और फिर html2canvas का उपयोग करें

मेरा साथी एक विकल्प सुझाता है, आप इसे एक विकल्प के रूप में देख सकते हैं यदि आपका पीडीएफ वास्तविक समय में उत्पन्न करने के लिए जरूरी नहीं है:

चरण 1. google-chrome स्थापित करें
चरण 2. रेंडर किए गए html को png/pdf में कैप्चर करने के लिए google-chrome कमांड प्रॉम्प्ट का उपयोग करें

जैसे
chrome --headless --print-to-pdf="d:\{{path and file name}}.pdf" https://google.com

उस स्थिति में जेनरेट की गई पीडीएफ उसी शैली में होगी, चाहे आप किसी भी ब्राउज़र का उपयोग कर रहे हों।
मुश्किल लेकिन मेरे लिए काम करो।

@fiftyk मैंने ऐसा करने की कोशिश की, लेकिन यह क्रोम के लिए भी काम करता है लेकिन IE11 के लिए नहीं।
@martinknc सुझाव के लिए धन्यवाद, लेकिन मुझे अपने प्रोजेक्ट में उस वास्तविक समय की आवश्यकता है।

@ kuldip27792 हमने IE11 को एक

@fiftyk मैंने आपके समाधान की कोशिश की है और इसने बहुत अच्छा काम किया है। तो मैं जो कर रहा हूं वह यह है कि मैं सभी svg तत्वों को एकत्रित कर रहा हूं और उन्हें html2canvas द्वारा बनाए गए कैनवास में अपने स्वयं के स्थिति मानों के साथ प्रस्तुत कर रहा हूं। भाई बहुत - बहुत धन्यवाद।

हाँ, अहमेतुरुन की तरह, मैं भी यही करता हूँ। स्क्रीनशॉट पर svgs रेंडर करने के लिए मेरा टाइपस्क्रिप्ट फ़ंक्शन संलग्न है:
`
'कैनवग' से आयात {कैनवग};
...
निजी कन्वर्टSvgD3ChartsToPngs (): HTMLImageElement [] {
const pngD3Charts: HTMLImageElement[] = [];

Array.from(document.getElementsByTagName('svg')).map(svg => {
चलो svgD3ChartCanvas = document.createElement('canvas');

        // Increase the Pixel Density for the Screenshot
        svgD3ChartCanvas.width = parseInt(svg.getAttribute('width')) * 4;
        svgD3ChartCanvas.height = parseInt(svg.getAttribute('height')) * 4;

        let canvasContext = svgD3ChartCanvas.getContext('2d');

        // Use Canvg to convert the svg into a png
        let convertedSvgToPng = Canvg.fromString(
            canvasContext,
            (svg.parentNode as HTMLElement).innerHTML,
            {
                ignoreDimensions: true,
                scaleWidth: svgD3ChartCanvas.width,
                scaleHeight: svgD3ChartCanvas.height
            }
        );
        convertedSvgToPng.start();

        // Attach new png
        let pngD3Chart = new Image();
        pngD3Chart.src = svgD3ChartCanvas.toDataURL('image/png');
        pngD3Chart.style.width = '100%';
        pngD3Charts.push(pngD3Chart);

        // Remove HTML Attribute and use CSS
        (pngD3Chart as any).width = '';
        svg.parentNode.parentNode.appendChild(pngD3Chart);
        (svg.parentNode as HTMLElement).style.visibility = 'hidden';
        (svg.parentNode as HTMLElement).style.height = '0';
        (svg.parentNode as HTMLElement).style.minHeight = '0';
    });
    return pngD3Charts;
}`