PDF genereren via Open Source JavaScript-API

Open Source JavaScript-bibliotheek voor het maken en converteren van PDF-bestanden, voeg afbeeldingen en tekst toe aan PDF via JavaScript.

JSPDF is een open source HTML5 client-side oplossing voor het maken en beheren van PDF-documenten. Het ondersteunt geweldige functies zoals rapportage, certificaten, ticketing en nog veel meer. Omdat PDF erg populair is op internet en bijna elk bedrijf het gebruikt om documenten en rapporten te delen. Door slechts een paar commando's te gebruiken, hebt u toegang tot alle geweldige functies in uw eigen toepassing en kunt u ze opnieuw gebruiken. 

Het geweldige aan de JsPDF-bibliotheek is dat het een PDF-bestand genereert wanneer gebruikers op de downloadknop klikken. Het biedt ondersteuning voor verschillende prominente functies, zoals het genereren van PDF-documenten, het tekenen van vormen en het invoegen van afbeeldingen in PDF-bestanden, het toevoegen van pagina's aan PDF, het toevoegen en weergeven van tekst, het exporteren van een kaart als PDF, het converteren van HTML naar PDF en nog veel meer.

Previous Next

Aan de slag met JsPDF

De aanbevolen en gemakkelijkste manier om aan de slag te gaan, is door de door CDN gehoste bibliotheek op uw pagina te plaatsen, hieronder vindt u de opdracht.

gebruik installatiecode

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

PDF-documenten genereren via JavaScript-bibliotheek

JsPDF biedt de functionaliteit voor het genereren van PDF-documenten en wijzigingen in JavaScript-toepassingen. U kunt eenvoudig PDF-documenten genereren en er een nieuwe pagina aan toevoegen. U kunt documentoriëntatie, eenheden en de standaardpagina-indeling definiëren tijdens het maken van het nieuwe document. Zodra de PDF is gegenereerd, kunt u er gemakkelijk nieuwe pagina's aan toevoegen, afbeeldingen invoegen, enz.

PDF-documenten maken via 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");

Tekst invoegen in PDF-documenten via JavaScript

De JsPDF API stelt JavaScript-ontwikkelaars in staat om tekst in een PDF-document toe te voegen en weer te geven. Om de tekst te tekenen, moet u de naam van het lettertype definiëren. We kunnen kiezen uit de beschikbare lettertypen. Het is ook mogelijk om de lettertypefamilie en lettertypestijl te wijzigen. Daarna kunnen we de lettergrootte, tekstkleur en meer definiëren.

Tekst toevoegen aan bestaande PDF met 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
  }

Afbeeldingen toevoegen aan PDF-documenten via JavaScript

Met de JsPDF-bibliotheek kan JavaScript-professional afbeeldingen tekenen in PDF-documenten. Afbeeldingen voegen altijd meer waarde toe aan het stuk inhoud. Eerst moeten we de opvul- en lijnkleuren van de getekende vormen instellen. We kunnen ook de streekbreedte instellen. Elke vormtekeningfunctie neemt de middelpuntcoördinaten als twee eerste parameters (behalve driehoek). Ze nemen ook de laatste parametertekenstijl. We kunnen een ellips tekenen door twee straal of cirkel te passeren, door slechts één straal te passeren, een driehoek, door de coördinaten van elke hoek te passeren en meer.

Afbeelding toevoegen aan PDF met JavaScript

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