1. Προϊόντα
  2.   PDF
  3.   JavaScript
  4.   JSPDF
 
  

Δημιουργήστε PDF μέσω JavaScript API ανοιχτού κώδικα

Βιβλιοθήκη JavaScript ανοιχτού κώδικα για δημιουργία και μετατροπή αρχείων PDF, προσθέστε γραφικά και κείμενο σε PDF μέσω JavaScript.

Το JSPDF είναι μια λύση πελάτη ανοιχτού κώδικα HTML5 για δημιουργία και διαχείριση εγγράφων PDF. Υποστηρίζει εξαιρετικές δυνατότητες όπως αναφορές, πιστοποιητικά, έκδοση εισιτηρίων και πολλά άλλα. Καθώς το PDF είναι πολύ δημοφιλές στο διαδίκτυο και σχεδόν κάθε εταιρεία το χρησιμοποιεί για να μοιράζεται έγγραφα και αναφορές. Χρησιμοποιώντας μόνο μερικές εντολές, μπορείτε να αποκτήσετε πρόσβαση και να επαναχρησιμοποιήσετε όλες τις εξαιρετικές δυνατότητες της δικής σας εφαρμογής. 

Η καλή σκέψη για τη βιβλιοθήκη JsPDF είναι ότι δημιουργεί ένα αρχείο PDF όταν οι χρήστες κάνουν κλικ στο κουμπί λήψης. Περιλαμβάνει υποστήριξη για πολλά εξέχοντα χαρακτηριστικά, όπως δημιουργία εγγράφων PDF, σχεδίαση σχημάτων και εισαγωγή εικόνων σε αρχεία PDF, προσθήκη σελίδων σε PDF, προσθήκη και εμφάνιση κειμένου, εξαγωγή χάρτη ως PDF, μετατροπή HTML σε PDF και πολλά άλλα.

Previous Next

Ξεκινώντας με το 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, μπορείτε εύκολα να προσθέσετε νέες σελίδες, να εισάγετε εικόνες κ.λπ. σε αυτό με ευκολία.

Δημιουργία εγγράφων PDF μέσω JavaScript

 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 API διευκολύνει τους προγραμματιστές JavaScript να προσθέτουν και να εμφανίζουν κείμενο μέσα σε ένα έγγραφο PDF. Για να σχεδιάσετε το κείμενο πρέπει να ορίσετε το όνομα της γραμματοσειράς. Μπορούμε να επιλέξουμε από τις διαθέσιμες γραμματοσειρές. Είναι επίσης δυνατή η αλλαγή της οικογένειας γραμματοσειρών και του στυλ γραμματοσειράς. Μετά από αυτό, μπορούμε να ορίσουμε μέγεθος γραμματοσειράς, χρώμα κειμένου και πολλά άλλα.

Προσθήκη κειμένου σε υπάρχον PDF χρησιμοποιώντας JavaScript

  //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. Τα γραφικά πάντα προσθέτουν περισσότερη αξία στο κομμάτι του περιεχομένου. Αρχικά, πρέπει να ορίσουμε τα χρώματα πλήρωσης και γραμμών που έχουν σχεδιαστεί. Μπορούμε επίσης να ορίσουμε το πλάτος διαδρομής. Κάθε συνάρτηση σχεδίασης σχήματος παίρνει τις συντεταγμένες του κεντρικού σημείου ως δύο πρώτες παραμέτρους (εκτός από το τρίγωνο). Παίρνουν επίσης το στυλ σχεδίασης της τελευταίας παραμέτρου. Μπορούμε να σχεδιάσουμε μια έλλειψη, περνώντας δύο ακτίνες ή κύκλο, περνώντας μόνο μια ακτίνα, ένα τρίγωνο, περνώντας τις συντεταγμένες κάθε γωνίας και άλλα.

Προσθήκη εικόνας σε PDF χρησιμοποιώντας JavaScript

  // Add image to PDF
  var img = new Image()
  img.src = 'assets/sample.png'
  pdf.addImage(img, 'png', 10, 78, 12, 15)
 Ελληνικά