22 Nisan 2021

Javascript ile HTML i PDF'e çevirme (html-to-pdfmake, pdfmake)

jsPDF düzgün bir görüntü vermediği için pdfmake ve html-to-pdfmake kullanılmıştır.

Eğer bu kütüphaneleri kullanacaksanız iki kütüphaneye de github üzerinden yıldız vermeyi unutmayın. 

Kullanılan Kütüphaneler

https://pdfmake.github.io/docs/0.1/

https://github.com/Aymkdn/html-to-pdfmake

<!doctype html>
<html lang='en'>
    <head>
        <meta charset='utf-8'>
        <title>my example</title>
        <style>
        /*Hide style for print screen*/
        
            @media print {
            .noPrint {
                display: none;
            }
        }
        </style>
    </head>
    <body>
        <div class="noPrint">
            <button type="button" onclick="downloadPdf()">PDF(HtmlToPdfMaker)</button>
            <!--Print doesn't come with pdf download option on mobile phones, but it has save as pdf option on web browsers in Windows-->
            <button type="button" onclick="window.print()">Print(Vanilla JS)</button>
        </div>
        <div id="pdfContent">
            <h1>Some Html Codes</h1>
        </div>

        <script src='https://cdn.jsdelivr.net/npm/pdfmake@latest/build/pdfmake.min.js'></script>
        <script src='https://cdn.jsdelivr.net/npm/pdfmake@latest/build/vfs_fonts.min.js'></script>
        <script src="https://cdn.jsdelivr.net/npm/html-to-pdfmake/browser.js"></script>
        <script>
            function downloadPdf() {
                var val = new htmlToPdfmake(document.getElementById('pdfContent').innerHTML);
                var dd = { content: val };
                pdfMake.createPdf(dd).download('FileName.pdf');                
            }
        </script>
    </body>
</html>