Generieren Sie PDF aus HTML in div mit Javascript

231

Ich habe den folgenden HTML-Code:

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

Alles, was ich tun möchte, ist, als PDF zu drucken, was auch immer im div mit der ID "pdf" zu finden ist. Dies muss mit JavaScript erfolgen. Das "pdf" -Dokument sollte dann automatisch mit dem Dateinamen "foobar.pdf" heruntergeladen werden.

Ich habe dazu jspdf verwendet, aber die einzige Funktion, die es hat, ist "Text", der nur Zeichenfolgenwerte akzeptiert. Ich möchte HTML an jspdf senden, nicht an Text.

javascript jspdf John Crawford
quelle

1

Wie bereits erwähnt ich nicht will den „Text“ -Funktion verwenden. Ich möchte es HTML geben. Ihr Link befasst sich nur mit Klartext und nicht mit HTML

John Crawford

2

jsPDF hat eine fromHTMLFunktion; Siehe das Beispiel "HTML Renderer" unter: mrrio.github.io/jsPDF

mg1075

Versuchen Sie jsPDF Tutorial hier freakyjolly.com/create-multipage-html-pdf-jspdf-html2canvas

Code Spy

227

jsPDF kann Plugins verwenden. Damit HTML gedruckt werden kann, müssen Sie bestimmte Plugins einschließen und daher Folgendes tun:

Gehen Sie zu https://github.com/MrRio/jsPDF und laden Sie die neueste Version herunter.
Fügen Sie die folgenden Skripte in Ihr Projekt ein:
- jspdf.js
- jspdf.plugin.from_html.js
- jspdf.plugin.split_text_to_size.js
- jspdf.plugin.standard_fonts_metrics.js

Wenn Sie bestimmte Elemente ignorieren möchten, müssen Sie sie mit einer ID markieren, die Sie dann in einem speziellen Elementhandler von jsPDF ignorieren können. Daher sollte Ihr HTML folgendermaßen aussehen:

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

Anschließend verwenden Sie den folgenden JavaScript-Code, um das erstellte PDF in einem PopUp zu öffnen:

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");

Für mich wurde ein schönes und ordentliches PDF erstellt, das nur die Zeile "Print to pdf" enthielt.

Bitte beachten Sie, dass die speziellen Element-Handler nur IDs in der aktuellen Version behandeln, die auch in einem GitHub-Problem angegeben ist . Es sagt aus:

Da der Abgleich für jedes Element im Knotenbaum erfolgt, war es mein Wunsch, ihn so schnell wie möglich zu machen. In diesem Fall bedeutete dies "Nur Element-IDs stimmen überein". Die Element-IDs werden weiterhin im jQuery-Stil "#id" erstellt. Dies bedeutet jedoch nicht, dass alle jQuery-Selektoren unterstützt werden.

Daher hat das Ersetzen von '#ignorePDF' durch Klassenselektoren wie '.ignorePDF' bei mir nicht funktioniert. Stattdessen müssen Sie für jedes Element, das Sie ignorieren möchten, denselben Handler hinzufügen:

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

Aus den Beispielen geht auch hervor, dass es möglich ist, Tags wie 'a' oder 'li' auszuwählen. Für die meisten Fälle könnte dies jedoch etwas zu uneingeschränkt sein:

Wir unterstützen spezielle Elementhandler. Registrieren Sie sie mit dem ID-Selektor im jQuery-Stil für die ID oder den Knotennamen. ("#iAmID", "div", "span" usw.) Derzeit werden keine anderen Selektortypen (Klasse, Verbindung) unterstützt.

Eine sehr wichtige Sache, die Sie hinzufügen sollten, ist, dass Sie alle Ihre Stilinformationen (CSS) verlieren. Glücklicherweise kann jsPDF h1, h2, h3 usw. gut formatieren, was für meine Zwecke ausreichte. Außerdem wird nur Text innerhalb von Textknoten gedruckt, was bedeutet, dass die Werte von Textbereichen und dergleichen nicht gedruckt werden. Beispiel:

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

snrlx
quelle

3

Ich werde vermuten, dass der Element-Handler eine Klasse sein kann. Das würde semantischer den HTML5-Standards entsprechen. Eine ID hat nicht nur zu viel Spezifitätsgewicht in CSS, sondern muss auch eindeutig sein.

Imperativ

Nein, soweit ich weiß, sind Klassen derzeit keine gültigen Selektoren, wie in ihren Beispielen angegeben: "Wir unterstützen spezielle Elementhandler. Registrieren Sie sie mit dem ID-Selektor im jQuery-Stil für ID oder Knotennamen. (" #IAmID ", "div", "span" usw.) Derzeit werden keine anderen Selektortypen (Klasse, Verbindung) unterstützt. " Es ist jedoch möglich, Tag-Namen zu verwenden, wenn dies Ihrem Anwendungsfall entspricht und andere wichtige Elemente auf Ihrer Seite nicht verbirgt.

Snrlx

Auf ihrer Seite parall.ax/products/jspdf geben sie an, dass sie IE6 + über eine Unterlegscheibe unterstützen. Ich habe es aber nicht selbst versucht.

Snrlx

2

@snrlx Ich bekomme leeres PDF und dieser Fehler: renderer.pdf.sHashCode ist keine Funktion

Lisa Solomon

5

"Wenn Sie bestimmte Elemente ignorieren möchten, müssen Sie sie mit einer ID markieren" - eine wunderbare Bibliothek, die durch diese umgekehrte Anforderung ruiniert wurde. Das OP wollte eine einzelne drucken <div>, die eine von Hunderten sein könnte - also muss er alle unerwünschten DOM-Elemente markieren ?

Mawg sagt, Monica am

53

Dies ist die einfache Lösung. Dies funktioniert für mich. Sie können das Javascript-Druckkonzept verwenden und es einfach als PDF speichern.

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

vaibhav kulkarni
quelle

27

"und einfach als pdf speichern" - ich habe diesen Teil verpasst. Wie machst du das?

Mawg sagt, Monica am

9

Dies hat bei mir funktioniert. Um das Problem des CSS-Stils zu lösen, habe ich eine weitere CSS-Datei mit dem Namen printPDF.css erstellt und diese im obigen Beispiel mithilfe des Link-Tags wie folgt hinzugefügt: printWindow.document.write ('<html> <head> <title> DIV Inhalt </ title> '); printWindow.document.write ('<link rel = "stylesheet" href = "../ css / printPDF.css" />'); printWindow.document.write ('</ head> <body>');

Prime_Coder

2

Einige Kommentare: 1) Zum Drucken benötigen Sie kein spezielles Stylesheet. Führen Sie in Ihrem aktuellen Stylesheet Folgendes aus: @media print {.pageBreak {Seitenumbruch vor: immer; } .labelPdf {Schriftgröße: fett; Schriftgröße: 20px; } .noPrintPdf {Anzeige: keine; }} und verwenden Sie diese Klassen als Ihre Bedürfnisse. 2) .live ("click", ...) funktioniert bei mir nicht, daher verwende ich stattdessen .on ("click", ...).

Davidson Lima

1

@DavidsonLima Dieser Code erstellt ein neues Fenster, in dem kein altes Fenster-CSS angezeigt wird. Deshalb "ignoriert" es CSS, es ignoriert nicht, nur in einem neuen Fenster wird es nicht geladen. Laden Sie es einfach in den Kopf und es wird gerendert.

Lukas Liesis

1

Für den Fall, dass jemand versucht, dies mit Angular zu erreichen, legen Sie bitte Ihre CSS-Datei im Assets-Ordner ab.

Rgantla

16

Sie können autoPrint () verwenden und die Ausgabe wie folgt auf 'dataurlnewwindow' setzen:

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
}

Marco
quelle

1

Ich bin neugierig, hat das jemals für jemand anderen als OP funktioniert? Durch das Lesen des Codes scheint ich zu verstehen, dass es nur mit Elementen funktionieren würde, die eine ID haben. Es ist wahrscheinlich etwas komplizierter, trotzdem habe ich keine Ahnung, wie ich das machen soll.

Michael

14

Aus meiner Sicht funktioniert fromHTML sehr ironischerweise nur, wenn das als Parameter gesendete Element kein HTML enthält: Es wird nur einfacher Text unterstützt. Ein bisschen tötet den Zweck der ganzen Sache imo.

Michael

Hat perfekt für mich funktioniert. Das Element, das Sie übergeben möchten, muss nicht unbedingt über eine ID verfügen. Auf diese Weise hat der Replikant den Knoten gefunden, den er übergeben wollte. Außerdem funktioniert diese Lösung auch ohne 'printDoc.autoPrint ()'. Wenn Sie diese bestimmte Zeile im Code belassen möchten, müssen Sie das autoPrint-Plugin einfügen.

Snrlx

13

Wenn Sie ein PDF einer bestimmten Seite herunterladen müssen, fügen Sie einfach eine Schaltfläche wie diese hinzu

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

Verwenden Sie window.print (), um Ihre gesamte Seite zu drucken, nicht nur ein Div

Wael Mahmoud
quelle

2

Nur eine einfache Ergänzung: Wenn Sie ein herunterladbares PDF eines document.querySelector("#myIframe").contentWindow.print()

Iframes erstellen möchten

11

Wie bereits erwähnt, sollten Sie jsPDF und html2canvas verwenden . Ich habe auch eine Funktion in jsPDF-Ausgaben gefunden, die Ihr PDF automatisch in mehrere Seiten ( Quellen ) aufteilt.

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');
    }
  });
}

BaptWaels
quelle

3

Bilder werden nicht konvertiert

Probosckie

1

Vielen Dank für die Antwort. Können Sie uns einen Hinweis geben, wie Sie das A4-Seitenformat festlegen können?

johannesMatevosyan

3

Dies macht ein gutes Vektor-PDF nicht wirklich aus, es erstellt viele Bitmaps mit Leinwand und stapelt sie als Bilder. Das Ergebnis hat viele Nachteile - groß, von geringer Qualität, kann nicht aus dem PDF kopiert und eingefügt werden usw.

Roman Zenka

6

Eine Möglichkeit ist die Verwendung der Funktion window.print (). Was keine Bibliothek erfordert

Vorteile

1. Keine externe Bibliothek erforderlich.

2.Wir können auch nur ausgewählte Körperteile drucken.

3. Keine CSS-Konflikte und JS-Probleme.

4.Core HTML / JS-Funktionalität

--- Fügen Sie einfach den folgenden Code hinzu

CSS zu

@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;
        }
    }

JS-Code - Rufen Sie die Bewlow-Funktion beim Klicken auf

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

Hinweis: Verwenden Sie! Important in jedem CSS-Objekt

Beispiel -

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

Rohit Parte
quelle

Es gibt Probleme mit der Druckfunktion der Browser. Benutzer haben normalerweise Standardoptionen für die Druckansicht ausgewählt (Ränder, Seitengröße und mehr). Daher ist es sehr schwierig, das erforderliche PDF mit dem erforderlichen Styling zu erstellen, ohne den Benutzer zu schulen, was viel schwieriger und ungefähr unmöglich ist ...

Rahmat Ali

4

Ich benutze jspdf und html2canvas für das CSS-Rendering und exportiere Inhalte von bestimmten div, da dies mein Code ist

$(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);

        });
});

ghazaleh javaheri
quelle

Dies funktioniert, aber es konvertiert den Inhalt in Bild

Samad

Wie kann der Seitenumbruch so eingestellt werden, dass der Inhalt / das Bild auf einer neuen Seite gedruckt wird, wenn er nicht auf die aktuelle Seite passt?

SHEKHAR SHETE

4

Keine Abhängigkeiten, reines JS
Um CSS oder Bilder hinzuzufügen, verwenden Sie keine relativen URLs, sondern vollständige URLs http://...domain.../path.css oder so. Es erstellt ein separates HTML-Dokument und hat keinen Hauptkontext.
Sie können Bilder auch als base64 einbetten

Das hat mir seit Jahren gedient:

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;
}

Lukas Liesis
quelle

1

Das Problem dabei ist, dass das PDF keine CSS-Effekte enthält.

Shadab Faiz

@ShadabFaiz Es wird, aber es kann sein, dass es nicht mit dem Hauptfenster identisch ist. Sie können auch weiterhin benutzerdefinierte CSS zu diesem HTML hinzufügen.

Lukas Liesis

Ja. Ich bin damit einverstanden, dass Sie CSS im Fenster hinzufügen können, aber wie drucken Sie das Ergebnis in PDF-Datei?

Mirko Cianfarani

1

Rendert jedoch keine Bilder.

Jan Pi

1

Ich liebe es! Einige Verbesserungen hier und da und es sieht gut aus. Und eine kleine Sache, entfernen Sie nicht den zusätzlichen Abstand, den <body >es braucht: P

Phil Roggenbuck

2

Wenn Sie eine Tabelle exportieren möchten, können Sie sich dieses Exportbeispiel ansehen, das vom Shield UI Grid-Widget bereitgestellt wird.

Dazu erweitern Sie die Konfiguration wie folgt:

...
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" }
            ]
        }
    }
}
...

Vladimir Georgiev
quelle

Die Funktion "In PDF exportieren" führte zu einem leeren PDF-Dokument.

Richard Nalezynski

Wahrscheinlich falsche Konfiguration an Ihrem Ende ... Wenn Sie möchten, posten Sie eine Frage mit dem Shieldui-Tag

Vladimir Georgiev

2

Verwenden Sie pdfMake.js und dieses Gist .

(Ich habe das Gist hier zusammen mit einem Link zum Paket html-to-pdfmake gefunden , das ich am Ende nicht benutze.)

Nach npm install pdfmakeund Speichern des Gist in htmlToPdf.jsbenutze ich es wie folgt:

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');

Bemerkungen:

Mein Anwendungsfall besteht darin, das relevante HTML aus einem Markdown-Dokument (mit Markdown-it ) zu erstellen, anschließend das PDF zu generieren und seinen binären Inhalt hochzuladen (den ich mit pdfMake's erhalten kann)getBuffer() Funktion erhalten kann) über den Browser . Das generierte PDF ist für diese Art von HTML besser geeignet als für andere Lösungen, die ich ausprobiert habe.
Ich bin unzufrieden mit den Ergebnissen, die ich aus jsPDF.fromHTML()den in der akzeptierten Antwort vorgeschlagenen Ergebnissen erhalten habe , da diese Lösung leicht durch Sonderzeichen in meinem HTML-Code verwechselt wird, die anscheinend als eine Art Markup interpretiert werden und das resultierende PDF völlig durcheinander bringen.
Die Verwendung von Canvas-basierten Lösungen (wie die veraltete jsPDF.from_html()Funktion, nicht zu verwechseln mit der aus der akzeptierten Antwort) ist für mich keine Option, da ich möchte, dass der Text in der generierten PDF-Datei einfügbar ist, während Canvas-basierte Lösungen Bitmap-basierte PDFs generieren.
Direkte Abschriften auf PDF-Konverter wie MD-PDF sind nur serverseitig und würden bei mir nicht funktionieren.
Die Verwendung der Druckfunktion des Browsers würde für mich nicht funktionieren, da ich das generierte PDF nicht anzeigen, sondern dessen binären Inhalt hochladen möchte.

Ilmiacs
quelle

Wenn ich den Code richtig gelesen habe, werden CSS-Rahmenstile (z. B. für Tabellen) nicht unterstützt. Richtig?

Ninjagecko

1

Ich konnte jsPDF dazu bringen, dynamisch erstellte Tabellen aus einem div zu drucken.

$(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");
    });
    });
});

Funktioniert hervorragend mit Chrome und Firefox ... die Formatierung ist im Internet Explorer in die Luft gesprengt.

Ich habe auch diese aufgenommen:

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

Wasskinny
quelle

2

Kannst du ein Beispiel posten, wie du HTML

passierst?

Ihr Code lautet jedoch <script src = " html2canvas.hertzen.com/build/html2canvas.js " > </ ... > was bedeutet, dass er Internet benötigt?

Erum

1

@Erum können Sie die Datei herunterladen.

Eduardo Cuomo

0

Um div als PDF zu erfassen, können Sie die Lösung https://grabz.it verwenden. Es verfügt über eine JavaScript-API, die einfach und flexibel ist und es Ihnen ermöglicht, den Inhalt eines einzelnen HTML-Elements wie div oder span zu erfassen

Um es zu implementieren, müssen Sie zuerst einen App-Schlüssel und ein Geheimnis erhalten und das (kostenlose) SDK herunterladen .

Und jetzt ein Beispiel.

Angenommen, Sie haben den HTML-Code:

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

Um zu erfassen, was sich unter der Funktions-ID befindet, müssen Sie:

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

Bitte beachten Sie die target: #feature. #featureist Sie CSS-Selektor, wie im vorherigen Beispiel. Wenn die Seite geladen wird, wird jetzt an derselben Stelle wie das Skript-Tag ein Bild-Screenshot erstellt, der den gesamten Inhalt der Features div und nichts anderes enthält.

Andere Konfigurationen und Anpassungen, die Sie am Div-Screenshot-Mechanismus vornehmen können, finden Sie hier

Johnny
quelle

Generieren Sie PDF aus HTML in div mit Javascript

Antworten: