كيفاش تحول une page html ل document pdf


فهاد الدرس الجديد من سلسلة javascript غادي نشوفو كيفاش نحولو une page html ل document pdf فكيفما كنعرفو كاين مواقع عديدة لي كتدير هادشي لكن ما فيها باس يلا عرفتي كيفاش تديرها بواحد library javascript لي سميتها jsPDF ولي كتمكنا من تحويل صفحة html ل pdf بسهولة. 

نظرة سريعة بالفيديو

1- الملف index.html

أول حاجة زيد dossier جديد سميه لي بغيتي فيه زيد dossier css و dossier js منبعد زيد ملف جديد سميه index.html لي فيه structure html ديالنا عندي des div لي فيهم ل contenu ول bouton لي ملي كنكليكي عليها كتنفد واحد ل fonction غادي نشوفوها فملف الجافاسكريبت و div principale عندها id content-box لي هو ل contenu لي غادي يتحول ل pdf وايضا كاين div عندها ل id editor لي هي فين غادي يت afficha ل contenu وبهاد les ids غادي نسترجعوهم فل fichier javascript  ولتحت كنزيد les fichies jquery و jsPDF الكود ديال الملف هو :

                                <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <title>Html To Pdf</title>
</head>
<body>
    <div class="container">
        <div id="content-box">
            <h2 class="title">La vie est belle</h2>
            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. <br> Asperiores aut debitis ut quidem, adipisci dignissimos sit enim quis veniam tempore, molestias non consectetur velit maxime iste nisi alias facilis? Esse?</p>
            <hr>
            <h2 class="title">La vie est belle</h2>
            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Asperiores aut debitis ut quidem, adipisci dignissimos sit enim quis veniam tempore, molestias non consectetur velit maxime iste nisi alias facilis? Esse?</p>
            <hr>
            <h2 class="title">La vie est belle</h2>
            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Asperiores aut debitis ut quidem, adipisci dignissimos sit enim quis veniam tempore, molestias non consectetur velit maxime iste nisi alias facilis? Esse?</p>
            <hr>
            <h2 class="title">La vie est belle</h2>
            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Asperiores aut debitis ut quidem, adipisci dignissimos sit enim quis veniam tempore, molestias non consectetur velit maxime iste nisi alias facilis? Esse?</p>
        </div>
        <div id="editor"></div>
        <hr>
        <button id="download">Télécharger comme pdf</button>
    </div>
    <script src="http://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/0.9.0rc1/jspdf.min.js"></script>
    <script src="main.js"></script>
</body>
</html>
                            

2- الملف main.js

منبعد ف dossier js زيد ملف جديد سميه main.js فيه كن créer l'objet من la classe jsPDF منبعد كنحدد div لي غادي يكون فيها ل contenu pdf ولي هي لي عطيناها ل id editor منبعد كاين ل fonction لي كتنفد ملي كنكليكي على ل bouton download ولي كنسترجع فيها ل contenu ديال div لي عطيناها ل id content-box وكن enregistrer le fichier بل extension pdf الكود ديال الملف هو : 

                                var doc = new jsPDF();

var specialElementHandlers = {
	'#editor': function(element, renderer){
		return true;
	},
	'.controls': function(element, renderer){
		return true;
	}
};

$('#download').click(function(){
    doc.fromHTML($('#content-box').html(), 15, 15, {
        'width': 170, 
        'elementHandlers': specialElementHandlers
    });
    doc.save("doc-file.pdf"); 
});
                            

3- الملف style.css

منبعد ف dossier css زيد ملف جديد سميه style.css فيه غادي يكون لكود css لي غادي نحتاجو الكود ديال الملف هو :

                                .container{
    width: 1110px;
    margin: 0 auto;
}
button
{
    background-color: rgb(250, 125, 8);
    color: blanchedalmond;
    padding: 20px;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 400;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    text-transform: uppercase;
    cursor: pointer;
}
                            


إشترك في قناتنا على اليوتيوب

بحث في الموقع


إشترك للتوصل بالجديد