Hvordan lagre HTML -side som PDF ved hjelp av JavaScript

Mens de oppretter nettsteder, må webdesignere gi muligheten for brukere å lagre et skjema eller side som en PDF. For eksempel bruker nettsteder som tilbyr høyskole- og universitetsopptak dette alternativet, ber brukerne om å fylle ut applikasjonen online, laste den ned som en PDF -fil, og send den deretter inn på campus.

Dette innlegget vil beskrive metoden for å lagre HTML -siden som en PDF.

Hvordan lagre HTML -side som PDF ved hjelp av JavaScript?

For å lagre en HTML -side som PDF, bruk JavaScript -bibliotekene “JSPDF”Med“html2canvas”. JSPDF er et JavaScript-basert open source-bibliotek for å lage PDF-dokumenter. Det gir flere muligheter for å lage PDF -filer med spesifikke egenskaper. Det inkluderer en rekke plugins for å støtte forskjellige metoder for PDF -oppretting, mens HTML2Canvas er et JavaScript -bibliotek som genererer en visning fra dataene på siden.

Eksempel

I en HTML -fil, først, oppretter vi en webside som har følgende tabell:

Id	Navn	Betegnelse	Sammenføyningsdato	Alder
1	John	Hr	16may2000	26
2	Rohnda	sjef	23June2005	24
3	Stephen	Regnskapsfører	20. september2008	26

Nå, lage en “Skrive ut”-Knappen som vil kalle“skrive ut()”Metode på klikkhendelsen for å konvertere HTML -siden til en PDF -fil:

Skrive ut

For å konvertere HTML -siden til PDF, legg til "JSPDF”Og“html2canvas”Biblioteker til taggen i HTML -filen. For "JSPDF”Bibliotek, bruk koden nedenfor:

For "html2canvas”Bibliotek, bruk lenken nedenfor:

I JavaScript -filen eller taggen, legg til følgende kode:

vindu.jspdf = vindu.JSPDF.JSPDF;
var docpdf = new Jspdf ();
Funksjonsutskrift ()
var elementhtml = dokument.QuerySelector ("#printtable");
docpdf.html (elementhtml,
tilbakeringing: funksjon (docpdf)
docpdf.Lagre ('HTML Linuxhint webside.pdf ');
,
x: 15,
Y: 15,
Bredde: 170,
Vindubredde: 650
);

I koden ovenfor:

• Først må JavaScript laste JSPDF -klassen og bruke JSPDF -objektet.
• Deretter definerer du en "skrive ut()”Funksjon som vil utløse knappeklikk.
• Bruker "QuerySelector ()”Metode, vi får HTML -innholdet fra et spesifisert element etter ID.
• Opprett en PDF -fil ved å konvertere HTML -innholdet i det valgte området på nettstedet.
• Last ned og lagre HTML -innholdet som en PDF -fil.

Utgangen indikerer at HTML -websiden blir konvertert til en PDF -fil:

Det handler om å lagre HTML -websiden som en PDF i JavaScript.

Konklusjon

For å lagre HTML -websiden som PDF, bruk JavaScript “JSPDF”Bibliotek med“html2canvas”Bibliotek. JSPDF er et open source-bibliotek som brukes til å konvertere HTML-siden til PDF, mens HTML2Canvas brukes til å lage en visning basert på sidens data. Dette innlegget beskrev metoden for å lagre HTML -siden som en PDF.