Heim > Artikel > Web-Frontend > Verwenden Sie js, um HTML in PDF zu konvertieren

Verwenden Sie js, um HTML in PDF zu konvertieren

php中世界最好的语言Original: 2018-03-20 09:55:063373Durchsuche

Dieses Mal werde ich Ihnen die Vorsichtsmaßnahmen für die Verwendung von js zum Konvertieren von HTML in PDF und die Verwendung von js zum Konvertieren von HTML in PDF vorstellen. Das Folgende ist ein praktischer Fall, schauen wir uns das an.

Also habe ich einen kleinen Koffer gemacht, um diese Funktion zu testen.

<body>
    <!-- PDF -->
    <p class="bb" id="ctn">
        <p class="anliu" id="anliu">生成PDF</p>
  
    </p></body><script src="../../Scripts/aps/html2canvas.js"></script><script src="../../Scripts/aps/jsPdf.debug.js"></script>

js-Schreibmethode

window.onload =function(){var downPdf = document.getElementById("anliu");
downPdf.onclick = function() {
   html2canvas(document.body, {
        onrendered: function(canvas) {                //返回图片URL，参数：图片格式和清晰度(0-1)
                  var pageData = canvas.toDataURL('image/jpeg', 1.0);                  //方向默认竖直，尺寸ponits，格式a4【595.28,841.89]
                  var pdf = new jsPDF('', 'pt', 'a4');                  //需要dataUrl格式
                  pdf.addImage(pageData, 'JPEG', 0, 0, 595.28, 592.28/canvas.width * canvas.height );
                  pdf.save('tup.pdf');
            
        }
    });
}
}

1 Nach dem Schreiben eines Tests wurde ein Fehler gemeldet: „toDataURL“ konnte nicht auf „HTMLCanvasElement“ ausgeführt werden: Befleckte Leinwände können möglicherweise nicht exportiert werden . Also habe ich eine Methode geändert, alle Bilder zum Testen gelöscht und dann auf „PDF generieren“ geklickt. Das Ergebnis war kein Problem. Es scheint, dass die Ursache des Fehlers bei den Bildern lag.

Als ich die Informationen überprüfte, lag es daran, dass sich die Bilder und Seiten in verschiedenen Domänen befanden und es ein Problem mit der domänenübergreifenden Übertragung gab. Um es ganz klar auszudrücken: Der Zugriff auf sie musste in einer Serverumgebung erfolgen. Somit gab es beim Testen in der Serverumgebung keine Probleme und die PDF-Datei wurde erfolgreich generiert.

2. Das Problem unvollständiger Screenshots von html2canvas.js

Ich habe die Funktion dieser Testimplementierung in das Projekt eingefügt und bin auf ein neues Problem gestoßen hat Seiten. Der sichtbare Bereich des Fensters und der Bereich unterhalb der Bildlaufleiste werden nicht generiert.

Also habe ich noch einmal gesucht und festgestellt, dass html2canvas die Höhe des erfassten Bildes nicht unterstützt. Es kann nur das erfassen, was für den Browser sichtbar ist. Wenn eine Bildlaufleiste angezeigt wird, wird es nicht erfasst. Daher wird das von jsPdf.js basierend auf dem Screenshot generierte PDF generiert. Es tritt ein unvollständiges Problem auf. Da es durch den html2canvas-Screenshot verursacht wird, lösen wir es von hier aus.

Nachdem ich die von anderen online geschriebenen Fälle gelesen und mit meinen eigenen Tests und Analysen kombiniert hatte, stellte ich fest, dass das Abfangen auf der Ebene des Körpers erfolgt und der Körper zufällig auf Überlauf: ausgeblendet; dann ist der überschüssige Teil Es kann niemals abgefangen werden, da die DOM-Höhe dieses Knotens die sichtbare Höhe des Fensters ist und den zusätzlichen Teil der Bildlaufleiste nicht enthält.

Also habe ich den Stil des Scrollbar-Knotens in „height: auto;“ geändert, damit die Höhe durch die untergeordneten Elemente gestreckt wird. Gehen Sie nach oben und entfernen Sie alle übergeordneten Knoten: overflow: hide; entfernen Sie das sichtbare Element.

Sehen Sie sich die js an, die nach der Einführung von jquery im Projekt neu geschrieben wurden

        var pdfcc = $('.pdf-cc');
        pdfcc.on('click', function (event) {
            html2canvas($("#bb-pdf-ctn"), {
                allowTaint: true,
                height: $("#bb-pdf-ctn").outerHeight(),
                onrendered: function (canvas) {                    //返回图片URL，参数：图片格式和清晰度(0-1)
                    var pageData = canvas.toDataURL('image/jpeg', 1.0);                    //方向默认竖直，尺寸ponits，格式a4【595.28,841.89]
                    var pdf = new jsPDF('', 'pt', 'a4');                    //需要dataUrl格式
                    pdf.addImage(pageData, 'JPEG', 0, 0, 595.28, 592.28 / canvas.width * canvas.height);
                    pdf.save('pdf.pdf');
                }
            });
        });

3, html2canvas setzt 2 neue Parameter

Domänenübergreifend zulassen:allowTaint: true,

Legen Sie die Höhe fest: height: $("#bb-pdf-ctn").outerHeight(),

Die Höhe ist die Höhe des Bildlaufleistenknotens.

OK, dies löst das Problem unvollständiger Screenshots des Bildlaufleistenbereichs.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.

Empfohlene Lektüre:

Wie text-align die Ausrichtung an beiden Enden erreicht

JavaScript-Vererbung und Prototypenkette

Das obige ist der detaillierte Inhalt vonVerwenden Sie js, um HTML in PDF zu konvertieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Detaillierte Erläuterung häufig verwendeter String-Manipulationsmethoden in JavaScriptNächster Artikel：Detaillierte Erläuterung häufig verwendeter String-Manipulationsmethoden in JavaScript

In Verbindung stehende Artikel

Mehr sehen