تحويل الdiv الى PDF عن طريق جافاسكربت

إن PDF أفضل من الصور بالدقة، 

يمكنك الاعتماد على مكتبة jsPDF وطريقة عملها:

• جزء HTML المراد تحويله له id فريد

<div id="content">
     <h3>مرحبا، رسالة ترحيبية</h3>

    <p>هذا النص سوف نقوم بتحويله إلى ملف PDF</p>
</div>

<div id="editor"></div>
<button id="cmd">إنشاء PDF</button>

• شيفرة جافا سكربت:

إنشاء غرض من المكتبة
var doc = new jsPDF();

// عند أمر النقر على الزر
// fromHTML 
// هي الدالة التي تحول المضمون

$('#go').click(function () {
    doc.fromHTML($('#content').html(), 15, 15, {
        'width': 170,
    });
    doc.save('myFile.pdf');
});

• تضمين المكتبة

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>

• 15 - 15 هي أبعاد الورق و width عرض المحتوى

توثيق المكتبة  jsPDF

حل آخر هو مكتبة printThis.

يمكنها تطبيق دالة على محدد للعنصر المطلوب بالطريقة:

$('selector').printThis();

  بتاريخ On 23‏/5‏/2022 at 00:21 قال Wael Aljamal:

إن PDF أفضل من الصور بالدقة، 

يمكنك الاعتماد على مكتبة jsPDF وطريقة عملها:

• جزء HTML المراد تحويله له id فريد

<div id="content">
     <h3>مرحبا، رسالة ترحيبية</h3>

    <p>هذا النص سوف نقوم بتحويله إلى ملف PDF</p>
</div>

<div id="editor"></div>
<button id="cmd">إنشاء PDF</button>

• شيفرة جافا سكربت:

إنشاء غرض من المكتبة
var doc = new jsPDF();

// عند أمر النقر على الزر
// fromHTML 
// هي الدالة التي تحول المضمون

$('#go').click(function () {
    doc.fromHTML($('#content').html(), 15, 15, {
        'width': 170,
    });
    doc.save('myFile.pdf');
});

• تضمين المكتبة

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>

• 15 - 15 هي أبعاد الورق و width عرض المحتوى

توثيق المكتبة  jsPDF

حل آخر هو مكتبة printThis.

يمكنها تطبيق دالة على محدد للعنصر المطلوب بالطريقة:

$('selector').printThis();

 

أظهر المزيد  

هل انت متاكد من الكود؟ جربته للتو فهو لا يعمل لدي، ويظهر الخطا التالي 

        
       Uncaught ReferenceError: jsPDF is not defined

  بتاريخ On 23‏/5‏/2022 at 01:16 قال Shahad Mohammad:

هل انت متاكد من الكود؟ جربته للتو فهو لا يعمل لدي، ويظهر الخطا التالي 

أظهر المزيد  

تأكدي من تضمين المكتبة كما الرابط المرفق، وإن التضمين يتم قبل استخدام المكتبة لنضمن أنه تم تحميلها