3 0
Read Time:4 Minute, 41 Second

JavaScript ile HTML PDF Çeviri İşlemi. Merhaba arkadaşlar ben geçen bir sorunlar karşılaştım. Projemiz de gerekli olan bir yerde PDF dönüştürme yapmamız gerekiyordu Back-End üstadı Hasan ile FPDF kullanalım dedik tabi benim biraz geç çözdüğüm yapı olunca dedim ben bakacağım Fpdf yerine alternatif var mı varmış JavaScript ile olayı çok basit bir şekilde çözdük ihtiyacımızı ve sorunumuzu gayet karşıladı. Neyse tatava yapmayı bırakıyor ve çözüme geçiyorum. Örnekler ile devam edeceğim.

Kullanacağımız Kütüphaneler;
1. JSPDF.js
2. html2canvas.js
3. Jquery 1.12.4.min.js

Sitenizin <head></head> tagları arasına ekleyeceğiniz Dış bağlantıları altta paylaşıyorum.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>  
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js"></script>

Örnek HTML sayfamızı yapalım CSS kullanabilirsiniz bu arada istediğiniz kadar. Ben Bootstrap kütüphanesini kullandığım için burada basit örnek ile gideceğiz.

HTML SAYFAMIZ

<form class="form" style="max-width: none; width: 1005px;">  


<h2 style="color: #0094ff">Merhabalar</h2>
<h3>Proje hakkında bir kısa not:</h3>
<p style="font-size: large">
Javascript ile Jquery Sorgularını kullanarak HTML sayfanızı nasıl yazdıracağınız hakkında bir örnektir. Bende yabancı bir siteden yardım alarak uyguladım. Yazı Türkçe kaynak olması için eklendi.
</p>
<table>
<tbody>
<tr>
<th>Şirket</th>
<th>Yetkili</th>
<th>Ülkesi</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</tbody>
</table>


</form>

Burada CSS kodu da yazabiliriz demiştim azıcık renklendirelim kardeşim.

<style>  
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}

td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}

tr:nth-child(even) {
background-color: #dddddd;
}
</style>

Sayfanızda herhangi bir yere Print yaptırmak için Button ekleyiniz.

<input type="button" id="create_pdf" value="PDF OLUŞTUR">

Şimdi ise o meşhur sorgularımızı ekleyelim dikkat ediniz yukarıda PDF oluştur butonun da id= “create_pdf” değerini butonda tetikleteceğiz ve aşağıdaki sorguları çalıştıracağız.

JS Sorgularımız

<script>  
(function () {
var
form = $('.form'), //yukarıdaki html kodunda class degerimiz
cache_width = form.width(),
a4 = [595.28, 841.89]; // a4 boyutlari girildi.

$('#create_pdf').on('click', function () {
$('body').scrollTop(0);
createPDF();
});
//PDF olustur
function createPDF() {
getCanvas().then(function (canvas) {
var
img = canvas.toDataURL("image/png"),
doc = new jsPDF({
unit: 'px',
format: 'a4'
});
doc.addImage(img, 'JPEG', 20, 20);
doc.save('DenedimGordum.pdf'); //PDF ismi burada
form.width(cache_width);
});
}

// create canvas object
function getCanvas() {
form.width((a4[0] * 1.33333) - 80).css('max-width', 'none');
return html2canvas(form, {
imageTimeout: 2000,
removeContainer: true
});
}

}());
</script>
<script>
/*
* jQuery helper plugin for examples and tests
*/
(function ($) {
$.fn.html2canvas = function (options) {
var date = new Date(),
$message = null,
timeoutTimer = false,
timer = date.getTime();
html2canvas.logging = options && options.logging;
html2canvas.Preload(this[0], $.extend({
complete: function (images) {
var queue = html2canvas.Parse(this[0], images, options),
$canvas = $(html2canvas.Renderer(queue, options)),
finishTime = new Date();

$canvas.css({ position: 'absolute', left: 0, top: 0 }).appendTo(document.body);
$canvas.siblings().toggle();

$(window).click(function () {
if (!$canvas.is(':visible')) {
$canvas.toggle().siblings().toggle();
throwMessage("Canvas Render visible");
} else {
$canvas.siblings().toggle();
$canvas.toggle();
throwMessage("Canvas Render hidden");
}
});
throwMessage('Screenshot created in ' + ((finishTime.getTime() - timer) / 1000) + " seconds<br />", 4000);
}
}, options));

function throwMessage(msg, duration) {
window.clearTimeout(timeoutTimer);
timeoutTimer = window.setTimeout(function () {
$message.fadeOut(function () {
$message.remove();
});
}, duration || 2000);
if ($message)
$message.remove();
$message = $('<div ></div>').html(msg).css({
margin: 0,
padding: 10,
background: "#000",
opacity: 0.7,
position: "fixed",
top: 10,
right: 10,
fontFamily: 'Tahoma',
color: '#fff',
fontSize: 12,
borderRadius: 12,
width: 'auto',
height: 'auto',
textAlign: 'center',
textDecoration: 'none'
}).hide().fadeIn().appendTo('body');
}
};
})(jQuery);

</script>

Evet arkadaşlar düzgünce kodları eklediğimiz zaman aşağıdaki sonuca erişeceksiniz;

Image for post
Biz böyle bir tasarım yaptık.

Evet şimdi çalışma mantığına gelelim sizin sayfanızdaki yazdırılacak alanı önce görüntüsünü yani image alıyor ve daha sonra aldığı görseli PDF generator ile pdf’e çeviriyor. Mantık basit aslında önce ekranı çek sonra pdf yap baba ☺. Çok kabaca oldu özür dilerim.
PDF OLUŞTUR butonundan sonra bize indirilen pdf dosyasının görüntüsü de aşağıdaki gibi;

Image for post
PDF OLUŞTURULDU

Bu arada çalışan örneğini de bırakıyorum üşenirim derseniz buradan tıklayıp bakabilirsiniz kaynak kodlarına.

Üşendim DEMO’ya BAK

Sizi daha çok tutmayalım bizim sonuca ulaştığımızı gösterdiğimize göre kodları da paylaştığımıza göre artık gidebiliriz. Kendinize iyi bakın yeni yazılarda görüşmek üzere.

Yazar Hakkında

Kürşad Aydın

Genç bilgi deneyimi olan Front-End Seven bir kardeşiniz.
Happy
Happy
100 %
Sad
Sad
0 %
Excited
Excited
0 %
Sleepy
Sleepy
0 %
Angry
Angry
0 %
Surprise
Surprise
0 %

Average Rating

5 Star
0%
4 Star
0%
3 Star
0%
2 Star
0%
1 Star
0%

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir