<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”？

@Paul-Kijtapart 嗨，我也遇到了同样的问题，你的问题解决了吗？
目前我的项目仅适用于 Internet Explorer、Edge、Chrome 和 Opera。 寻找支持 SVG 的[email protected] ，因为我的

目前，如果我使用 v1.0.0-alpha.11（最新版本），则 pdf 文件上不会显示 SVG。
如果我使用 0.5.0-beta4，Firefox 将不会显示单个文件。 我查看了他们的代码，这对我来说太难理解了

嗨@GoodJeans ，

进步
我最终没有使用版本“0.5.0-beta4”，因为它没有“缩放”功能。

试图
我最近将版本更新为“v1.0.0-alpha.11”，根据更新日志，它应该修复 IE11 成员未找到错误。
但是，即使使用最新版本“v1.0.0-alpha.11”，html2canvas 也无法捕获 IE11 中的大部分 SVG 组件。

故障排除
根据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 中捕获 3 个图像。

@Paul-Kijtapart 我明白了。不幸的是，我使用的 alpha 版本不支持 Internet Explorer 上的 SVG。我想我将不得不等待下一个版本。

我实际上在使用 eKoopmans/html2pdf 和 html2canvas。

它仍然无法在即 11 中工作。以下是我正在使用的代码。

让 data = 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 文件，其中包含一些 highchart 图表（即 svg）。 我正在使用 html2canvas 和 jspdf。 当我将版本从[email protected]切换到[email protected] 时，它可以显示高图，但还有其他问题，如布局。 如果我使用[email protected] ，生成画布时所有的highchart图形都将为空。

我期待带有此修复程序的新版本。

这在 1.0.0-rc.1 中仍然是一个问题。 IE11 看不到 highcharts（svg canvas），而 Chrome 和 Firefox 可以。

在 1.0.0-rc.3 中似乎仍然是一个问题。

关于这个问题的任何更新？
我也得到了无序的图形数据。

我已更新为使用 1.0.0-rc.5。 但仍然无法正常工作。
比尔盖茨先生能否立即宣布终止对 IE 的支持？ 那我就可以放弃了......

任何新闻？ 我的项目最后需要的是 IE11 中的好 pdf。

仍然无法在带有 svg 的 IE11 中工作。 有人有任何解决方法吗？

@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 创建的画布上，并使用它们自己的位置值。 非常感谢兄弟。

是的，就像 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;
}`