jspdf html2canvas 예제

때로는 단추를 클릭하기만 하면 웹 페이지에서 특정 개체(예: 테이블, 텍스트 필드)에 대한 이미지를 얻는 것이 유용할 수 있습니다. 다른 경우에, 그냥 개체의 스크린 샷을 가지고 이미지로 웹 페이지의 특정 섹션에 배치 할 수 있습니다. html2canvas와 jsPDF : 이러한 작업을 완료하기 위해 두 개의 자바 스크립트 라이브러리를 발견했습니다. 두 라이브러리모두 무료로 이용 가능합니다. 첫 번째 라이브러리에는 DOM을 기반으로 스크린샷을 빌드하기 위한 논리가 포함되어 있습니다. 두 번째 라이브러리는 캔버스를 PDF 파일로 저장합니다. 그래서 우리는 텍사스 홀덤 포커에 대한 시작 손을 보여주는 테이블로 끝납니다. 또한 사용자는 테이블을 조작하여 특정 홀딩으로 플레이할 의사가 있는 손을 표시할 수 있습니다. 이 예제에서 사용자는 위에서 설명한 상황을 설명하려고 합니다. 브라우저에서 실행되는 응용 프로그램으로 구현했습니다. 기본적으로 다음과 같습니다 : 다음은 jsPDF를 사용하여 PDF를 생성하는 완전한 예입니다. 그리고 `이 아래 의 내부 `자기`와 참조, Angular2 +에서 PDF 파일을 생성하려면 (특히 각도4), 먼저 설치 jspdf 여기에 우리가 라인에 적용 할 수있는 기능의 일부입니다 : 여기 우리는 하나의 기능을 사용했다 generatePDF() html2canvas를 사용하여 단일 HTML 페이지의 세 섹션을 PDF 파일의 세 페이지로 변환합니다. html2canvas를 사용하면 html 페이지 또는 요소를 잡고 PDF로 배치할 수 있습니다.

먼저 html2canvas 및 입력을 설치하면 내 프로젝트가 화면에이 테이블을 표시합니다. 그러나 그림으로 버튼을 클릭하여 결과 테이블을 저장하는 것이 좋지 않을까요? 예를 들어, 당신의 전략을 배우거나 친구들과 공유하기 위해? 라이브러리의 구문을 설명하기 위해 내 작은 개인 프로젝트에서 사용 사례의 간단한 예를 들어 보겠습니다. 대신 이와 같은 html2캔버스를 중심으로 jsPDF를 래핑하고 npm 실행 빌드로 라이브러리를 빌드할 수 있습니다. 이렇게하면 모든 종속성을 가져온 다음 dist 파일을 컴파일합니다. 로컬예제를 보려면 npm 시작으로 웹 서버를 시작하고 localhost:8000으로 이동하여 확인할 수 있습니다. 나는 아직도 문제가 있다. 나는 5 다른 divs에 대한 html2캔버스에 5 호출이 있습니다. 때때로 그들은 올바른 순서로 발사하고 때로는 하지 않습니다. 경우에 따라 dataURL에 대한 호출이 순서대로 끝나고 그렇지 않은 경우도 있습니다. 이 문제를 어떻게 해결합니까? PDF의 초기화가 있는 첫 번째 이미지를 추가하거나 이미지가 잘못된 순서로 표시되기 전에 후속 이미지를 시도하면 코드가 실패합니다.