القائمة الرئيسية

الصفحات

تعديل المشاركة

كود تحويل وحفظ جدول في HTML إلى PDF

(0)


لتحويل جدول في HTML إلى ملف PDF، يمكنك استخدام JavaScript أو Ajax بالاعتماد على مكتبة مثل html2canvas أو pdfmake وهنا مثال بسيط يستخدم html2canvas و pdfmake لتحويل جدول HTML إلى ملف PDF .


لقد جربت مكتبيتين واخدة تحول الجول كما هو في html إلى صورة ويتم تحويله إلى pdf وتنزيله ، والكود الآخر هو جيد يحتاج إلى تعديل السكربت وإنشاء جداول واعمدة على بالطريقة التي تريدها ويمكن حفظ حتى صفحة أو أي شيء آخر تريده كما ستشاهد بالكود بالأسفل .


استخدام مكتبة pdfmake لتحويل جدول إلى PDF .

table html to pdf javascript and ajax


أولا علك إضافة هذا الرابط داخل <head> : 


    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.22/pdfmake.min.js"></script>
   


ثم تضع الزر الذي ستضغط عليه لحفظ ملف pdf وتنزيله


<button type="button" name="submit" onClick = "ExportPDF()" > Download PDF</button>


وهذا هو كود جافاسكريبت الذي من خلاله تقوم بعملية تحويل Table في html إلى pdf وتنزيله على الحاسوب .

 
function ExportPDF() {
            html2canvas(document.getElementById('Table'), {
                onrendered: function (canvas) {
                    var data = canvas.toDataURL();
                    var docDefinition = {
                        content: [{
                            image: data,
                            width: 500
                        }]
                    };
                    pdfMake.createPdf(docDefinition).download("Table_PDF.pdf");
                }
            });
        }

لا تنسى إعطاء قيمة للجدول في html واعطاء id اسم Table .


استخدام مكتبة html2canvas لتحويل جدول إلى PDF .

أولا عليك استدعاء مكتبة html2canvas الخاصة بالأجاكس من حلال وضع هذا الرابط داخل <head>


   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>


ثم تنشأ زر التنزيل في Html من خلال هذا الكود 

<button type="button" name="submit" onClick = "downloadPDF()" > Download PDF </button>


وهذا الكود هو الذي يقوم بتنزيل pdf وطبعا يحتاج إلى تعديل لانه يحفظ المحتوى داخل مصوصفة باسم content مكان text وكذلك تغير Table إلى id الذي أعطيته للجدول الخاص بك في html .


    function downloadPDF() {

        let text = document.getElementById("Table").textContent;
        var docDefinition = {
                    content: [ text ]  
                 }

    pdfMake.createPdf(docDefinition).download('Report.pdf');
     }







هل اعجبك الموضوع :

أخر المواضيع من قسم : جافا و جافا سكربت

تعليقات

إرسال تعليق



التنقل السريع