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
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
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.
