javascript를 사용하여 HTML 페이지의 div를 pdf로 다운로드

Question 1

ID가 "content"인 콘텐츠 div가 있습니다. 콘텐츠 div에는 그래프와 테이블이 있습니다. 사용자가 다운로드 버튼을 클릭하면 해당 div를 pdf로 다운로드하고 싶습니다. javascript 또는 jQuery를 사용하여 수행하는 방법이 있습니까?

Question 2

jsPDF를 사용하여 할 수 있습니다.

HTML :

<div id="content">
     <h3>Hello, this is a H3 tag</h3>

    <p>A paragraph</p>
</div>
<div id="editor"></div>
<button id="cmd">generate PDF</button>

자바 스크립트 :

var doc = new jsPDF();
var specialElementHandlers = {
    '#editor': function (element, renderer) {
        return true;
    }
};

$('#cmd').click(function () {
    doc.fromHTML($('#content').html(), 15, 15, {
        'width': 170,
            'elementHandlers': specialElementHandlers
    });
    doc.save('sample-file.pdf');
});

Question 3

안에있는 콘텐츠는 jspdf 및 html2canvas를<div class='html-content'>....</div> 사용하여 스타일이있는 pdf로 다운로드 할 수 있습니다 .

두 js 라이브러리를 모두 참조해야합니다.

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>
<script type="text/javascript" src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>

그런 다음 아래 함수를 호출하십시오.

//Create PDf from HTML...
function CreatePDFfromHTML() {
    var HTML_Width = $(".html-content").width();
    var HTML_Height = $(".html-content").height();
    var top_left_margin = 15;
    var PDF_Width = HTML_Width + (top_left_margin * 2);
    var PDF_Height = (PDF_Width * 1.5) + (top_left_margin * 2);
    var canvas_image_width = HTML_Width;
    var canvas_image_height = HTML_Height;

    var totalPDFPages = Math.ceil(HTML_Height / PDF_Height) - 1;

    html2canvas($(".html-content")[0]).then(function (canvas) {
        var imgData = canvas.toDataURL("image/jpeg", 1.0);
        var pdf = new jsPDF('p', 'pt', [PDF_Width, PDF_Height]);
        pdf.addImage(imgData, 'JPG', top_left_margin, top_left_margin, canvas_image_width, canvas_image_height);
        for (var i = 1; i <= totalPDFPages; i++) { 
            pdf.addPage(PDF_Width, PDF_Height);
            pdf.addImage(imgData, 'JPG', top_left_margin, -(PDF_Height*i)+(top_left_margin*4),canvas_image_width,canvas_image_height);
        }
        pdf.save("Your_PDF_Name.pdf");
        $(".html-content").hide();
    });
}

참조 : html canvas 및 jspdf에서 pdf 생성 .

이것이 누군가를 도울 수 있습니다.

Question 4

솔루션에는 html to pdf 기능이있는 백엔드 서버에 html을 전달한 다음 생성 된 pdf 출력을 다시 브라우저에 반환하는 ajax 메소드가 필요합니다.

먼저 클라이언트 측 코드를 설정하고 jquery 코드를 다음과 같이 설정합니다.

   var options = {
            "url": "/pdf/generate",
            "data": "data=" + $("#content").html(),
            "type": "post",
        }
   $.ajax(options)

그런 다음 다음과 같이 html2pdf 생성 스크립트에서 데이터를 가로 챕니다.

   $html = $_POST['data'];
   $pdf = html2pdf($html);

   header("Content-Type: application/pdf"); //check this is the proper header for pdf
   header("Content-Disposition: attachment; filename='some.pdf';");
   echo $pdf;

Question 5

AFAIK에는이를 수행하는 기본 jquery 함수가 없습니다. 가장 좋은 방법은 서버에서 변환을 처리하는 것입니다. 이를 수행하는 방법은 사용중인 언어 (.net, php 등)에 따라 다릅니다. div의 내용을 변환을 처리하는 함수에 전달할 수 있으며, 그러면 사용자에게 pdf가 반환됩니다.

Question 6

예, JS에서 div를 PDF로 캡처 할 수 있습니다. https://grabz.it에서 제공하는 솔루션을 확인할 수 있습니다 . div 또는 span과 같은 단일 HTML 요소의 콘텐츠를 캡처 할 수있는 멋지고 깨끗한 JavaScript API가 있습니다.

그래서, 당신은 그것을 사용하고 app + key 및 무료 SDK 가 필요합니다 . 사용법은 다음과 같습니다.

HTML이 있다고 가정 해 보겠습니다.

<div id="features">
    <h4>Acme Camera</h4>
    <label>Price</label>$399<br />
    <label>Rating</label>4.5 out of 5
</div>
<p>Cras ut velit sed purus porttitor aliquam. Nulla tristique magna ac libero tempor, ac vestibulum felisvulput ate. Nam ut velit eget
risus porttitor tristique at ac diam. Sed nisi risus, rutrum a metus suscipit, euismod tristique nulla. Etiam venenatis rutrum risus at
blandit. In hac habitasse platea dictumst. Suspendisse potenti. Phasellus eget vehicula felis.</p>

기능 ID 아래에있는 것을 캡처하려면 다음을 수행해야합니다.

//add the sdk
<script type="text/javascript" src="grabzit.min.js"></script>
<script type="text/javascript">
//login with your key and secret. 
GrabzIt("KEY", "SECRET").ConvertURL("http://www.example.com/my-page.html",
{"target": "#features", "format": "pdf"}).Create();
</script>

를 http://www.example.com/my-page.html대상 URL 및 #featureCSS 선택기 로 바꿔야합니다 .

그게 다야. 이제 페이지가로드 될 때 이미지 스크린 샷이 스크립트 태그와 동일한 위치에 생성되며, 여기에는 기능 div의 모든 콘텐츠 만 포함됩니다.

div 스크린 샷 메커니즘에 대해 수행 할 수있는 다른 구성 및 사용자 정의는 여기에서 확인 하십시오.