JsPDF Ders-4 Html to Pdf
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-4 Html to Pdf

profil
cArleone
BEĞEN(0)
BEĞENME(0)
GÖRÜNTÜLENME(2484)
RAPOR ET
JsPDF serimize devam ediyoruz.Bu derste html+css tasarımını pdf ye dönüştürmeyi işleyeceğiz.Çok iyi çalışan bir sistem değil.İnternette bunu çok daha iyi yapan siteler mevcut.Zaten bu seriyi hazırlarken daha yeni eklenmiş bir özellikti.İleride daha iyi hale getirirler büyük ihtimal.

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

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

Html verimizi pdf ye dönüştürecek kodumuz addHTML .Tek başına çalışmıyor,html2canvas.js yi de sayfamıza dahil etmemiz gerekiyor.Örnek içinde dosya mevcut.
pdf.addHTML($("seçici"),function() {
//işlemler
});

yukarıda seçici yazdığım yere pdf ye dönüşecek olan html bölümünü belirtiyoruz.Dönüşüm işlemi bittikten sonra işlemler yazdığım yerde önizleme veya indirme işlemini yapabiliriz.

Aşağıdaki örnekte jsPDF içine bir kaç parametre girdim.Bunları gelecek deste anlatacağım.

Genel ö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);
});


})
</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;}
</style>
</head>
<body>

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

<div id="pdf">
<h1>sdfdsfdsf</h1>
<p>sadsadasdsadasdsadasd dasdsd asd asd asd asdas dsadasddas sadasd</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