JsPDF Ders-5 Ayarlar ve Pdfyi indirme
UstaDerslik Soru-Cevap Yararlı Araçlar
arama ikon
Diller
Türkçe Türkçe

bilgi UstaDerslik
Bu uyari kutusudur.
Tamam
Anasayfa
İletişim
Üyeler

JsPDF Ders-5 Ayarlar ve Pdfyi indirme

profil
cArleone
BEĞEN(0)
BEĞENME(0)
GÖRÜNTÜLENME(2280)
RAPOR ET
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>



Kod
Kalın
Vurgu
Resim
Video
Url
CEVAPLA
Tüm Hakları Saklıdır. ©Arleone 2013-2014 UstaDerslik






Giriş
Şifremi Unuttum...
Şifre Talep
  Kuralları Kabul Ediyorum.
Kaydol