Generarea pdf din HTML în div folosind Javascript (Programare, Javascript, Jspdf)

John Crawford a intrebat.

Am următorul cod html:

<!DOCTYPE html>
<html>
    <body>
        <p>don't print this to pdf</p>
        <div id="pdf">
            <p><font size="3" color="red">print this to pdf</font></p>
        </div>
    </body>
</html>

Tot ce vreau să fac este să imprim în pdf tot ce se găsește în div cu id-ul „pdf”. Acest lucru trebuie făcut folosind JavaScript. Documentul „pdf” ar trebui apoi să fie descărcat automat cu un nume de fișier „foobar.pdf”

Am folosit jspdf pentru a face acest lucru, dar singura funcție pe care o are este „text” care acceptă doar valori de tip șir de caractere. Vreau să trimit HTML către jspdf, nu text.

Comentarii

  • După cum am menționat mai sus, fac nu vreau să folosesc funcția „text”. Vreau să îi transmit HTML. Legătura dvs. se referă doar la text simplu și nu la html –  > Por John Crawford.
  • jsPDF face are un fromHTML funcție; a se vedea exemplul „HTML Renderer” la: mrrio.github.io/jsPDF –  > Por mg1075.
  • Încercați tutorialul jsPDF aici freakyjolly.com/create-multipage-html-pdf-jspdf-html2canvas –  > Por Cod Spy.
14 răspunsuri
snrlx

jsPDF este capabil să folosească plugin-uri. Pentru a-i permite să tipărească HTML, trebuie să includeți anumite plugin-uri și, prin urmare, trebuie să faceți următoarele:

  1. Mergeți la https://github.com/MrRio/jsPDF și descărcați cea mai recentă versiune.
  2. Includeți următoarele scripturi în proiectul dumneavoastră:
    • jspdf.js
    • jspdf.plugin.from_html.js
    • jspdf.plugin.split_text_to_size.js
    • jspdf.plugin.standard_fonts_metrics.js

Dacă doriți să ignorați anumite elemente, trebuie să le marcați cu un ID, pe care apoi îl puteți ignora într-un element handler special al jsPDF. Prin urmare, HTML-ul dvs. ar trebui să arate astfel:

<!DOCTYPE html>
<html>
  <body>
    <p id="ignorePDF">don't print this to pdf</p>
    <div>
      <p><font size="3" color="red">print this to pdf</font></p>
    </div>
  </body>
</html>

Apoi, utilizați următorul cod JavaScript pentru a deschide PDF-ul creat într-un PopUp:

var doc = new jsPDF();          
var elementHandler = {
  '#ignorePDF': function (element, renderer) {
    return true;
  }
};
var source = window.document.getElementsByTagName("body")[0];
doc.fromHTML(
    source,
    15,
    15,
    {
      'width': 180,'elementHandlers': elementHandler
    });

doc.output("dataurlnewwindow");

Pentru mine, acest lucru a creat un PDF frumos și ordonat care includea doar linia „print this to pdf”.

Vă rugăm să rețineți că gestionarii de elemente speciale se ocupă doar de ID-uri în versiunea actuală, lucru care este, de asemenea, precizat într-un problemă GitHub. Aceasta afirmă:

Deoarece potrivirea se face față de fiecare element din arborele de noduri, dorința mea a fost să o fac cât mai rapidă posibil. În acest caz, a însemnat „Numai ID-urile elementelor sunt potrivite.” ID-urile elementelor sunt încă realizate în stilul jQuery „#id”, dar nu înseamnă că sunt suportați toți selectorii jQuery.

Prin urmare, înlocuirea „#ignorePDF” cu selectori de clasă precum „.ignorePDF” nu a funcționat pentru mine. În schimb, va trebui să adăugați același manipulator pentru fiecare element pe care doriți să îl ignorați, cum ar fi:

var elementHandler = {
  '#ignoreElement': function (element, renderer) {
    return true;
  },
  '#anotherIdToBeIgnored': function (element, renderer) {
    return true;
  }
};

De la exemple se precizează, de asemenea, că este posibil să selectați etichete precum „a” sau „li”. Totuși, acest lucru ar putea fi puțin prea puțin restrictiv pentru majoritatea cazurilor de utilizare:

Acceptăm gestionari de elemente speciale. Înregistrați-le cu un selector de ID în stil jQuery pentru ID sau pentru numele nodului. („#iAmID”, „div”, „span” etc.) În acest moment nu există suport pentru niciun alt tip de selectori (de clasă, de compus).

Un lucru foarte important de adăugat este faptul că pierdeți toate informațiile de stil (CSS). Din fericire, jsPDF este capabil să formateze frumos h1, h2, h3 etc., ceea ce a fost suficient pentru scopurile mele. În plus, va tipări doar textul din interiorul nodurilor de text, ceea ce înseamnă că nu va tipări valorile textarelor și altele asemenea. Exemplu:

<body>
  <ul>
    <!-- This is printed as the element contains a textnode -->        
    <li>Print me!</li>
  </ul>
  <div>
    <!-- This is not printed because jsPDF doesn't deal with the value attribute -->
    <input type="textarea" value="Please print me, too!">
  </div>
</body>

Comentarii

  • Presupun că gestionarul elementului poate fi o clasă? Acest lucru ar fi mult mai conform din punct de vedere semantic cu standardele HTML5. Un ID nu numai că are prea multă greutate de speificitate în CSS, dar trebuie să fie și unic. –  > Por Imperativ.
  • Nu, din câte știu eu, clasele nu sunt selectori validați în acest moment, așa cum se menționează în exemplele lor: „susținem gestionari de elemente speciale. Înregistrați-le cu selectorul de tip jQuery pentru ID sau pentru numele nodului. („#iAmID”, „div”, „span” etc.) Nu există suport pentru niciun alt tip de selectori (de clasă, de compus) în acest moment.”. Cu toate acestea, este posibil să folosiți nume de etichete dacă acest lucru este în concordanță cu cazul de utilizare și nu ascunde alte elemente importante din pagina dvs. –  > Por snrlx.
  • @snrlx Primesc un pdf gol și această eroare: renderer.pdf.sHashCode nu este o funcție –  > Por Lisa Solomon.
  • „Dacă doriți să ignorați anumite elemente, trebuie să le marcați cu un ID” – o bibliotecă minunată, distrusă de această cerință inversată. OP a vrut să tipărească un singur <div>, care ar putea fi unul dintre sute – așa că trebuie să marcheze toate elementele de tip nedorite elemente DOM?? –  > Por Mawg spune să o repunem pe Monica.
  • Acest plugin ar putea fi bun, dar este slab documentat. Majoritatea exemplelor pe care le văd în stackoverflow nici măcar nu funcționează. –  > Por Don Dilanga.
vaibhav kulkarni

Aceasta este soluția simplă. Acest lucru funcționează pentru mine.Puteți utiliza conceptul de imprimare javascript și salvați simplu acest lucru ca pdf.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $("#btnPrint").live("click", function () {
            var divContents = $("#dvContainer").html();
            var printWindow = window.open('', '', 'height=400,width=800');
            printWindow.document.write('<html><head><title>DIV Contents</title>');
            printWindow.document.write('</head><body >');
            printWindow.document.write(divContents);
            printWindow.document.write('</body></html>');
            printWindow.document.close();
            printWindow.print();
        });
    </script>
</head>
<body>
    <form id="form1">
    <div id="dvContainer">
        This content needs to be printed.
    </div>
    <input type="button" value="Print Div Contents" id="btnPrint" />
    </form>
</body>
</html>

Comentarii

    35

  • „și simplu salvați acest lucru ca pdf” – am ratat partea asta. Cum se face? –  > Por Mawg spune să o repunem pe Monica..
  • Acest lucru a funcționat pentru mine, pentru a rezolva problema stilizării CSS, am creat un alt fișier css numit printPDF.css și am adăugat folosind tag-ul link exact ca acesta din exemplul de mai sus: printWindow.document. write(‘<html><head><title>DIV Contents</title>’); printWindow.document.write(‘<link rel=”stylesheet” href=”../css/printPDF.css” />’); printWindow.document.write(‘</head><body >’); –  > Por Prime_Coder.
  • Câteva comentarii: 1) Nu aveți nevoie de o foaie de stil specifică pentru imprimare. În foaia de stil actuală, faceți ceva de genul: – În foaia de stil actuală, faceți ceva de genul @media print { .pageBreak { page-break-before: always; } .labelPdf { font-weight: bold; font-size: 20px; } .noPrintPdf { display: none; } } și utilizați aceste clase în funcție de nevoile dumneavoastră. 2) .live(„click”, …) nu funcționează pentru mine, așa că folosesc în schimb .on(„click”, …). –  > Por Davidson Lima.
  • @DavidsonLima acest cod creează o fereastră nouă care nu va vedea css-ul ferestrei vechi. De aceea „ignoră” css-ul, nu îl ignoră, doar că în noua fereastră nu este încărcat. Încarcă-l în head și se va face randare. –  > Por Lukas Liesis.
  • În cazul în care cineva încearcă să facă acest lucru cu Angular, vă rugăm să puneți fișierul CSS în folderul assets. –  > Por rgantla.
Marco

Poți folosi autoPrint() și să setezi ieșirea la „dataurlnewwindow” astfel:

function printPDF() {
    var printDoc = new jsPDF();
    printDoc.fromHTML($('#pdf').get(0), 10, 10, {'width': 180});
    printDoc.autoPrint();
    printDoc.output("dataurlnewwindow"); // this opens a new popup,  after this the PDF opens the print window view but there are browser inconsistencies with how this is handled
}

Comentarii

  • Sunt curios, a funcționat vreodată acest lucru pentru altcineva în afară de OP ? Din citirea codului, mi se pare să înțeleg că ar funcționa doar cu elementele care au un ID. Probabil că este un pic mai complicat decât atât, oricum nu am nicio idee cum să fac să funcționeze acest lucru. –  > Por Michael.
  • 15

  • Din ce am observat, foarte ironic, fromHTML funcționează doar dacă elementul trimis ca parametru nu conține niciun HTML: este acceptat doar text simplu. Cam ucide scopul întregii chestii imo. –  > Por Michael.
  • A funcționat perfect pentru mine. Elementul pe care doriți să îl transmiteți nu trebuie neapărat să aibă un ID. Acesta este doar modul în care replicantul a găsit nodul în care dorea să treacă. În plus, această soluție funcționează și fără „printDoc.autoPrint()”. Dacă doriți să lăsați această linie specifică în cod, atunci este necesar să includeți autoPrint-Plugin. –  > Por snrlx.
Wael Mahmoud

dacă aveți nevoie să descărcați pdf-ul unei anumite pagini, trebuie doar să adăugați un buton ca acesta

<h4 onclick="window.print();"> Print </h4>

utilizați window.print() pentru a imprima toată pagina, nu doar un div.

Comentarii

  • Doar o simplă adăugare la aceasta, dacă doriți să creați un pdf descărcabil al unui iframe, atunci folosiți consola dezvoltatorului: document.querySelector("#myIframe").contentWindow.print() –  > Por ioCron.
Lukas Liesis
  • Fără dependențe, JS pur
  • Pentru a adăuga CSS sau imagini – nu folosiți URL-uri relative, folosiți URL-uri complete http://...domain.../path.css sau așa ceva. Creează un document HTML separat și nu are niciun context al lucrului principal.
  • De asemenea, puteți încorpora imagini ca base64

Acest lucru mi-a servit de ani de zile:

export default function printDiv({divId, title}) {
  let mywindow = window.open('', 'PRINT', 'height=650,width=900,top=100,left=150');

  mywindow.document.write(`<html><head><title>${title}</title>`);
  mywindow.document.write('</head><body >');
  mywindow.document.write(document.getElementById(divId).innerHTML);
  mywindow.document.write('</body></html>');

  mywindow.document.close(); // necessary for IE >= 10
  mywindow.focus(); // necessary for IE >= 10*/

  mywindow.print();
  mywindow.close();

  return true;
}

Comentarii

  • Problema cu acest lucru este că pdf-ul nu va avea niciun efect css în el. –  > Por Shadab Faiz.
  • @ShadabFaiz Va fi, dar s-ar putea să nu fie la fel ca în fereastra principală. Puteți adăuga în continuare css personalizat tho acest html prea. –  > Por Lukas Liesis.
  • Da. Sunt de acord cu faptul că puteți adăuga css în fereastră, dar cum imprimați rezultatul în fișierul pdf? –  > Por Mirko Cianfarani.
  • Nu redă imagini, totuși. –  > Por Jan Pi.
  • Îmi place asta! Câteva ajustări aici și acolo și arată bine. Și un lucru mic nu eliminați spațierea suplimentară la <body > are nevoie de acest lucru 😛 –  > Por phrogg.
BaptWaels

După cum am menționat, ar trebui să utilizați jsPDF și html2canvas. Am găsit, de asemenea, o funcție în interiorul numerelor de jsPDF care împarte automat pdf-ul în mai multe pagini (surse)

function makePDF() {

    var quotes = document.getElementById('container-fluid');

    html2canvas(quotes, {
        onrendered: function(canvas) {

        //! MAKE YOUR PDF
        var pdf = new jsPDF('p', 'pt', 'letter');

        for (var i = 0; i <= quotes.clientHeight/980; i++) {
            //! This is all just html2canvas stuff
            var srcImg  = canvas;
            var sX      = 0;
            var sY      = 980*i; // start 980 pixels down for every new page
            var sWidth  = 900;
            var sHeight = 980;
            var dX      = 0;
            var dY      = 0;
            var dWidth  = 900;
            var dHeight = 980;

            window.onePageCanvas = document.createElement("canvas");
            onePageCanvas.setAttribute('width', 900);
            onePageCanvas.setAttribute('height', 980);
            var ctx = onePageCanvas.getContext('2d');
            // details on this usage of this function: 
            // https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Using_images#Slicing
            ctx.drawImage(srcImg,sX,sY,sWidth,sHeight,dX,dY,dWidth,dHeight);

            // document.body.appendChild(canvas);
            var canvasDataURL = onePageCanvas.toDataURL("image/png", 1.0);

            var width         = onePageCanvas.width;
            var height        = onePageCanvas.clientHeight;

            //! If we're on anything other than the first page,
            // add another page
            if (i > 0) {
                pdf.addPage(612, 791); //8.5" x 11" in pts (in*72)
            }
            //! now we declare that we're working on that page
            pdf.setPage(i+1);
            //! now we add content to that page!
            pdf.addImage(canvasDataURL, 'PNG', 20, 40, (width*.62), (height*.62));

        }
        //! after the for loop is finished running, we save the pdf.
        pdf.save('test.pdf');
    }
  });
}

Comentarii

  • nu convertește imaginile –  > Por Probosckie.
  • mulțumesc pentru răspuns, ai putea să dai vreun indiciu despre cum să îl trec în format A4 page? –  > Por johannesMatevosyan.
  • Nu prea face un pdf vectorial bun, face o grămadă de bitmaps cu canvas, și le stivuiește ca imagini. Rezultatul are multe dezavantaje – mare, de calitate scăzută, nu se poate copia&lipi din PDF, etc… – -.  > Por Roman Zenka.
  • jsfiddle.net/jfr34mgL Am scris acest exemplu pentru a acoperi imagini pe mai multe pagini –  > Por Ryan Loggerythm.
Rohit Parte

O modalitate este de a folosi funcția window.print(). Care nu necesită nicio bibliotecă

Pros

1.Nu necesită bibliotecă externă.

2.Putem imprima doar părțile selectate ale corpului, de asemenea.

3.Nu există conflicte css și probleme js.

4.Core html/js funcționalitate de bază

—Adaugați pur și simplu codul de mai jos

CSS la

@media print {
        body * {
            visibility: hidden; // part to hide at the time of print
            -webkit-print-color-adjust: exact !important; // not necessary use         
               if colors not visible
        }

        #printBtn {
            visibility: hidden !important; // To hide 
        }

        #page-wrapper * {
            visibility: visible; // Print only required part
            text-align: left;
            -webkit-print-color-adjust: exact !important;
        }
    }

Codul JS – Apelarea funcției bewlow la clic pe butonul btn

$scope.printWindow = function () {
  window.print()
}

Notă: Utilizați !important în fiecare obiect css

Exemplu –

.legend  {
  background: #9DD2E2 !important;
}

Comentarii

  • Există probleme cu funcția Print a browserelor. Utilizatorii au de obicei opțiuni implicite selectate pentru vizualizarea Print (margini, dimensiunea paginii și altele). Prin urmare, este foarte dificil să se producă PDF-ul necesar cu stilul cerut fără a instrui utilizatorul, ceea ce este mult mai dificil și aproximativ imposibil… –  > Por Rahmat Ali.
ghazaleh javaheri

folosesc jspdf și html2canvas pentru redarea css și export conținutul unui anumit div, așa cum este codul meu

$(document).ready(function () {
    let btn=$('#c-oreder-preview');
    btn.text('download');
    btn.on('click',()=> {

        $('#c-invoice').modal('show');
        setTimeout(function () {
            html2canvas(document.querySelector("#c-print")).then(canvas => {
                //$("#previewBeforeDownload").html(canvas);
                var imgData = canvas.toDataURL("image/jpeg",1);
                var pdf = new jsPDF("p", "mm", "a4");
                var pageWidth = pdf.internal.pageSize.getWidth();
                var pageHeight = pdf.internal.pageSize.getHeight();
                var imageWidth = canvas.width;
                var imageHeight = canvas.height;

                var ratio = imageWidth/imageHeight >= pageWidth/pageHeight ? pageWidth/imageWidth : pageHeight/imageHeight;
                //pdf = new jsPDF(this.state.orientation, undefined, format);
                pdf.addImage(imgData, 'JPEG', 0, 0, imageWidth * ratio, imageHeight * ratio);
                pdf.save("invoice.pdf");
                //$("#previewBeforeDownload").hide();
                $('#c-invoice').modal('hide');
            });
        },500);

        });
});

Comentarii

  • acest lucru funcționează, dar convertește conținutul în imagine –  > Por Samad.
  • De asemenea, cum să setați pauza de pagină astfel încât conținutul/imaginea să se tipărească pe o nouă pagină dacă nu se potrivește pe pagina curentă? –  > Por SHEKHAR SHETE.
  • pentru conținutul convertit în imagine, numiți fiecare div într-o secvență, <div id=’d1′> <div id=’d2′> <div id=’d3′> și așa mai departe, iar la conversia în PDF, faceți referire la ele prin array…. ceva de genul acesta: html2canvas($(„#div_pdf „+i)[0]).then(function (canvas) { variabila i poate fi rezultatul unei clase în comun: var clases = document.querySelectorAll(„.export_pdf”); var len = clases.length; –  > Por Pablo Contreras.
ilmiacs

Utilizați pdfMake.js și acest Gist.

(Am găsit Gistul aici împreună cu un link către pachetul html-to-pdfmake, pe care am ajuns să nu-l folosesc deocamdată).

După npm install pdfmake și salvarea Gist-ului în htmlToPdf.js îl folosesc în felul următor:

const pdfMakeX = require('pdfmake/build/pdfmake.js');
const pdfFontsX = require('pdfmake-unicode/dist/pdfmake-unicode.js');
pdfMakeX.vfs = pdfFontsX.pdfMake.vfs;
import * as pdfMake from 'pdfmake/build/pdfmake';
import htmlToPdf from './htmlToPdf.js';

var docDef = htmlToPdf(`<b>Sample</b>`);
pdfMake.createPdf({content:docDef}).download('sample.pdf');

Observații:

  • Cazul meu de utilizare este de a crea html-ul relevant dintr-un document markdown (cu markdown-it) și, ulterior, generarea pdf-ului și încărcarea conținutului binar al acestuia (pe care îl pot obține cu pdfMake‘s getBuffer() ), toate acestea din browser. PDF-ul generat se dovedește a fi mai frumos pentru acest tip de html decât cu alte soluții pe care le-am încercat.
  • Sunt nemulțumit de rezultatele pe care le-am obținut de la jsPDF.fromHTML() sugerate în răspunsul acceptat, deoarece soluția respectivă se încurcă ușor cu caracterele speciale din HTML-ul meu care, aparent, sunt interpretate ca un fel de markup și încurcă total PDF-ul rezultat.
  • Utilizarea soluțiilor bazate pe canvas (cum ar fi soluția depreciată jsPDF.from_html() care nu trebuie confundată cu cea din răspunsul acceptat) nu este o opțiune pentru mine, deoarece vreau ca textul din PDF-ul generat să poată fi lipit, în timp ce soluțiile bazate pe canvas generează PDF-uri bazate pe bitmap.
  • Convertoare directe de markdown în pdf, cum ar fi md-to-pdf sunt numai de partea serverului și nu ar funcționa pentru mine.
  • Utilizarea funcționalității de imprimare a browserului nu ar funcționa pentru mine, deoarece nu doresc să afișez PDF-ul generat, ci să încarc conținutul binar al acestuia.

Comentarii

  • Dacă citesc corect codul, acesta nu acceptă stilurile de bordură CSS (de exemplu, pe tabele), corect? –  > Por ninjagecko.
  • Off topic, eu folosesc pdfmake pentru a crea pdf cu conținutul nu din html. Întrebarea mea este : cum să furnizăm propriul nume de fișier specific în loc de numele de fișier aleatoriu rezultat atunci când folosim metoda sa : pdfMake.createPdf(docDefinition).open() ? –  > Por Lex Soft.
  • Acum, on-topic, gistul pe care l-ați menționat nu există. Care este problema cu html-to-pdfmake despre care spuneați că ați ajuns să nu-l mai folosiți ? Am văzut în github că a mai fost întreținut recent. –  > Por Lex Soft.
Vladimir Georgiev

Dacă doriți să exportați un tabel, puteți arunca o privire la acest exemplu de export oferit de widgetul Shield UI Grid.

Aceasta se face prin extinderea configurației astfel:

...
exportOptions: {
    proxy: "/filesaver/save",
    pdf: {
        fileName: "shieldui-export",
        author: "John Smith",
        dataSource: {
            data: gridData
        },
        readDataSource: true,
        header: {
            cells: [
                { field: "id", title: "ID", width: 50 },
                { field: "name", title: "Person Name", width: 100 },
                { field: "company", title: "Company Name", width: 100 },
                { field: "email", title: "Email Address" }
            ]
        }
    }
}
...

Comentarii

  • Funcționalitatea „Export to PDF” a avut ca rezultat un document PDF gol. –  > Por Richard Nalezynski.
  • Probabil că ați greșit configurația din partea dumneavoastră… Dacă doriți, postați o întrebare cu tag-ul shieldui –  > Por Vladimir Georgiev.
Wasskinny

Am reușit să fac ca jsPDF să tipărească tabelele create dinamic dintr-un div.

$(document).ready(function() {

        $("#pdfDiv").click(function() {

    var pdf = new jsPDF('p','pt','letter');
    var specialElementHandlers = {
    '#rentalListCan': function (element, renderer) {
        return true;
        }
    };

    pdf.addHTML($('#rentalListCan').first(), function() {
        pdf.save("caravan.pdf");
    });
    });
});

Funcționează foarte bine cu Chrome și Firefox… formatarea este toată aruncată în aer în IE.

Am inclus și acestea:

<script src="js/jspdf.js"></script>
    <script src="js/jspdf.plugin.from_html.js"></script>
    <script src="js/jspdf.plugin.addhtml.js"></script>
    <script src="//mrrio.github.io/jsPDF/dist/jspdf.debug.js"></script>
    <script src="http://html2canvas.hertzen.com/build/html2canvas.js"></script>
    <script type="text/javascript" src="./libs/FileSaver.js/FileSaver.js"></script>
    <script type="text/javascript" src="./libs/Blob.js/Blob.js"></script>
    <script type="text/javascript" src="./libs/deflate.js"></script>
    <script type="text/javascript" src="./libs/adler32cs.js/adler32cs.js"></script>

    <script type="text/javascript" src="js/jspdf.plugin.addimage.js"></script>
    <script type="text/javascript" src="js/jspdf.plugin.sillysvgrenderer.js"></script>
    <script type="text/javascript" src="js/jspdf.plugin.split_text_to_size.js"></script>
    <script type="text/javascript" src="js/jspdf.plugin.standard_fonts_metrics.js"></script>

Comentarii

  • poate u pls pls posta exemplu cum u trece html –  > Por Erum.
  • dar codul tău este <script src=”html2canvas.hertzen.com/build/html2canvas.js”></…> ceea ce înseamnă că are nevoie de internet ? –  > Por Erum.
  • @Erum puteți descărca fișierul. –  > Por Eduardo Cuomo.
Johnny

Pentru a captura div ca PDF puteți utiliza https://grabz.it soluție. Are un API JavaScript care este ușor și flexibil și vă va permite să capturați conținutul unui singur element HTML, cum ar fi un div sau un span.

Pentru a o implementa, va trebui mai întâi să obțineți un fișier app key și secret și descărcați SDK-ul (gratuit).

Și acum un exemplu.

Să spunem că aveți HTML:

<div id="features">
    <h4>Acme Camera</h4>
    <label>Price</label>$399<br />
    <label>Rating</label>4.5 out of 5
</div>
<p>Cras ut velit sed purus porttitor aliquam. Nulla tristique magna ac libero tempor, ac vestibulum felisvulput ate. Nam ut velit eget
risus porttitor tristique at ac diam. Sed nisi risus, rutrum a metus suscipit, euismod tristique nulla. Etiam venenatis rutrum risus at
blandit. In hac habitasse platea dictumst. Suspendisse potenti. Phasellus eget vehicula felis.</p>

Pentru a capta ceea ce se află sub ID-ul de caracteristici, va trebui să:

//add the sdk
<script type="text/javascript" src="grabzit.min.js"></script>
<script type="text/javascript">
//login with your key and secret. 
GrabzIt("KEY", "SECRET").ConvertURL("http://www.example.com/my-page.html",
{"target": "#features", "format": "pdf"}).Create();
</script>

Vă rugăm să rețineți că target: #feature. #feature este selectorul CSS, ca în exemplul anterior. Acum, atunci când pagina este încărcată, o captură de ecran de imagine va fi creată în aceeași locație ca și tag-ul script, care va conține tot conținutul div-ului features și nimic altceva.

Există și alte configurări și personalizări pe care le puteți face pentru mecanismul div-screenshot, vă rugăm să le verificați aici

Ribaz

Acest exemplu funcționează foarte bine.

<button onclick="genPDF()">Generate PDF</button>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>
<script>
    function genPDF() {
        var doc = new jsPDF();
        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?');
    
        doc.save('Test.pdf');
    }
</script>

abd aziz

cineva a încercat acest lucru

    (function () {  
        var  
         form = $('.form'),  
         cache_width = form.width(),  
         a4 = [595.28, 841.89]; // for a4 size paper width and height  

        $('#create_pdf').on('click', function () {  
            $('body').scrollTop(0);  
            createPDF();  
        });  
        //create pdf  
        function createPDF() {  
            getCanvas().then(function (canvas) {  
                var  
                 img = canvas.toDataURL("image/png"),  
                 doc = new jsPDF({  
                     unit: 'px',  
                     format: 'a4'  
                 });  
                doc.addImage(img, 'JPEG', 20, 20);  
                doc.save('Bhavdip-html-to-pdf.pdf');  
                form.width(cache_width);  
            });  
        }  

        // create canvas object  
        function getCanvas() {  
            form.width((a4[0] * 1.33333) - 80).css('max-width', 'none');  
            return html2canvas(form, {  
                imageTimeout: 2000,  
                removeContainer: true  
            });  
        }  

    }());