<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でのみ機能します。 私のHTML2PDFがFirefoxで機能しないため、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と同じ問題です。

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はSVGdomから3つの画像をキャプチャできません。

@ Paul-Kijtapartなるほど..私が使用しているアルファ版は、残念ながらInternet ExplorerのSVGをサポートしていません..次のリリースを待つ必要があると思います。

私は実際にhtml2canvasと一緒にeKoopmans / html2pdfを使用しています。

それはまだIE11で動作していません。以下は私が使用しているコードです。

let data = document.getElementById（ 'contentToConvert'）;
html2canvas（data、{
onrendered：function（canvas）{
imgWidth = 208;
pageHeight = 295;
imgHeight = canvas.height * imgWidth / canvas.width;
heightLeft = imgHeight;
const contentDataURL = canvas.toDataURL（ 'image / png'）
let pdf = new jspdf（ 'p'、 'mm'、 'a4'）; // PDFのA4サイズのページ
位置= 0とします。
pdf.addImage（contentDataURL、 'PNG'、0、position、imgWidth、imgHeight）
pdf.save（ "testf .pdf '）; //生成されたPDF
}
}）;

同じ問題があり、IE 11では機能しません。私がやろうとしているのは、いくつかのハイチャートグラフ（svg）を含むレポートページのPDFファイルを生成することです。 私はhtml2canvasとjspdfを使用しています。 バージョンを[email protected]から切り替えると、ハイチャートグラフが表示されますが、レイアウトなどの他の問題があります。 [email protected]を使用する

この修正を含む新しいリリースを楽しみにしています。

これは1.0.0-rc.1でもまだ問題です。 IE11はハイチャート（svgキャンバス）を表示しませんが、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私はあなたの解決策を試しましたが、

うん、ahmeturunのように、これも私がしていることです。 添付されているのは、スクリーンショットにsvgsをレンダリングするためのTypeScript関数です。
`
import {Canvg} from'canvg ';
..。
プライベートconvertSvgD3ChartsToPngs（）：HTMLImageElement [] {
const pngD3Charts：HTMLImageElement [] = [];

Array.from（document.getElementsByTagName（ 'svg'））。map（svg => {
let 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;
}`