Html Contenti jsPDF Kütüphanesi ile Pdf Olarak Export Etmek

Merhaba, bu yazımda render edilmiş herhangi bir html viewi (imageler da dahil olmak üzere) pdf olarak nasıl export ediceğimizden bahsedeceğim.

Öncelikle  sayfamızın header kısmına 2 farklı script kütüphanesi import etmemiz gerekiyor.


<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.debug.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>

Pdf olarak export edeceğimiz divi ekleyelim :

<div id="content" style="background-color: white;">
// Content Here
</div>
<button id="cmd" class="button btn-block">PDF Export</button>

‘content’ id’li divin içerisine her türlü html elementi ekleyebilirisiniz. Image tipindeki inputlar da dahil olmak üzere div içerisindeki tüm contenti pdf içerisinde görüntüleyebilirsiniz. Aşağıda ise jsPDF kütüphanemizi kullanarak pageContent.pdf dosyasına export eden basit bir jquery kodumuz bulunuyor.

$('#cmd').click(function () {
     var options = {
            pagesplit: true
      };
      var pdf = new jsPDF('p', 'pt', 'a4');
         pdf.addHTML($("#content"), 15, 15, options, function () {
               pdf.save('pageContent.pdf');
       });
});

İşte bu kadar basit. İyi Çalışmalar.

Reklamlar