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

Bir Cevap Yazın

Aşağıya bilgilerinizi girin veya oturum açmak için bir simgeye tıklayın:

WordPress.com Logosu

WordPress.com hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap / Değiştir )

Twitter resmi

Twitter hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap / Değiştir )

Facebook fotoğrafı

Facebook hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap / Değiştir )

Google+ fotoğrafı

Google+ hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap / Değiştir )

Connecting to %s