Angular ile PDF Çıktı Almak

Standard

 

Merhaba Arkadaşlar.

Standart html projelerimizde pdf, excel ve ekran görüntüsü çıktılarını çok karmaşık olmadan bir takım eklentiler ile yapabiliyorduk. Angular projelerde bu durum yeni başlayanlar için biraz karmaşıklaşabiliyor. Bu yazımızda Angular 2 için bu karmaşadan çok basit bir şekilde nasıl kurtulabileceğinizi anlatacağım.

Bu işlem için iki eklentiye ihtiyacımız var. html2canvas ve pdfmake.

Eklentileri projeye dahil etmek için proje anadizininde iken konsolunuzdan

bower install html2canvas

bower install pdfmake

yazarak çalıştırmanız yeterli. 

Eğer bower projeye dahil edilmemiş ise npm install bower komut satırını çalıştırmanız kafi gelecektir. Yok bu da çalışmaz ise artık bilgisayarınıza nodejs yüklemelisiniz. Bunu da bir başka makalede ele alırız.

 

pdfmake’in bir çok özelliği var. PDF olarak çıktı alınacak belgenin style, table, image gibi içeriklerini json olarak belirleyebilirsiniz mesela; ancak bu yöntem sadece bir pdf çıktı için biraz uğraştırıcı olabilir. Eğer pdf çıktı üzerinde seçim düzenleme v.b. işlemler yapacaksanız tabi ki bu özellikleri kullanmak zorundasınız. Bu makalede basit olarak ekranı önce html2canvas sayesinde resim haline getireceğiz, ardından da pdfmake ile pdf dosyası şeklinde bilgisayara indirilmesini sağlayacağız.

Örnek Uygulama:

1- Html:

<html>
<head>
  <title>PDF Çıktı Örneği</title>
  <script src='build/pdfmake.min.js'></script>
  <script src='build/vfs_fonts.js'></script>
</head>
<body>
  <div id="pdfCikti">
     PDF çıktı için hazırlanacak veri bu alanda yer alacak. 
  </div>
  <button type="button" id="pdfOlustur">PDF Oluştur</button>
 </body>
</html>

2- Jquery

jQuery(document).on('click', '#pdfOlustur', function(){
 html2canvas(document.getElementById('pdfCikti'), {
 onrendered: function (canvas) {
 var data = canvas.toDataURL();
 var docDefinition = {
 content: [{
 image: data,
 width: 1024,
 }]
 };
 pdfMake.createPdf(docDefinition).download("pdfCikti.pdf");
 }
 });
 });

İşte hepsi bu kadar.

Tabii bower.json dosyanızda dependencies ve modüller kısmına html2canvas’ı ve tanımlamayı unutmamalısınız.

Umarım işinizi görür bu örnek.