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.

Node Modules versiyon uyuşmazlığı (gulp build sorunu)

Standard

Merhaba Arkadaşlar;

Node Js ile yeni yeni proje geliştirirken ilginç bir durum fark ettim. Yeni başlayan arkadaşlar da faydalanır düşüncesi ile sizinle de paylaşıyorum.

Örneğin daha önce Gulp.js ile derlenmiş (build edilmiş) bir projede bilgisayarda ki nodejs versiyonu değiştiğinde (genellikle update edildiğinde) eski sürüm ile gelen nodejs modülleri bir sonraki build işlemlerinizde hata verebiliyor ve hatta zaman zaman bazı durumlarda build işlemini gerçekleştiremiyor. Benim de çözmek için çok uzun zamanımı alan bu durumu fark edip biraz araştırdığımda aşağıdaki çözüme ulaştım. Benim için çalıştı bir sorun ile karşılaşmadım. Umarım size de faydası olur.
1. Çözüm:
Sırası ile uygulanması gereken adımlar;
npm install -g salita
satila package.json dosyanızda ki sürümleri güncelleyecektir.
npm update --save
Eğer --save kısmını eklemezseniz çok fazla uzun sürebiliyor güncelleme işlemi ve hatta donup kalma olasılığı var.
Bu işlem biraz zaman alabiliyor. Sabretmelisiniz.

2. Çözüm:
1. Çözüm sonrasında libsass bindings not found gibi bir mesaj alırsanız eğer node-sass güncellenmesi ya da yeniden kurulması gerekir.
Bu işlem için aşağıdaki adımları deneyin.

npm install node-sass
ya da

npm uninstall node-sass
npm install node-sass

3. Çözüm:
Eğer yukarıdaki işlem sizin için çözüm olmaz ise alternatif yol olarak aşağıdaki çözümü uygulayabilirsiniz.
1. package.json dosyanızda gulp-sass için kullanacağınız versiyonu aşağıdaki şekilde belirtin.

"devDependencies" {
"gulp-sass":"*"
}

2. Projenizdeki node_modules dizinini siliyoruz.

cd [proje ana dizini] &&
rm -rf node_modules/

3. npm güncelliyoruz.
npm update

Şu andan itibaren npm ve node modülleri tamamen yeni versiyona göre ayarlanmış oldu. Artık gulp build diyebiliriz.