<p>html2canvas غير قادر على التقاط SVG في IE11.</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>

سؤال
هل يمكن أن يكون هناك "html2canvas.svg.js" للإصدار "1.0.0-alpha.10" أيضًا؟

@ Paul-Kijtapart مرحبًا ، أواجه نفس المشكلة أيضًا ، هل أصلحت مشكلتك؟
يعمل مشروعي حاليًا مع Internet Explorer و Edge و Chrome و Opera فقط. أبحث عن [email protected] الذي يدعم SVG لأن HTML2PDF لا يعمل مع متصفح Firefox.

حاليًا ، إذا كنت سأستخدم v1.0.0-alpha.11 (أحدث إصدار) ، فلن يتم عرض SVG في ملف pdf.
إذا كنت سأستخدم 0.5.0-beta4 ، فلن يعرض Firefox ملفًا واحدًا. أنا أنظر في رموزهم ومن الصعب علي فهمها

مرحبًا @ GoodJeans ،

تقدم
انتهى بي الأمر بعدم استخدام الإصدار "0.5.0-beta4" لأنه لا يحتوي على ميزة "المقياس".

محاولة
لقد قمت مؤخرًا بتحديث الإصدار إلى "v1.0.0-alpha.11" والذي ، وفقًا لسجل التغيير ، يجب إصلاح خطأ عضو IE11 غير موجود.
ومع ذلك ، حتى مع هذا الإصدار الأخير "v1.0.0-alpha.11" ، لا يلتقط html2canvas معظم مكونات SVG في IE11.

استكشاف الاخطاء
وفقًا للسجل المقدم بواسطة html2canvas ، ربما تكون هذه هي نفس المشكلات مع alpha.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

من السجل أعلاه ، على عكس Chrome ، فشل IE11 في التقاط الصور الثلاث من SVG dom.

@ Paul-Kijtapart أرى .. نسخة ألفا التي أستخدمها لا تدعم SVG على Internet Explorer للأسف .. أعتقد أنه سيتعين علي انتظار الإصدار التالي.

أنا أستخدم eKoopmans / html2pdf مع html2canvas.

لا يزال لا يعمل في أي 11. أدناه هو الرمز الذي أستخدمه.

السماح للبيانات = document.getElementById ('contentToConvert') ؛
html2canvas (البيانات ، {
onrendered: الوظيفة (قماش) {
اسمحوا imgWidth = 208 ؛
دع pageHeight = 295 ؛
اسمحوا imgHeight = canvas.height * imgWidth / canvas.width ؛
دع heightLeft = imgHeight ؛
const contentDataURL = canvas.toDataURL ('image / png')
دع pdf = new jspdf ('p'، 'mm'، 'a4') ؛ // صفحة بحجم A4 من PDF
اسمحوا الموقف = 0 ؛
pdf.addImage (contentDataURL، 'PNG'، 0، position، imgWidth، imgHeight)
pdf.save ("testf .pdf ') ؛ // ملف PDF تم إنشاؤه
}
}) ؛

لدي نفس المشكلة وهي لا تعمل في IE 11. ما أحاول القيام به هو إنشاء ملف PDF لصفحة التقرير مع بعض الرسوم البيانية عالية التخطيط (وهو svg). أنا أستخدم html2canvas و jspdf. عندما أقوم بتبديل الإصدار من [email protected] إلى [email protected] ، يمكن أن يعرض الرسم البياني للمخطط العالي ، ولكن هناك مشكلات أخرى مثل التخطيط. إذا استخدمت [email protected] ،

إنني أتطلع إلى الإصدار الجديد مع هذا الإصلاح.

لا تزال هذه مشكلة في 1.0.0-rc.1. لا يرى IE11 الرسوم البيانية العالية (قماش svg) بينما يظهر Chrome و Firefox.

لا يزال يبدو أنه يمثل مشكلة في 1.0.0-rc.3.

أي تعديل حدث في هذه القضية؟
كما أنني أحصل على بيانات رسم بياني مضطرب.

لقد قمت بالتحديث لاستخدام 1.0.0-rc.5. ولكن لا يزال لا يعمل.
السيد بيل جيتس ، هل يمكنك إعلان انتهاء الدعم لـ IE على الفور؟ يمكنني بعد ذلك التخلي عنه ....

أى اخبار؟ آخر شيء أحتاجه في مشروعي هو ملفات PDF جيدة في IE11.

ما زلت لا تعمل في IE11 مع svg. هل لدى أي شخص أي حل بديل؟

امين
استخدم canvg أولاً ، ثم استخدم html2canvas

يقترح زميلي في الفريق بديلاً ، يمكنك مشاهدته كخيار إذا لم يكن ملف PDF الخاص بك ضروريًا لإنشاءه في الوقت الفعلي:

الخطوة 1. تثبيت جوجل كروم
الخطوة الثانية: استخدم موجه أوامر google-chrome لالتقاط ملف html إلى png / pdf

على سبيل المثال
chrome --headless --print-to-pdf = "d: \ {{path and file name}}. pdf" https://google.com

في هذه الحالة ، سيكون ملف PDF الذي تم إنشاؤه بنفس النمط بغض النظر عن المتصفح الذي تستخدمه.
صعب ولكن العمل من أجلي.

fiftyk لقد حاولت القيام بذلك ولكن هذا عمل أيضًا مع الكروم ولكن ليس لـ IE11.
martinknc شكرًا على الاقتراح ولكني بحاجة إلى الوقت الفعلي في مشروعي.

@ kuldip27792 انتهى بنا المطاف بإطلاق IE11 على صفحة مجردة من الأسفل بزر الاتصال فقط في لقطة الشاشة. ليست جيدة ولكنها كافية لعملائنا.

@ fiftyk لقد جربت الحل الخاص بك وعمل بشكل رائع. لذلك ما أفعله هو أنني أجمع كل عناصر svg وأعرضها على اللوحة القماشية التي أنشأتها html2canvas بقيم الموضع الخاصة بها. شكرا جزيلا اخي.

نعم ، مثل Ahmeturun ، هذا ما أفعله أيضًا. تم إرفاق وظيفة TypeScript الخاصة بي لجعل عرض svgs على لقطة الشاشة:
"
استيراد {Canvg} من "canvg" ؛
...
convertSvgD3ChartsToPngs (): 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;
}`