Generer PDF via Open Source JavaScript API

Open Source JavaScript-bibliotek til oprettelse og konvertering af PDF-filer, tilføj grafik og tekst til PDF via JavaScript.

JSPDF er en open source HTML5-klientløsning til oprettelse og administration af PDF-dokumenter. Det understøtter fantastiske funktioner som rapportering, certifikater, billetsalg og meget mere. Da PDF er meget populært på tværs af nettet, og næsten alle virksomheder bruger det til at dele dokumenter og rapporter. Ved blot at bruge et par kommandoer kan du få adgang til og genbruge alle de fantastiske funktioner i din egen applikation. 

Den store tanke om JsPDF-biblioteket er, at det genererer en PDF-fil, når brugere klikker på download-knappen. Det har inkluderet understøttelse af flere fremtrædende funktioner, såsom generering af PDF-dokumenter, tegning af figurer og indsættelse af billeder til PDF-filer, tilføjelse af sider til PDF, tilføjelse og visning af tekst, eksport af kort som PDF, konverter HTML til PDF og mange flere.

Previous Next

Kom godt i gang med JsPDF

Den anbefalede og nemmeste måde at komme i gang på er at slippe det CDN-hostede bibliotek på din side, nedenfor er kommandoen.

brug installationskoden

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

Generering af PDF-dokumenter via JavaScript-bibliotek

JsPDF tilbyder funktionaliteten til PDF-dokumentgenerering samt ændringer i JavaScript-applikationer. Du kan nemt generere PDF-dokumenter og tilføje en ny side til den. Du kan definere dokumentretning, enheder og standardsideformatet, mens du opretter det nye dokument. Når PDF'en er genereret, kan du nemt tilføje nye sider, indsætte billeder osv. til den med lethed.

Opret PDF-dokumenter 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");

Indsættelse af tekst til PDF-dokumenter via JavaScript

JsPDF API gør det lettere for JavaScript-udviklere at tilføje og vise tekst i et PDF-dokument. For at tegne teksten skal du definere skrifttypenavnet. Vi kan vælge mellem de tilgængelige skrifttyper. Det er også muligt at ændre skrifttypefamilien og skrifttypestilen. Derefter kan vi definere skriftstørrelse, tekstfarve og mere.

Tilføj tekst til eksisterende PDF ved hjælp af 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
  }

Tilføjelse af grafik til PDF-dokumenter via JavaScript

JsPDF-biblioteket gør det muligt for professionel JavaScript at tegne grafik inde i PDF-dokumenter. Grafik tilføjer altid mere værdi til indholdet. Først skal vi indstille de tegnede figurers fyld- og stregfarver. Vi kan også indstille slagbredden. Hver figurtegningsfunktion tager midtpunktskoordinaterne som to første parametre (undtagen trekant). De tager også den sidste parameters tegnestil. Vi kan tegne en ellipse, ved at passere to radius eller cirkel, ved kun at passere én radius, en trekant, ved at passere hvert hjørnes koordinater og mere.

Tilføj billede til PDF ved hjælp af JavaScript

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