Search code examples
javascriptreactjsexportjspdfexport-to-pdf

How to export an Array to PDF using jsPDF?


first time using jsPDF.

I'm trying to export some data via PDF, however when I try to export the array it gives me an error. I have ASSUMED you export arrays using doc.table because I can't get to find any documentation, there's a tag for it in stackoverflow for questions but didn't find anyone with the same question neither.

This is what I have so far

const generatePDF = () => {
      var doc = new jsPDF('landscape', 'px', 'a4', 'false');
      doc.addImage(AIBLogo, 'PNG', 250,10,100,100)

      doc.setFont('Helvertica', "bold")
      doc.text(60,150, "Informacion del Pedido");
      
      doc.setFont('Helvertica', "Normal")
      doc.text(60,170, "Estado del Pago: "+estadoDePago)
      doc.text(60,190, "Estado de Disponibilidad: "+estadoDeDisponibilidad)
      doc.text(60,210, "Total del Pedido: "+total)
      doc.text(60,230, "Total Pagado: "+totalPagado)

      doc.setFont('Helvertica', "bold")
      doc.text(360,150, "Informacion del Estudiante");

      doc.setFont('Helvertica', "Normal")
      doc.text(360,170, "Nombre del Estudiante: "+nombre)
      doc.text(360,190, "Escuela: "+escuela)
      doc.text(360,210, "Estado del Pago: "+grado)
      doc.text(360,240, "Direccion de Entrega: Retirar en institución")

      doc.table(100,100, librosData)
      
      doc.save(id+".pdf")
    }

Excluding the table bit it prints out like this:

enter image description here

I would like to add the DataTable after all that info and make new pages if is out of bounds cause table can be up to 20 items.

UPDATE I have try the following but is not working neither I got it from here: StackOverflow Answer

var col = ["Descripcion", "Tipo", "Editorial","Precio"]
  row = []
  
  for (let i = 0; i < librosData.length; i++){
    var temp = [librosData[i].descripcion, librosData[i].tipo, librosData[i].editorial, librosData[i].precio];
    row.push(temp)
 }
  
 doc.autoTable(col,row, {startY:380});
 doc.save(id+".pdf")

enter image description here

I know all the data is coming correctly this is how the row is printing:

enter image description here

Any help or documentation is appreciate it.

Final Update To fix the issue that says autotable is not a function just Solution: StackOverflow


Solution

  • In the end to make the table I recommend this:

    To do the table: How to export a table with jsPDF

    To fix the compatibility: autoTable is not a function

    To fix "deprecated autoTable initiation":

    Initialize your autoTable the following way

    import autoTable from 'jspdf-autotable'
    
    autoTable(doc, {
            head: [col],
            body: row
          })