집 > 기사 > 웹 프론트엔드 > js를 사용하여 HTML을 PDF로 변환

js를 사용하여 HTML을 PDF로 변환

php中世界最好的语言원래의: 2018-03-20 09:55:063328검색

이번에는 js를 사용하여 html을 pdf로 변환하는 경우와 js를 사용하여 html을 pdf로 변환하는 경우의 주의사항을 알려드리겠습니다. 아래는 실제 사례입니다.

그래서 이 기능을 테스트하기 위해 작은 케이스를 만들었습니다.

<body>
    <!-- PDF -->
    <p class="bb" id="ctn">
        <p class="anliu" id="anliu">生成PDF</p>
  
    </p></body><script src="../../Scripts/aps/html2canvas.js"></script><script src="../../Scripts/aps/jsPdf.debug.js"></script>

js 작성 방법

window.onload =function(){var downPdf = document.getElementById("anliu");
downPdf.onclick = function() {
   html2canvas(document.body, {
        onrendered: function(canvas) {                //返回图片URL，参数：图片格式和清晰度(0-1)
                  var pageData = canvas.toDataURL('image/jpeg', 1.0);                  //方向默认竖直，尺寸ponits，格式a4【595.28,841.89]
                  var pdf = new jsPDF('', 'pt', 'a4');                  //需要dataUrl格式
                  pdf.addImage(pageData, 'JPEG', 0, 0, 595.28, 592.28/canvas.width * canvas.height );
                  pdf.save('tup.pdf');
            
        }
    });
}
}

1. 테스트 작성 후 오류가 보고되었습니다. 'HTMLCanvasElement'에서 'toDataURL' 실행 실패: 오염된 캔버스를 내보낼 수 없습니다. 그래서 방법을 바꿔서 테스트용 사진을 모두 삭제한 뒤 pdf를 생성해 보았는데, 오류의 원인은 사진 때문이었던 것 같습니다.

정보를 확인해보니 이미지와 페이지가 서로 다른 도메인에 있고, 직설적으로 말하면 서버 환경에서 접속해야 하는 문제가 있었습니다. 그래서 서버 환경에서 테스트하는데 문제가 없었고 pdf 파일이 성공적으로 생성되었습니다.

2 html2canvas.js의 스크린샷이 불완전한 문제

이 테스트 구현 기능을 프로젝트에 넣었을 때 생성된 PDF에 페이지 창의 보이는 영역만 있다는 새로운 문제가 발생했습니다. , 스크롤바가 있는 하단 부분은 나오지 않습니다.

그래서 다시 검색해 보니 html2canvas는 캡처된 이미지의 높이를 지원하지 않습니다. 이로 인해 스크롤 막대가 나타나면 전체 이미지가 캡처되지 않습니다. 스크린샷을 기반으로 jsPdf.js로 생성된 PDF는 불완전합니다. html2canvas 스크린샷 때문에 발생하는 문제이므로 여기에서 해결해보겠습니다.

온라인에서 다른 사람들이 작성한 사례를 읽은 후 자체 테스트 및 분석을 결합하여 차단이 신체 수준에 있고 신체가 우연히 설정되면 overflow: 숨겨진 다음 초과 부분을 발견했습니다. 이 때문에 노드의 DOM 높이는 창에 표시되는 높이이며 스크롤 막대의 추가 부분을 포함하지 않습니다.

그래서 스크롤 막대 노드의 스타일을 height: auto;로 변경하여 하위 요소에 의해 높이가 확장되도록 했습니다. 위로 가서 모든 상위 노드를 제거하십시오. 오버플로: 숨겨진 요소를 표시하지 않도록 제거하십시오.

jquery

        var pdfcc = $('.pdf-cc');
        pdfcc.on('click', function (event) {
            html2canvas($("#bb-pdf-ctn"), {
                allowTaint: true,
                height: $("#bb-pdf-ctn").outerHeight(),
                onrendered: function (canvas) {                    //返回图片URL，参数：图片格式和清晰度(0-1)
                    var pageData = canvas.toDataURL('image/jpeg', 1.0);                    //方向默认竖直，尺寸ponits，格式a4【595.28,841.89]
                    var pdf = new jsPDF('', 'pt', 'a4');                    //需要dataUrl格式
                    pdf.addImage(pageData, 'JPEG', 0, 0, 595.28, 592.28 / canvas.width * canvas.height);
                    pdf.save('pdf.pdf');
                }
            });
        });

3을 도입한 후 프로젝트에서 다시 작성된 js를 살펴보세요. html2canvas는 2개의 새로운 매개변수를 설정했습니다.

Allow cross-domain:allowTaint: true,

Set height: height: $("#bb -pdf- ctn").outerHeight(),

높이는 스크롤 막대 노드의 높이입니다.

좋아, 이렇게 하면 스크롤 막대 영역의 불완전한 스크린샷 문제가 해결됩니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!