قم بإنشاء ملف PDF عبر Open Source JavaScript API

الشروع في العمل مع JsPDF

التوصية وأسهل طريقة للبدء هي إسقاط مكتبة CDN المستضافة في صفحتك ، فيما يلي الأمر.

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js" integrity="sha384-NaWTHo/8YCBYJ59830LTz/P4aQZK1sS0SneOgAvhsIl3zBu8r9RevNg5lHCHAuQ/" crossorigin="anonymous"></script> 

إنشاء مستندات PDF عبر مكتبة JavaScript

يوفر JsPDF وظيفة إنشاء مستندات PDF بالإضافة إلى التعديلات داخل تطبيقات JavaScript. يمكنك بسهولة إنشاء مستندات PDF وإضافة صفحة جديدة إليها. يمكنك تحديد اتجاه المستند والوحدات وتنسيق الصفحة الافتراضي أثناء إنشاء المستند الجديد. بمجرد إنشاء ملف PDF ، يمكنك بسهولة إضافة صفحات جديدة وإدراج الصور وما إلى ذلك بسهولة.

 import { jsPDF } from "jspdf";
  // Default export is a4 paper, portrait, using millimeters for units
  const doc = new jsPDF();
  doc.text("Hello world!", 10, 10);
  doc.save("a4.pdf");

إدخال نص إلى مستندات PDF عبر JavaScript

تسهل واجهة برمجة تطبيقات JsPDF مطوري جافا سكريبت لإضافة النص وعرضه داخل مستند PDF. لرسم النص ، تحتاج إلى تحديد اسم الخط. يمكننا الاختيار من بين الخطوط المتاحة. من الممكن أيضًا تغيير عائلة الخط ونمط الخط. بعد ذلك ، يمكننا تحديد حجم الخط ولون النص والمزيد.

  //Add Text to Existing PDF 
  var doc = new jsPDF();
  doc.addHTML(document.body, function() {
  doc.text(20, 20, 'Hello world!');
  doc.text(20, 30, 'This is client-side Javascript, pumping out a PDF.');
  doc.addPage();
  doc.text(20, 20, 'Do you like that?');
  printData();
  });
  printData = function() {
  var str = doc.output('datauristring');
  console.log(str);
  // window.open(str); Optional
  }

إضافة رسومات إلى مستندات PDF عبر JavaScript

تتيح مكتبة JsPDF للمحترفين جافا سكريبت لرسم الرسومات داخل مستندات PDF. تضيف الرسومات دائمًا قيمة أكبر إلى جزء المحتوى. أولاً ، يتعين علينا ضبط ألوان تعبئة الأشكال المرسومة والحد منها. يمكننا أيضًا ضبط عرض الحد. تأخذ كل وظيفة رسم شكل إحداثيات النقطة المركزية كمعلمتين أولتين (باستثناء المثلث). يأخذون أيضًا نمط رسم المعلمة الأخير. يمكننا رسم قطع ناقص ، بتمرير نصف قطر أو دائرة ، بتمرير نصف قطر واحد فقط ، مثلث ، بتمرير إحداثيات كل زاوية والمزيد.

  // Add image to PDF
  var img = new Image()
  img.src = 'assets/sample.png'
  pdf.addImage(img, 'png', 10, 78, 12, 15)