Guter Tag, ich wollte eine Frage stellen, die sich auf die Verwendung der HTML -Methode von JSPDF bezieht, um eine PDF basierend auf dem HTML -Inhalt einer Seite zu generieren. Ich benutze Vue 3 für mein Frontend und Laravel 10 für mein Backend. Das
Problem liegt speziell bei der Verwendung der Autopaging -Option. Es funktioniert jedoch gut für Text. Wenn der Text ein Styling mit sich beigefügt hat, z. B. eine Hintergrundfarbe oder Grenzen, wird der Text, wenn die Seite bricht, korrekt auf die nächste Seite gedrückt, aber die Hintergrundfarbe und der Rand werden abgeschnitten und das Styling wird falsch ausgerichtet. Ich füge meinen Code hinzu, um eine einfache Generation dieses Fehlers mit einem wiederholten H1-Element anzuzeigen, das die Grenze von einer Seite zu einer anderen überschreitet. bei der Verwendung des aktualisierten. Es war auch notwendig, da JSPDF HTML2CANVAs unter der Motorhaube verwendet. Zuletzt war das PX-Scaling ein Hotfix, der zu JSPDF-Liste der Hotfixes hinzugefügt wurde, und erstellt beim Rendern eine genauere Pixel-Skalierung. Deshalb wurde diese Option ausgewählt. < /P>
Code:
Code: Select all
import { Head } from '@inertiajs/vue3';
import { jsPDF } from "jspdf";
import { onMounted, ref } from 'vue';
import html2canvas from "html2canvas-pro";
window.html2canvas = html2canvas;
function capture(){
const doc = new jsPDF({
orientation: 'p',
unit: 'px',
format: 'a4',
hotfixes: ['px_scaling'],
});
doc.html(document.getElementById('pdf-container'), {
callback: function (doc) {
doc.save();
},
margin: [60, 20, 60, 20],
autoPaging: 'text',
width: 754,
windowWidth: 900,
});
}
This is a test h1 element.
Download PDF
.pdf-container{
@apply w-full p-12 pt-4 bg-white;
font-family:'Arial', sans-serif;
letter-spacing: 0.01px;
}
h1{
@apply font-bold text-2xl border border-black;
}
Dieses Bild unten zeigt, was erzeugt wird, wenn diese Download -PDF -Taste geklickt wird.>
Mobile version