JavaScript를 사용하여 HTML을 PDF로 변환하는 방법

5245 단어 jquerhtmljavascriptpdf
이 기사에서는 JavaScript를 사용하여 HTML을 PDF로 변환하는 방법을 살펴봅니다. PDF 파일 형식은 웹 애플리케이션에서 대량 데이터를 다운로드하는 데 매우 유용합니다. 사용자가 PDF 기능으로 내보내기와 함께 오프라인 사용을 위해 동적 콘텐츠를 파일 형식으로 다운로드하는 데 도움이 됩니다. JavaScript는 HTML을 PDF로 변환하는 가장 쉬운 방법이며 HTML에서 PDF를 생성하는 데 사용할 수 있는 다양한 JavaScript 라이브러리가 있습니다. jsPDF는 JavaScript를 사용하여 HTML을 PDF로 변환하는 최고의 라이브러리 중 하나입니다.

이제 javascript를 사용하여 PDF를 생성하고, jquery를 사용하여 HTML을 PDF로 변환하고, jspdf HTML을 PDF로, HTML을 PDF javascript로, jquery는 HTML을 PDF로 변환하고, jspdf는 HTML을 PDF로 변환하는 방법을 살펴보겠습니다.

Example: How To Convert HTML To PDF Using JavaScript



먼저 HTML을 PDF로 변환하기 위한 HTML 페이지를 생성합니다. HTML 페이지에 다음 코드를 추가합니다.

<html>
    <h1>How To Convert HTML To PDF Using JavaScript - Techsolutionstuff</h1>
    <form class="form">        
        <table>  
            <tbody>  
                <tr>  
                    <th>Company Name</th>  
                    <th>Employee Name</th>  
                    <th>Country</th>  
                </tr>  
                <tr>  
                    <td>Dell</td>  
                    <td>Maria</td>  
                    <td>Germany</td>  
                </tr>  
                <tr>  
                    <td>Asus</td>  
                    <td>Francisco</td>  
                    <td>Mexico</td>  
                </tr>  
                <tr>  
                    <td>Apple</td>  
                    <td>Roland</td>  
                    <td>Austria</td>  
                </tr>  
                <tr>  
                    <td>HP</td>  
                    <td>Helen</td>  
                    <td>UK</td>  
                </tr>  
                <tr>  
                    <td>Lenovo</td>  
                    <td>Yoshi</td>  
                    <td>Canada</td>  
                </tr>
            </tbody>  
        </table><br>  
        <input type="button" id="create_pdf" value="Generate PDF">  
    </form>  
</html>



Read Also: How To Disable Right Click Using jQuery


이 HTML 페이지의 스타일을 추가하십시오.

<style>
table {  
    font-family: arial, sans-serif;  
    border-collapse: collapse;  
    width: 100%;  
}  

td {  
    border: 1px solid #dddddd;  
    text-align: left;  
    padding: 8px;  
} 
th{
    border: 1px solid #dddddd;  
    text-align: left;  
    padding: 8px;  
    background-color: #111;  
    color:white;
}

tr:nth-child(odd) {  
    background-color: #dddddd;  
}
</style>



Read Also: jQuery Image Magnifier on Mouse Hover


PDF로 변환하기 위해 HTML 페이지에 다음 스크립트를 추가합니다.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js"></script>  
<script>
$(document).ready(function () {  
    var form = $('.form'),  
    cache_width = form.width(),  
    a4 = [595.28, 841.89]; // for a4 size paper width and height  

    $('#create_pdf').on('click', function () {  
        $('body').scrollTop(0);  
        createPDF();  
    });  

    function createPDF() {  
        getCanvas().then(function (canvas) {  
            var  
             img = canvas.toDataURL("image/png"),  
             doc = new jsPDF({  
                 unit: 'px',  
                 format: 'a4'  
             });  
            doc.addImage(img, 'JPEG', 20, 20);  
            doc.save('Bhavdip-html-to-pdf.pdf');  
            form.width(cache_width);  
        });  
    }  

    function getCanvas() {  
        form.width((a4[0] * 1.33333) - 80).css('max-width', 'none');  
        return html2canvas(form, {  
            imageTimeout: 2000,  
            removeContainer: true  
        });  
    }
});
</script>



당신은 또한 좋아할 수 있습니다:
  • Read Also: Laravel 8 Generate PDF Using DomPDF
  • Read Also: How To Generate PDF From HTML View In Laravel
  • Read Also: How To Get Selected Checkbox List Value In Jquery
    • 아르보레 비나리아
    [C#] OxyPlot Tips집

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage