Cómo agregar un salto de página en jspdf html.
Quiero agregar un salto de página en jspdf
, ¿cómo puedo agregar automáticamente un salto de página cuando se imprime la página?, uso el complemento jspdf
en vue 3
, ¿es posible agregar un salto de página utilizando esos complementos?
Mi código:
<template>
<div class="parent">
<div class="pdf" id="pdf" style="
display: block;
width: 450px;
padding: 70px;
padding-top: 18px;
padding-left: 16px;
">
<div v-for="(index, arr) of Array(30)" style="
display: inline-block;
margin: 15px 0;
margin-left: 7px;
text-align: center;
">
<div style="font-size: 8.25px">SCS111022021235</div>
<div style="padding: 4.5px; border: 1px dashed black">
<img :src="qrCodeUrl" style="width: calc(100px * 0.55)">
</div>
</div>
</div>
</div>
</template>
<script setup="" lang="ts">
import { onMounted, ref } from "vue";
import QRCode from "qrcode";
import { jsPDF } from "jspdf";
const qrCodeUrl = ref("");
const doc = new jsPDF("portrait", "px", "a4");
QRCode.toDataURL("asdasd", { margin: 0 }).then(url => {
qrCodeUrl.value = url;
});
onMounted(() => {
doc.html(document.getElementById("pdf")!, {
callback: doc => {
// doc.save();
window.open(doc.output("bloburl"), "_blank");
},
x: 10,
y: 10
});
});
</script>
davy.ai
Para agregar un salto de página en
jspdf
, puedes usar el métodoaddPage()
. Para agregar un salto de página automáticamente cuando se imprime la página, puedes agregar un buclefor
que verifica la altura del contenido y agrega una nueva página cuando alcanza el final de la página actual. Aquí tienes un ejemplo de implementación:En este ejemplo, primero obtenemos la altura del contenido y la altura de la página. Luego usamos un bucle
while
para verificar la posición actual del contenido y agregar una nueva página usandoaddPage()
cuando sea necesario. Establecemos las coordenadasx
ey
del contenido para colocarlo correctamente en la nueva página, y utilizamos la opcióncallback
para guardar o imprimir el documento final.