Ist es möglich, HTML-Seiten mit JavaScript oder jquery als PDF zu speichern?

Ist es möglich, HTML-Seiten mit JavaScript oder jquery als PDF zu speichern?

Im Detail:

Ich habe eine HTML-Seite generiert, die eine Tabelle enthält. Es hat eine Schaltfläche "Als PDF speichern". Wenn der Benutzer auf diese Schaltfläche klickt, muss diese HTML-Seite als PDF-Datei konvertiert werden.

Ist es möglich mit JavaScript oder jquery?

Ja , jspdf verwenden, um eine PDF-Datei zu erstellen.

Sie können es dann in einen Daten-URI umwandeln und einen Download-Link in das DOM einfügen

Sie müssen jedoch die Konvertierung von HTML in PDF selbst schreiben.

Verwenden Sie einfach druckerfreundliche Versionen Ihrer Seite und lassen Sie den Benutzer auswählen, wie er die Seite drucken möchte.

Edit: Anscheinend hat es nur minimale Unterstützung

Die Antwort lautet also, schreiben Sie Ihren eigenen PDF-Writer oder lassen Sie einen vorhandenen PDF-Writer dies für Sie erledigen (auf dem Server).

Ya es ist sehr einfach mit Javascript zu tun. Hoffe, dieser Code ist nützlich für Sie.

Sie benötigen die JSpdf-Bibliothek .

<div id="content">
     <h3>Hello, this is a H3 tag</h3>

    <p>a pararaph</p>
</div>
<div id="editor"></div>
<button id="cmd">Generate PDF</button>

<script>
    var doc = new jsPDF();
    var specialElementHandlers = {
        '#editor': function (element, renderer) {
            return true;
        }
    };

    $('#cmd').click(function () {
        doc.fromHTML($('#content').html(), 15, 15, {
            'width': 170,
                'elementHandlers': specialElementHandlers
        });
        doc.save('sample-file.pdf');
    });

    // This code is collected but useful, click below to jsfiddle link.
</script>

jsfiddle Link hier

Dies mag eine späte Antwort sein, aber dies ist die beste Antwort: https://github.com/eKoopmans/html2pdf

Reine Javascript-Implementierung. Hier können Sie nur ein einzelnes Element anhand der ID angeben und konvertieren.

Sie können Phantomjs verwenden. Laden Sie es hier herunter und testen Sie anhand des folgenden Beispiels die HTML-> PDF-Konvertierungsfunktion https://github.com/ariya/phantomjs/blob/master/examples/rasterize.js

Beispielcode:

phantomjs.exe examples/rasterize.js http://www.w3.org/Style/CSS/Test/CSS3/Selectors/current/xhtml/index.html sample.pdf

Ich benutzen jsPDFund dom-to-imageBibliothek zu exportieren HTML in PDF.

Ich poste hier als Hinweis auf wen Anliegen.

$('#downloadPDF').click(function () {
    domtoimage.toPng(document.getElementById('content2'))
      .then(function (blob) {
          var pdf = new jsPDF('l', 'pt', [$('#content2').width(), $('#content2').height()]);
          pdf.addImage(blob, 'PNG', 0, 0, $('#content2').width(), $('#content2').height());
          pdf.save("test.pdf");
      });
});

Demo: https://jsfiddle.net/viethien/md03wb21/27/

Hier ist, wie ich es machen würde, es ist eine Idee, nicht kugelsicheres Design, Sie müssen es modifizieren

• Der Benutzer klickt auf die Schaltfläche Als PDF speichern
• Der Server erhält einen Anruf mit Ajax
• Der Server antwortet mit einer URL für PDF, die mit HTML generiert wurde. Ich habe Apache FOP sehr erfolgreich verwendet
• Das js, das die Ajax-Antwort verarbeitet, führt eine location.href aus, um auf die von JS gesendete URL zu verweisen. Sobald diese URL geladen wird, sendet es die Datei unter Verwendung des Inhaltsdisposition-Headers als Anhang, wodurch der Benutzer gezwungen wird, die Datei herunterzuladen.

Es ist viel einfacher und zuverlässiger, HTML in PDF-Server zu konvertieren. Wir verwenden Google Puppeteer. Es ist mit Wrappern für jede serverseitige Sprache Ihrer Wahl gut gepflegt. Puppenspieler verwendet kopfloses Chrome, um Screenshots und / oder PDF-Dateien zu erstellen. Dies erspart Ihnen viel Kopfschmerzen, insbesondere wenn Sie komplexe PDF-Dateien mit Tabellen, Bildern, Grafiken, mehreren Seiten usw. erstellen müssen

https://developers.google.com/web/tools/puppeteer/

Es gibt eine andere sehr offensichtliche Möglichkeit, HTML mithilfe von JavaScript in PDf zu konvertieren: Verwenden Sie dazu eine Online-API. Dies funktioniert einwandfrei, wenn Sie die Konvertierung nicht durchführen müssen, wenn der Benutzer offline ist.

PdfMage ist eine Option, die eine schöne API hat und kostenlose Konten bietet. Ich bin sicher, Sie können viele Alternativen finden (zum Beispiel hier )

Für die PdfMage-API hätten Sie ungefähr Folgendes:

 $.ajax({
    url: "https://pdfmage.org/pdf-api/v1/process",
    type: "POST",
    crossDomain: true,
    data: { Html:"<html><body>Hi there!</body></html>" },
    dataType: "json",
    headers: {
        "X-Api-Key": "your-key-here" // not very secure, but a valid option for non-public domains/intranet
    },
    success: function (response) {
        window.location = response.Data.DownloadUrl;
    },
    error: function (xhr, status) {
        alert("error");
    }
});

Ja. Sie können die Lösung beispielsweise über https://grabz.it verwenden .

Es verfügt über eine Javascript-API, die auf verschiedene Arten zum Aufnehmen und Bearbeiten des Screenshots verwendet werden kann. Um es in Ihrer App zu verwenden, müssen Sie zuerst einen App-Schlüssel und ein Geheimnis erhalten und das kostenlose Javascript SDK herunterladen .

Schauen wir uns also ein einfaches Beispiel für die Verwendung an:

//first include the grabzit.min.js library in the web page
<script src="grabzit.min.js"></script>
//include the code below to add the screenshot to the body tag    
<script>
//use secret key to sign in. replace the url.
GrabzIt("Sign in to view your Application Key").ConvertURL("http://www.google.com").Create();
</script>

Warten Sie dann einfach eine kurze Zeit und das Bild wird automatisch am unteren Rand der Seite angezeigt, ohne dass Sie die Seite neu laden müssen.

Das ist das einfachste. Weitere Beispiele für die Bildbearbeitung, das Anhängen von Screenshots an Elemente usw. finden Sie in der Dokumentation .

Kurzum: nein. Das erste Problem ist der Zugriff auf das Dateisystem, das in den meisten Browsern aus Sicherheitsgründen standardmäßig auf no gesetzt ist. Moderne Browser unterstützen manchmal minimalistischen Speicher in Form einer Datenbank, oder Sie können den Benutzer bitten, den Dateizugriff zu aktivieren.

Wenn Sie Zugriff auf das Dateisystem haben, ist das Speichern als HTML nicht so schwierig (siehe das Dateiobjekt in der JS-Dokumentation) - aber PDF ist nicht so einfach. PDF ist ein ziemlich fortgeschrittenes Dateiformat, das für Javascript wirklich schlecht geeignet ist. Sie müssen Informationen in Datentypen schreiben, die von Javascript nicht direkt unterstützt werden, z. B. Wörter und Quads. Sie müssen auch ein Wörterbuch-Suchsystem vordefinieren, das in der Datei gespeichert werden muss. Ich bin mir sicher, dass jemand es schaffen könnte, aber der Aufwand und die Zeit, die damit verbunden sind, sollten besser für das Erlernen von C ++ oder Delphi aufgewendet werden.

Der HTML-Export sollte jedoch möglich sein, wenn der Benutzer Ihnen uneingeschränkten Zugriff gewährt