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>