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.

Dividiendo el PDF generado desde jsPDF en un div específico.

30 Jul, 2023 Programación

Espero que todos estén sanos y tengan unas bonitas vacaciones.
Estoy tratando de crear archivos PDF a partir de HTML usando jsPDF.
Mi framework es ReactJS.
Tengo algo como:

<container>
  <div classname="div1">...</div>
  <div classname="div2">...</div>
  <div classname="div3">...</div>
  <div classname="div4">...</div>
</container>

El código que estoy usando para jsPDF es:

const generatePDF = () => {
  const doc = new jsPDF({
    orientation: "p",
    unit: "pt",
    format: "a4",
    putOnlyUsedFonts: false,
  });
  doc.html(document.querySelector("Container"), {
    callback: function (pdf) {
      pdf.save(
        `nombrePDF.pdf`
      );
    },
    margin: [40, 40, 60, 20],
    html2canvas: {
      scale: 0.8,
      width: 1000,
    },
  });
};

¿Hay alguna manera de dividir la página en la Página 1 hasta el div con la clase de 2 y la Página 2 con los divs 3 y 4?

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Sí, puedes dividir la página en la Página 1 hasta el div con la clase=2 y los divs de la Página 2 3 y 4 cambiando la forma en que se seleccionan los elementos HTML y se pasan a jsPDF. En lugar de seleccionar todo el div Contenedor, puedes seleccionar cada div individualmente y crear un PDF separado con ellos. Aquí tienes un código de ejemplo:

    const generarPDF = () => {
  const doc = new jsPDF({
    orientation: "p",
    unit: "pt",
    format: "a4",
    putOnlyUsedFonts: false,
  });

  // Página 1: div1 y div2
  const pagina1 = document.createElement("div");
  const div1 = document.querySelector(".div1");
  const div2 = document.querySelector(".div2");
  pagina1.appendChild(div1.cloneNode(true));
  pagina1.appendChild(div2.cloneNode(true));
  doc.html(pagina1, {
    callback: function (pdf) {
      pdf.save(`pagina1.pdf`);
    },
    margin: [40, 40, 60, 20],
    html2canvas: {
      scale: 0.8,
      width: 1000,
    },
  });

  // Página 2: div3 y div4
  const pagina2 = document.createElement("div");
  const div3 = document.querySelector(".div3");
  const div4 = document.querySelector(".div4");
  pagina2.appendChild(div3.cloneNode(true));
  pagina2.appendChild(div4.cloneNode(true));
  doc.html(pagina2, {
    callback: function (pdf) {
      pdf.save(`pagina2.pdf`);
    },
    margin: [40, 40, 60, 20],
    html2canvas: {
      scale: 0.8,
      width: 1000,
    },
  });
};

    Este código crea dos páginas separadas, cada una con dos divs. La primera página contiene div1 y div2, y la segunda página contiene div3 y div4. Cada página se guarda como un archivo PDF separado.

Comments are closed.