<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 안녕하세요 저도 같은 문제를 겪고 있는데 문제를 해결하셨나요?
현재 내 프로젝트는 인터넷 익스플로러, 엣지, 크롬, 오페라에서만 작동합니다. 내 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과 동일한 문제일 것입니다.

크롬:

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 알겠습니다. 제가 사용하고 있는 알파 버전은 안타깝게도 Internet Explorer에서 SVG를 지원하지 않습니다. 다음 릴리스를 기다려야 할 것 같습니다.

실제로 html2canvas와 함께 eKoopmans/html2pdf를 사용하고 있습니다.

그것은 여전히 ​​ie 11에서 작동하지 않습니다. 아래는 내가 사용하는 코드입니다.

데이터 = document.getElementById('contentToConvert');
html2canvas(데이터, {
onrendered: 함수(캔버스) {
imgWidth = 208;
페이지 높이 = 295;
let imgHeight = canvas.height * imgWidth / canvas.width;
let heightLeft = imgHeight;
const contentDataURL = canvas.toDataURL('이미지/png')
let pdf = new jspdf('p', 'mm', 'a4'); // PDF의 A4 크기 페이지
위치 = 0으로 두십시오.
pdf.addImage(contentDataURL, 'PNG', 0, 위치, imgWidth, imgHeight)
pdf.save("testf .pdf'); // 생성된 PDF
}
});

저도 같은 문제가 있는데 IE 11에서 작동하지 않습니다. 제가 하려고 하는 것은 일부 하이차트 그래프(svg)가 있는 보고서 페이지용 PDF 파일을 생성하는 것입니다. html2canvas와 jspdf를 사용하고 있습니다. 나는 버전에서 전환 할 때 [email protected]을 에 [email protected] , 그것은 highchart 그래프를 표시 할 수 있지만, 레이아웃 등의 다른 문제가있다. [email protected] 을 사용하면 캔버스를 생성할 때 모든 하이차트 그래프가 비어 있게 됩니다.

이 수정 사항이 포함된 새 릴리스를 기대하고 있습니다.

이것은 여전히 ​​1.0.0-rc.1의 문제입니다. IE11은 하이차트(svg 캔버스)를 볼 수 없지만 Chrome 및 Firefox는 볼 수 있습니다.

여전히 1.0.0-rc.3의 문제인 것 같습니다.

이 문제에 대한 업데이트가 있습니까?
또한 무질서한 그래프 데이터가 나타납니다.

1.0.0-rc.5를 사용하도록 업데이트했습니다. 그러나 여전히 작동하지 않습니다.
Bill Gates 씨는 즉시 IE에 지원 종료를 알리시겠습니까? 그럼 포기할수도....

소식이 있나요? 내 프로젝트에서 마지막으로 필요한 것은 IE11의 좋은 pdf입니다.

여전히 svg로 IE11에서 작동하지 않습니다. 아무도 해결 방법이 있습니까?

@kuldip27792
먼저 canvg 를 사용한 다음 html2canvas를 사용하십시오.

내 팀원이 대안을 제안합니다. PDF가 실시간으로 생성해야 하는 필수 항목이 아닌 경우 옵션으로 볼 수 있습니다.

1단계. google-chrome 설치
2단계. google-chrome 명령 프롬프트를 사용하여 렌더링된 html을 png/pdf로 캡처

예
크롬 --headless --print-to-pdf="d:\{{경로 및 파일 이름}}.pdf" https://google.com

이 경우 생성된 PDF는 사용 중인 브라우저에 관계없이 동일한 스타일이 됩니다.
까다롭지만 나를 위해 일하십시오.

@fiftyk 나는
@martinknc 제안에 감사하지만 내 프로젝트에서 실시간이 필요합니다.

@kuldip27792 우리는 IE11을 스크린샷으로 호출하는 버튼으로 제거된 페이지로 시작했습니다. 좋지는 않지만 우리 고객에게는 충분합니다.

@fiftyk 귀하의 솔루션을 시도했지만 훌륭하게 작동했습니다. 그래서 내가하고있는 일은 모든 svg 요소를 수집하고 자체 위치 값을 사용하여 html2canvas에서 만든 캔버스에 렌더링하는 것입니다. 고마워요 형.

네, ahmeturun처럼, 이것은 저도 하는 일입니다. 첨부된 것은 svgs가 스크린샷에 렌더링되도록 하는 TypeScript 기능입니다.
`
'canvg'에서 { Canvg } 가져오기;
...
개인 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;
}`