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