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