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.