<p>html2canvas не может захватывать SVG в IE11.</p>

Обновлять
Я должен заставить его работать, переключив версию с [email protected] на [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,

С Chrome:

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 не может захватить 3 изображения из SVG-домена.

@ Paul-Kijtapart Ясно ... альфа-версия, которую я использую, к сожалению, не поддерживает SVG в Internet Explorer ... думаю, мне придется дождаться следующего релиза.

На самом деле я использую eKoopmans / html2pdf вместе с html2canvas.

Он все еще не работает, например, в 11. Ниже приведен код, который я использую.

let data = document.getElementById ('contentToConvert');
html2canvas (данные, {
onrendered: function (canvas) {
пусть imgWidth = 208;
пусть pageHeight = 295;
пусть imgHeight = canvas.height * imgWidth / canvas.width;
let heightLeft = imgHeight;
const contentDataURL = canvas.toDataURL ('изображение / png')
пусть pdf = new jspdf ('p', 'mm', 'a4'); // Страница формата А4 PDF
пусть позиция = 0;
pdf.addImage (contentDataURL, 'PNG, 0, позиция, imgWidth, imgHeight)
pdf.save ("testf .pdf '); // Сгенерированный PDF
}
});

У меня такая же проблема, и она не работает в IE 11. Я пытаюсь создать PDF-файл для страницы отчета с некоторыми графиками highchart (это svg). Я использую html2canvas и jspdf. когда я переключаю версию с [email protected] на [email protected] , он может отображать график highchart, но есть и другие проблемы, такие как макет. Если я использую [email protected] , весь график highchart будет пуст при генерации холста.

Я с нетерпением жду нового релиза с этим исправлением.

Это все еще проблема в 1.0.0-rc.1. IE11 не видит графики highcharts (холст svg), в то время как Chrome и Firefox видят.

По-прежнему проблема в 1.0.0-rc.3.

Есть новости по этой проблеме?
Также я получаю неупорядоченные графические данные.

Я обновился, чтобы использовать 1.0.0-rc.5. но все еще не работает.
Г-н Билл Гейтс, не могли бы вы объявить о прекращении поддержки IE немедленно? Тогда я могу бросить это ....

Любые новости? Последнее, что мне нужно в моем проекте, - это хорошие PDF-файлы в IE11.

все еще не работает в IE11 с svg. у кого-нибудь есть обходной путь?

@ kuldip27792
сначала используйте canvg , а затем используйте html2canvas

мой товарищ по команде предлагает альтернативу, вы можете просмотреть ее как вариант, если ваш PDF-файл не является обязательным для создания в режиме реального времени:

Шаг 1. Установите google-chrome
Шаг 2. Используйте командную строку google-chrome, чтобы записать визуализированный html в png / pdf.

например
chrome --headless --print-to-pdf = "d: \ {{путь и имя файла}}. pdf" https://google.com

В этом случае сгенерированный PDF-файл будет в том же стиле, независимо от того, какой браузер вы используете.
Сложно, но работает для меня.

@fiftyk Я пробовал это сделать, но это тоже сработало для Chrome, но не для IE11.
@martinknc спасибо за предложение, но мне нужно это реальное время в моем проекте.

@ kuldip27792 мы закончили тем, что запустили IE11 на урезанной странице с помощью кнопки, просто вызывающей снимок экрана. Не очень хорошо, но для нашего клиента этого достаточно.

@fiftyk Я пробовал ваше решение, и оно отлично сработало. Итак, я собираю все элементы svg и визуализирую их на холсте, созданном html2canvas с их собственными значениями позиции. Большое спасибо, брат.

да, как ахметурун, я тоже этим занимаюсь. Прилагается моя функция TypeScript для рендеринга svgs на снимке экрана:
`
импортировать {Canvg} из 'canvg';
...
private convertSvgD3ChartsToPngs (): HTMLImageElement [] {
const pngD3Charts: HTMLImageElement [] = [];

Array.from (document.getElementsByTagName ('svg')). Map (svg => {
пусть svgD3ChartCanvas = document.createElement ('холст');

        // 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;
}`