Genera PDF tramite l'API JavaScript Open Source
Libreria JavaScript open source per creare e convertire file PDF, aggiungere grafica e testo a PDF tramite JavaScript.
JSPDF è una soluzione lato client HTML5 open source per la creazione e la gestione di documenti PDF. Supporta fantastiche funzionalità come reportistica, certificati, ticketing e molto altro. Poiché il PDF è molto popolare sul Web e quasi tutte le aziende lo utilizzano per condividere documenti e report. Utilizzando solo un paio di comandi puoi accedere e riutilizzare tutte le fantastiche funzionalità all'interno della tua applicazione.
Il grande pensiero della libreria JsPDF è che genera un file PDF quando gli utenti fanno clic sul pulsante di download. Ha incluso il supporto per diverse funzionalità importanti, come la generazione di documenti PDF, il disegno di forme e l'inserimento di immagini in file PDF, l'aggiunta di pagine a PDF, l'aggiunta e la visualizzazione di testo, l'esportazione di mappe come PDF, la conversione di HTML in PDF e molti altri.
Guida introduttiva a JsPDF
Il modo più semplice e consigliato per iniziare è rilasciare la libreria ospitata CDN nella tua pagina, di seguito è riportato il comando.
utilizzare il codice di installazione
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js" integrity="sha384-NaWTHo/8YCBYJ59830LTz/P4aQZK1sS0SneOgAvhsIl3zBu8r9RevNg5lHCHAuQ/" crossorigin="anonymous"></script>
Generazione di documenti PDF tramite libreria JavaScript
JsPDF offre la funzionalità per la generazione di documenti PDF e le modifiche all'interno delle applicazioni JavaScript. Puoi facilmente generare documenti PDF e aggiungervi una nuova pagina. È possibile definire l'orientamento del documento, le unità e il formato pagina predefinito durante la creazione del nuovo documento. Una volta generato il PDF, puoi facilmente aggiungere nuove pagine, inserire immagini, ecc.
Crea documenti PDF tramite 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");
Inserimento di documenti da testo a PDF tramite JavaScript
L'API JsPDF consente agli sviluppatori JavaScript di aggiungere e visualizzare testo all'interno di un documento PDF. Per disegnare il testo è necessario definire il nome del carattere. Possiamo scegliere tra i caratteri disponibili. È anche possibile modificare la famiglia di caratteri e lo stile dei caratteri. Successivamente, possiamo definire la dimensione del carattere, il colore del testo e altro.
Aggiungi testo al PDF esistente usando 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
}
Aggiunta di grafica ai documenti PDF tramite JavaScript
La libreria JsPDF consente a JavaScript Professional di disegnare grafici all'interno di documenti PDF. La grafica aggiunge sempre più valore al contenuto. Innanzitutto, dobbiamo impostare i colori di riempimento e traccia delle forme disegnate. Possiamo anche impostare la larghezza del tratto. Ogni funzione di disegno della forma prende le coordinate del punto centrale come due primi parametri (tranne il triangolo). Prendono anche l'ultimo stile di disegno dei parametri. Possiamo disegnare un'ellisse, passando due raggi o cerchi, passando un solo raggio, un triangolo, passando le coordinate di ogni angolo e altro ancora.
Aggiungi un'immagine al PDF usando JavaScript
// Add image to PDF
var img = new Image()
img.src = 'assets/sample.png'
pdf.addImage(img, 'png', 10, 78, 12, 15)