JsPDF Ders-4 Html to Pdf
Geri Dön

JsPDF Ders-4 Html to Pdf

Anasayfa
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>



Anasayfa

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