html2Canvas + jspdf (의해 측정 가능한) 디스플레이 잔인 불완전 문제를 해결

블로그의 여러 족장을 본 후, 우리는 다음과 같은 솔루션에 온다.

<! DOCTYPE HTML>

<head>

<메타 캐릭터 = "UTF-8">

<메타 이름 = "뷰포트"내용 = "= 폭 소자 폭 초기 스케일 = 1.0">

<스크립트 SRC = "https://cdn.bootcss.com/jquery/3.4.1/jquery.js"> </ script>

<스크립트 유형 = "텍스트 / 자바 스크립트"SRC = "../ html2Canvas / 렌더링 - HTML - 투 - PDF 마스터 / 문서 / JS / html2canvas.js"> </ script>

<스크립트 유형 = "텍스트 / 자바 스크립트"SRC = "../ html2Canvas / 렌더링 - HTML - 투 - PDF 마스터 / 문서 / JS / jsPdf.debug.js"> </ script>

</ head>

<body>

<스타일>

.export_content {

폭 : 600PX;

높이 : 100 픽셀;

오버 플로우 : 자동;

}

#함유량{

폭 : 600PX;

높이 : 자동;

패딩 : 30 픽셀;

위치 : 절대;

Z- 색인 0;

}

</ 스타일>

<버튼 ID = "exportToPdf"> PDF로 내보내기 </ 버튼>

<DIV>

내가 뭔가를 내보낼

</ DIV>

<스크립트 유형 = "텍스트 / 자바 스크립트">

VAR downPdf = document.getElementById를 ( "exportToPdf");

downPdf.onclick = 함수 () {

VAR targetDom = $ ( "export_content.");

VAR copyDom targetDom.clone = () ATTR ( 'ID', '컨텐츠').;

copyDom.width (targetDom.width () + "픽셀");

. $ ( '몸') APPEND (copyDom);

html2canvas (

copyDom,

{

dpi로 : 172, // 수출 PDF 선명도

onrendered : 기능 (캔버스) {

VAR contentWidth = canvas.width;

VAR contentHeight = canvas.height;

// PDF로 HTML 페이지를 생성 캔버스 높이를 표시;

VAR의 pageHeight = contentWidth / 592.28 * 841.89;

//하지 생성 된 PDF HTML 페이지 높이

VAR leftHeight = contentHeight;

// PDF 페이지 오프셋

각 위치 = 0;

// HTML 페이지 캔버스는 PDF의 화상의 폭과 높이에 생성된다 (A4 용지 크기 [595.28,841.89])

imgWidth = 595.28이었다;

VAR imgHeight = 592.28 / contentWidth * contentHeight;

VAR pageData canvas.toDataURL = ( '영상 / JPEG', 1.0);

PDF이었다 새로운 jsPDF ( '', 'PT', 'A4를') =;

// 필요 (841.89)을,이 매우, 매우 실용적인 하나의 HTML 페이지 사이의 페이지 높이를 구별하고, PDF를 생성하는

// 표시 범위의 함량은 페이징없이 PDF를 초과하지 않을 때

경우 (leftHeight <pageHeight) {

pdf.addImage (pageData 'JPEG', 0, 0, imgWidth, imgHeight);

} 다른 {

반면 (leftHeight> 0) {

pdf.addImage (pageData 'JPEG', 0, 위치 imgWidth, imgHeight)

leftHeight - = pageHeight;

위치 - = 841.89;

// 피가 빈 페이지를 추가

경우 (leftHeight> 0) {

pdf.addPage ();

}

( 'content.pdf')를 pdf.save;

copyDom.remove ()

})

}

</ script>

</ body>

</ HTML>

이제 문제는 내용이 너무 오래 화면을 스플래시 할 때 찍은 경우가있다.

그러나 솔루션 생각합니다. 프로젝트가 VUE를 사용하기 때문에, 생성 된 키를 바인딩 할 수 있습니다 이 문제를 해결하기 위해 겉으로는 수. 너무 늦게 때문입니다. 우리는 테스트를 할 수가 없습니다. 이 블로그는 https://www.cnblogs.com/77yf/p/12452379.html 키를 사용하는 것입니다있다 (단지 아이디어를. 연습하지 않았다)

html2Canvas + jspdf (의해 측정 가능한) 디스플레이 잔인 불완전 문제를 해결

추천