es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Cómo agregar un salto de página en jspdf html.

01 Aug, 2023 Programación

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>
Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para agregar un salto de página en jspdf, puedes usar el método addPage(). Para agregar un salto de página automáticamente cuando se imprime la página, puedes agregar un bucle for 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:

    const doc = new jsPDF('portrait', 'px', 'a4');

const contentHeight = document.getElementById('pdf').clientHeight;
const pageHeight = doc.internal.pageSize.height;

let position = 0;

while (position < contentHeight) {
  doc.addPage();
  doc.html(document.getElementById('pdf'), {
    x: 10,
    y: -(position+= pageHeight),
    callback: function () {
      // doc.save();
      window.open(doc.output('bloburl'), '_blank');
    }
  });
}

    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 usando addPage() cuando sea necesario. Establecemos las coordenadas x e y del contenido para colocarlo correctamente en la nueva página, y utilizamos la opción callback para guardar o imprimir el documento final.

Comments are closed.