Skapa PDF med Javascript och jsPDF

digitateam





PDF-formatet är mycket användbart för att ladda ner data i bulk i en webbapplikation. Det hjälper användare att ladda ner dynamiskt innehåll som en fil så att de kan använda det offline. Med export till PDF-funktionen konverteras HTML-innehållet till ett PDF-dokument så att det kan laddas ner senare utan problem. I den här applikationen kommer vi att använda ett skript på serversidan för att konvertera HTML till PDF genom att generera en fil som kan laddas ner av användaren.

Om du vill ha en lösning på klientsidan för att generera ett PDF-dokument är Javascript det enklaste sättet att konvertera HTML till PDF. Det finns flera Javascript-bibliotek som genererar PDF-filer från HTML. JsPDF är ett av de bästa biblioteken för att göra detta. Det är väldigt enkelt. I den här handledningen kommer vi att lära dig hur du genererar PDF-dokument och konverterar HTML till PDF med hjälp av jQuery och jsPDF-biblioteket.


Inkluderar jQuery och jsPDF-biblioteket







Instantiera klassen jsPDF

Använd följande kodrad för att instansiera och använda jsPDF-objektet i Javascript.

var doc = new jsPDF(); Skapa en PDF med Javascript

Följande exempel visar hur du använder jsPDF-biblioteket för att generera en PDF-fil med Javascript.

Definiera innehållet i text()-metoden för jsPDF-objektet Använd metoden addPage() för att lägga till nya sidor i PDF-filen Använd metoden save() för att generera och ladda ner PDF-filen

var doc = new jsPDF(); doc.text(20, 20, ‘Hej världen’); doc.text(20, 30, ‘Låt oss generera en pdf från klientsidan’); // Lägg till ny sida doc.addPage(); doc.text(20, 20, ‘Besök programmering.net’); // Spara PDF:en doc.save(‘document.pdf’); Konvertera HTML-innehåll till PDF med Javascript

Följande exempel visar hur du använder jsPDF-biblioteket för att konvertera HTML till PDF och generera en PDF-fil från HTML-innehåll med hjälp av Javascript.

Hämtar HTML-innehållet för ett specifikt element efter ID eller klass Konverterar innehållet i det elementet till PDF och genererar filen Sparar och laddar ner filen

Codigo HTML Código Javascript var doc = new jsPDF(); var elementHTML = $(‘#content’).html(); var specialElementHandlers = { ‘#elementH’: function (element, renderer) { return true; } }; doc.fromHTML(elementHTML, 15, 15, { ‘width’: 170, ‘elementHandlers’: specialElementHandlers }); // Spara PDF:en doc.save(‘sample-document.pdf’); Intressanta inställningar

jsPDF-biblioteket har flera metoder och alternativ för att konfigurera skapandet av PDF-filen. Några av dessa metoder visas nedan.

Ändra pappersorientering

Använd orienteringsalternativet för att definiera papperets orientering.

var doc = new jsPDF({ orientering: ‘landskap’ }); doc.text(20, 20, ‘Hej världen’); doc.text(20, 30, ‘Låt oss generera en pdf från klientsidan.’); // Lägg till ny sida doc.addPage(); doc.text(20, 20, ‘Besök programmering.net’); // Spara PDF:en doc.save(‘document.pdf’); ändra teckensnitt

Använd metoderna setFont() och setFontType() för att definiera teckensnittet för PDF-filen.

var doc = new jsPDF(); doc.text(20, 20, ‘Detta är standardteckensnittet.’); doc.setFont(“kurir”); doc.setFontType(“normal”); doc.text(20, 30, ‘Esto es courier normal.’); doc.setFont(“tider”); doc.setFontType(“kursiv”); doc.text(20, 40, ‘Esto es gånger kursiv.’); doc.setFont(“helvetica”); doc.setFontType(“fet”); doc.text(20, 50, ‘Esto es helvetica bold.’); doc.setFont(“kurir”); doc.setFontType(“bolditalic”); doc.text(20, 60, ‘Esto es courier bolditalic.’); // Spara PDF:en doc.save(‘documento.pdf’); Cambiar el tamaño de la fuente

Använd metoden setFontSize() för att ändra storleken på texten i PDF:en.

var doc = new jsPDF(); doc.setFontSize(24); doc.text(20, 20, ‘Detta är titeln’); doc.setFontSize(16); doc.text(20, 30, ‘Detta är normal storlek text.’); // Spara PDF:en doc.save(‘document.pdf’); Ändra teckensnittsfärg

Använd metoden setTextColor() för att ställa in färgen på PDF-texten.

var doc = new jsPDF(); doc.setTextColor(100); doc.text(20, 20, ‘Detta är grått.’); doc.setTextColor(150); doc.text(20, 30, ‘Detta är ljusgrått.’); doc.setTextColor(255,0,0); doc.text(20, 40, ‘Detta är rött.’); doc.setTextColor(0,255,0); doc.text(20, 50, ‘Detta är grönt.’); doc.setTextColor(0,0,255); doc.text(20, 60, ‘Detta är blått.’); // Spara PDF:en doc.save(‘document.pdf’);


relaterade inlägg

Javascript: 12 gratis e-böcker för avancerade användare

Lär dig webbdesign: 13 gratis böcker

Lär dig webbdesign: 13 gratis böcker

Hur lär jag mig att designa? Hur gör jag ett kontaktformulär? Var kan jag ladda ner en manual för HTML5 eller JavaScript? Letar du efter några manualer och böcker om webbdesign och sidutveckling? Dessa…

















Projekt

Bokning gratis bokningsmotor

Recipetor - verktyg för hantering av kök, recept och leverantörer

































Vi använder våra egna och tredje parts cookies för att förbättra våra tjänster, förbereda statistisk information och analysera dina surfvanor. Detta gör att vi kan anpassa innehållet vi erbjuder och visa dig reklam relaterade till dina preferenser. Genom att klicka på “Acceptera alla” accepterar du lagringen av cookies på din enhet för att förbättra navigeringen på webbplatsen, analysera trafik och hjälpa till med våra marknadsföringsaktiviteter. Du kan också välja ‘Endast systemcookies’ för att endast acceptera de cookies som krävs för att webbplatsen ska fungera, eller så kan du välja de cookies du vill aktivera genom att klicka på ‘Inställningar’

Acceptera alla Endast systemcookies-inställningar

Alltid aktiv

Strikt nödvändiga cookies

Dessa cookies är nödvändiga för att webbplatsen ska fungera och kan inte inaktiveras i våra system. De ställs i allmänhet bara in som svar på dina åtgärder när du begär tjänster, som att ställa in dina integritetsinställningar, logga in eller fylla i formulär. Du kan ställa in din webbläsare för att blockera eller varna dig för dessa cookies, men vissa delar av webbplatsen kommer inte att fungera. Dessa cookies lagrar ingen personligt identifierbar information.
















Next Post

Rockstar ändrar GTA Onlines Shark Card-värden

Shark Cards i GTA Online har varit en av de väsentliga komponenterna i spelet, och hjälpt många spelare att komma före sina kamrater när det kommer till att starta sitt kriminella imperium online. Shark Cards är premiumvalutan för GTA Online och kan köpas med riktiga pengar. Shark Cards omvandlas till […]

Subscribe US Now