JsPDF Ders-5 Ayarlar ve Pdfyi indirme
Geri Dön

JsPDF Ders-5 Ayarlar ve Pdfyi indirme

Anasayfa
JsPDF serimize devam ediyoruz.Bu son ders.Bu dersimizde pdf nin sayfa ayarlarını yapmayı ve oluşturduğumuz pdf yi indirmeyi göreceğiz.Ayarlardan başlayalım.

İndir : http://ustaderslik.com/dosya/jspdf-ayarlar.rar

İncele : http://ustaderslik.com/ornek/jspdf-ayarlar/

jsPDF(yön,ölçü,tip)

Bu şekilde 3 ayar bulunmakta.Geçen dersteki örnekte kullanmıştık.Şimdi açıklayayım.

Yön : Pdf deki sayfalar yatay mı yoksa dikey mi olacağını belirliyor.Varsayılan olarak p yani dikeydir.l yazarak yatay yapabilirsiniz.

Ölçü : Sayfaya ekleyeceğimiz nesneleri konumlandırmada kullanacağımız ölçü birimini belirliyoruz.Varsayılan olarak mm dir.Bunu cm,pt,in olarak değiştire biliyoruz.Webte en uygunu pt yani pixeldir.Bunla daha rahat pdf oluşturabiliriz.

Tip : Pdflerimzdeki sayfaların tipidir.Varsayılan olarak A4 tür.Sayfa tipini a3-a5-letter-legal da değiştirebilirsiniz.

Ayarlar bu şekilde.Pdf yi oluşturduktan sonra indirmek istediğimizde
pdf.save("dosya_ismi.pdf");

komutunu çalıştırarak indirebilirsiniz.

Genek örnek :
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>UstaDerslik</title>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="jspdf.min.js"></script>
<script type="text/javascript" src="html2canvas.js"></script>
<script type="text/javascript">
$(function(){
var pdf = new jsPDF('p','pt','a4');

pdf.addHTML($("#pdf"),function() {
var yazdir = pdf.output('datauristring');
$('#onizleme').attr("src",yazdir);

$("#indir").click(function(){
pdf.save("site.pdf");
})
});

})
</script>
<style type="text/css">
#pdf{width:100%;height:500px;background:#f1f1f1;position:absolute;left:0;top:0;z-index:-10;text-align:center;}
#pdf p{font-size:25px;}
.kutu{width:200px;height:200px;background:firebrick;margin-left:150px;float:left;}
button{width:100%;font-size:25px;}
</style>
</head>
<body>

<button id="indir">İndir</button>

<iframe id="onizleme" type="application/pdf" style="width:100%;height:900px;" frameborder="0"></iframe>

<div id="pdf">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean fringilla tempor libero in molestie. Donec tempus cursus eros eu efficitur. Morbi in metus velit. Quisque ac sem a ligula tincidunt luctus a eleifend enim.</p>
<div class="kutu"></div>
<div class="kutu"></div>
<div class="kutu"></div>
</div>

</body>
</html>



Anasayfa

Tüm Hakları Saklıdır. ©Arleone 2013-UstaDerslik