jsPDF düzgün bir görüntü vermediği için pdfmake ve html-to-pdfmake kullanılmıştır.
Eğer bu kütüphaneleri kullanacaksanız iki kütüphaneye de github üzerinden yıldız vermeyi unutmayın.
Kullanılan Kütüphaneler
https://pdfmake.github.io/docs/0.1/
https://github.com/Aymkdn/html-to-pdfmake
<!doctype html>
<html lang='en'>
<head>
<meta charset='utf-8'>
<title>my example</title>
<style>
/*Hide style for print screen*/
@media print {
.noPrint {
display: none;
}
}
</style>
</head>
<body>
<div class="noPrint">
<button type="button" onclick="downloadPdf()">PDF(HtmlToPdfMaker)</button>
<!--Print doesn't come with pdf download option on mobile phones, but it has save as pdf option on web browsers in Windows-->
<button type="button" onclick="window.print()">Print(Vanilla JS)</button>
</div>
<div id="pdfContent">
<h1>Some Html Codes</h1>
</div>
<script src='https://cdn.jsdelivr.net/npm/pdfmake@latest/build/pdfmake.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/pdfmake@latest/build/vfs_fonts.min.js'></script>
<script src="https://cdn.jsdelivr.net/npm/html-to-pdfmake/browser.js"></script>
<script>
function downloadPdf() {
var val = new htmlToPdfmake(document.getElementById('pdfContent').innerHTML);
var dd = { content: val };
pdfMake.createPdf(dd).download('FileName.pdf');
}
</script>
</body>
</html>
<html lang='en'>
<head>
<meta charset='utf-8'>
<title>my example</title>
<style>
/*Hide style for print screen*/
@media print {
.noPrint {
display: none;
}
}
</style>
</head>
<body>
<div class="noPrint">
<button type="button" onclick="downloadPdf()">PDF(HtmlToPdfMaker)</button>
<!--Print doesn't come with pdf download option on mobile phones, but it has save as pdf option on web browsers in Windows-->
<button type="button" onclick="window.print()">Print(Vanilla JS)</button>
</div>
<div id="pdfContent">
<h1>Some Html Codes</h1>
</div>
<script src='https://cdn.jsdelivr.net/npm/pdfmake@latest/build/pdfmake.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/pdfmake@latest/build/vfs_fonts.min.js'></script>
<script src="https://cdn.jsdelivr.net/npm/html-to-pdfmake/browser.js"></script>
<script>
function downloadPdf() {
var val = new htmlToPdfmake(document.getElementById('pdfContent').innerHTML);
var dd = { content: val };
pdfMake.createPdf(dd).download('FileName.pdf');
}
</script>
</body>
</html>
