צור PDF באמצעות קוד פתוח 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

ה-API של JsPDF מאפשר למפתחי JavaScript להוסיף ולהציג טקסט בתוך מסמך 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 מאפשרת למקצוען JavaScript לצייר גרפיקה בתוך מסמכי PDF. גרפיקה תמיד מוסיפה יותר ערך לפיסת התוכן. ראשית, עלינו להגדיר את צבעי המילוי והקו של הצורות המצוירות. אנחנו יכולים גם להגדיר את רוחב המהלך. כל פונקציית ציור צורה לוקחת את קואורדינטות נקודת המרכז כשני פרמטרים ראשונים (למעט משולש). הם גם לוקחים את סגנון הציור האחרון של הפרמטר. אנו יכולים לצייר אליפסה, על ידי העברת שני רדיוסים או עיגול, על ידי העברת רדיוס אחד בלבד, משולש, על ידי העברת הקואורדינטות של כל פינה ועוד.

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