JSPDF-INVOICE-TEMPLATE Create a pdf with N pages fetching data to a internal orders route

800 Views Asked by At

Hi to every one reading this. I am struggling with a PDF.js problem. I am using this library: https://github.com/edisonneza/jspdf-invoice-template to render a PDF with data that I am getting from an internal axios route that returns orders. This orders are listed with a checkbox, for the orders checked I generate a new array with the objects of the different orders checked.

Up to this I was doing fine, but the next thing I need is to generate this PDFs. I got it to work rendering one single pdf with the data order, but i would like to generete a PDF with (N) numbers of pages, using the checked orders to print with a button.

Below are the blocks of the code that i wrote.

printAllbtn.addEventListener('click',function(){

 try {

if(ordersSelectedToPrint.length \> 1){
 console.log(ordersSelectedToPrint);
for (let orderPrint of ordersSelectedToPrint) {
let pdfObject = jsPDFInvoiceTemplate.default(props);
console.log( 'object created' + pdfObject + orderPrint)

var props = {
  outputType: jsPDFInvoiceTemplate.OutputType.Save,
  returnJsPDFDocObject: true,
  fileName: "remito",
  orientationLandscape: false,
  compress: true,
  
  
  business: {
    name: "Isidorito",
    address: "San Pedro, Buenos",
    phone: "(3329) 069 11 11 111",
    email: "[email protected]",
    
    website: "www.isidorito.com.ar/nosotros",
  },
  contact: {
    label: "Remito dirigito a:",
    name: `${orderPrint.cliente.dueño}`,
    address:`${orderPrint.cliente.direccion}`,
    phone: `${orderPrint.cliente.telefono1}`,
    email: `${orderPrint.cliente.correo}`,
    
  },
  invoice: {
    label: "Pedido #",
    num: 19,
    invDate: `${orderPrint.createdAt}`,
    invGenDate: `28/10/2022`,
    headerBorder: false,
    tableBodyBorder: false,
    header: [
      {
        title: "#", 
        style: { 
          width: 10 
        } 
      }, 
      { 
        title: "Productos descripción",
        style: {
          width: 70
        } 
      }, 
      { 
        title: "Cantidad ",
        style: {
          width:20
        } 
      }, 
      { title: "Por Unidad",
    style:{width:30}},
      // { title: "Cantidad"},
      { title: "Por tot",
    style:{
      width:30
    }},
      { title: "Total",
      style:{
        width:30
      }}
    ],
    table: Array.from(orderPrint.productosPedidosNombre).forEach(function(productoIm, index){[
        index + 1,
        `${productoIm.nombre} - ${productoIm.marca} - ${productoIm.presentacion}`,
        `${productoIm.cantidad}`,
        `${productoIm.cantidad}`,
        `${productoIm.cantidad}`,
        `${productoIm.cantidad}`,
    ]}),
  
    invDescLabel: "Cliente:",
    invDesc: `${orderPrint.cliente.nombreLocal}`,
  },
  footer: {
    text: "Este remito generado digitalmente es valido para el pedido realizado",
  },
  pageEnable: true,
  pageLabel: "Page ",
  };
} } } catch (error) { console.log(error); }

});

The first note is that "orderPrint.productosPedidosNombre" is an array of products of the order. In the example from the documentation its represented in this way.

table: Array.from(Array(10), (item, index)=>([
    index + 1,
    "There are many variations ",
    "Lorem Ipsum is simply dummy text dummy text ",
    200.5,
    4.5,
    "m2",
    400.5
])),

And the way I generate the PDF is:

let pdfObject = jsPDFInvoiceTemplate.default(props); 

First I would like to know if it is possible the loops and iteration to generate this type of single file with N number of order pages, and each page with different data. It's possible with this library.

Thanks you. It's my second question I've asked in StackOverflow, so I welcome the feedback on the how to ask in stack overflow.

0

There are 0 best solutions below