이전 기사에서 저는 Canvas가 웹 페이지를 이미지로 스크린샷한다고 언급했습니다. 여기에 새로운 요구 사항이 있습니다: 웹 페이지를 스크린샷하고 사용자가 다운로드할 수 있도록 PDF 파일로 저장하는 것입니다.
캔버스를 사용하여 웹 페이지를 PDF 파일로 저장하면 교차 도메인 지원
텍스트요구 사항: 사용자가 다운로드를 클릭하고 페이지를 PDF 파일로 저장한 후 다운로드합니다.
아이디어: 계속해서 Canvas를 사용하여 스크린샷을 찍고 캔버스 콘텐츠를 PDF 파일로 변환하세요.
먼저 js 파일 jspdf.debug.js 다운로드 경로 https://github.com/MrRio/jsPDF를 소개해야 합니다.
캔버스의 js 파일 소개, js 파일 취득 주소 공식 홈페이지 : http://html2canvas.hertzen.com/
<script type=text/javascript src=js/html2canvas.js></script><script type=text/javascript src=js/html2canvas.min.js></script><script type=text/javascript src=js /jspdf.debug.js></script>
div 버튼 코드
<div id=down_pdf>PDF로 내보내기 버튼</div> <div class=sta-main>PDF로 얻어야 하는 div</div>
jsp 코드
<script type=text/javascript>/* var downPdf = document.getElementById(down_pdf); */var downPdf = document.getElementById(down_pdf);$(#down_pdf).on(click, function() { var canvas2 = 문서 .createElement(canvas); let _canvas = document.querySelector('.sta-main'); //너비와 높이 가져오기 var w = parsInt(window.getCompulatedStyle(_canvas).width); var h = parsInt(window.getCompulatedStyle(_canvas) .height); //캔버스 캔버스를 2배로 확대한 다음 작은 컨테이너에 배치하여 흐림을 처리합니다. canvas2.width = w * 2; canvas2.height = h * 2; canvas2.style.width = w + px; px; var context = canvas2.getContext(2d); //프로세스 오프셋 context.scale(1.5, 1.5); //배경색을 수정합니다. 기본값은 검정색입니다. $('.sta-main').css(배경, # fff) html2canvas( _canvas, { //교차 도메인 PDF가 교차 도메인 정보를 얻지 못하는 문제를 처리합니다. taintTest : false, useCORS : true, AllowTaint : false, canvas : canvas2, dpi: 172, //PDF 선명도 내보내기: function (canvas) { var contentWidth = canvas.width; var contentHeight = canvas.height; //pdf의 한 페이지에는 html 페이지에서 생성된 캔버스 높이가 표시됩니다. * 841.89 ; //PDF가 생성되지 않은 HTML 페이지 높이 var leftHeight = contentHeight; //PDF 페이지 오프셋 var position = 0; //pdf 이미지의 html 페이지에서 생성된 캔버스의 너비와 높이(a4 용지 크기[595.28,841.89]) var imgWidth = 595.28; var imgHeight = 592.28 / contentWidth * contentHeight; '이미지/jpeg', 1.0); var pdf = new jsPDF('', 'pt', 'a4'); //구별해야 할 두 가지 높이가 있는데, 하나는 html 페이지의 실제 높이이고, 다른 하나는 생성된 pdf의 페이지 높이(841.89)입니다. //콘텐츠가 표시 범위를 초과하지 않는 경우 pdf 페이지에서는 페이징이 필요하지 않습니다. if (leftHeight < pageHeight) { pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight) } else { while (leftHeight > 0); pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight) leftHeight -= pageHeight; position -= 841.89; //빈 페이지 추가 방지 if (leftHeight > 0) { pdf.addPage(); pdf.save('PDF 이름.pdf') } }) $('.sta-main').css(배경, )})</script>이번에는 웹 페이지가 PDF로 변경되고 웹 페이지의 마지막 스크린샷은 PNG입니다. 동일한 기술을 사용하여 둘 다 Canvas를 사용하여 캔버스를 먼저 캡처한 다음 형식을 변환합니다.
오프셋, 블러, 크로스 도메인 등과 같은 문제도 이전 코드를 사용하여 처리할 수 있습니다.
PDF를 변환하면 배경색이 검정색이 됩니다. CSS 스타일을 사용하여 배경색을 변경하세요.
PDF로의 완벽한 변환.
위의 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.