자바스크립트를 사용하여 HTML 페이지에서 div를 PDF로 다운로드합니다.

자바스크립트를 사용하여 HTML 페이지에서 div를 PDF로 다운로드합니다.

ID가 "content"인 content div가 있습니다.컨텐츠 div에는 그래프와 표가 몇 개 있습니다.나는 사용자가 다운로드 버튼을 클릭하면 그 div를 pdf로 다운로드하고 싶습니다.자바스크립트나 jQuery를 이용해서 할 수 있는 방법이 있습니까?

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>

JavaScript:

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');
});

내부 내용<div class='html-content'>....</div>jspdf & html2pdf를 사용하는 스타일로 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 캔버스와 jspdf에서 pdf 생성.

누군가에게 도움이 될 수도 있습니다.

솔루션을 사용하려면 html을 html에서 pdf 기능이 있는 백엔드 서버로 전달한 다음 생성된 pdf 출력을 브라우저로 반환하는 몇 가지 Ajax 방법이 필요합니다.

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

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

그런 다음 html2pdf 생성 스크립트(인터넷 어딘가)에서 데이터를 가로채십시오.
convert_to_pdf.php(JQUERY 코드에서 url로 제공됨)은 다음과 같이 보입니다.

<?php
    $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;
?>

AFAIK 이를 수행하는 네이티브 jquery 함수는 없습니다.서버에서 변환을 처리하는 것이 가장 좋습니다.이 작업을 수행하는 방법은 사용 중인 언어(.net, php 등)에 따라 다릅니다.div의 내용을 변환을 처리하는 함수로 전달하면 사용자에게 PDF가 반환됩니다.

네, JS에서 div를 PDF로 캡처하는 것이 가능합니다.https://grabz.it 에서 제공하는 솔루션을 확인할 수 있습니다.그들은 디브나 스팬과 같은 단일 HTML 요소의 내용을 캡처할 수 있는 멋지고 깨끗한 자바스크립트 API를 가지고 있습니다.

필요한 앱+키와 무료 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-screen shot 메커니즘에 대해 수행할 수 있는 다른 구성 및 사용자 지정이 있습니다. 여기에서 확인하십시오.

언급URL : https://stackoverflow.com/questions/17293135/download-a-div-in-a-html-page-as-pdf-using-javascript