CODEWITHSUNDEEP
javascripthtmlnode.jspdfdom
Umair_007
Umair_007

Reputation: 143

cant generate the PDF(with all details) using html-pdf in NodeJS

I am a bit stuck when creating the PDF from the html template. if i use the static entries it does work but i am looking to generate the pdf for multiple items and the items can vary each time, i am not sure if i am missing something any suggestion guys please.

after i added .map function in the pdfTemplate.js file as below to go through each object and get the price, it seems to not working properly

snippet from the main ./documents/pdfTemplate Js file

 customer_dataand_Itemsbought.map((eachitem) => {
        total = total + eachitem.price;
   return     `    <tr class="heading">
                       <td>Bought items:</td>
                       <td>Price</td>
                    </tr>
                    <tr class="item">
                       <td>First item:</td>
                       <td>${eachitem.price}$</td>
                    </tr>
                    <tr class="item">
                       <td>Second item:</td>
                       <td>${eachitem.price}$</td>
                    </tr>`;
      })`

Note: PDF is still generating but missing every bit that i included after the .map function

main ./documents/pdfTemplateJs file

module.exports = (customer_dataand_Itemsbought) => {
  //customer_dataand_Itemsbought is array of objects[obj[0],obj[1],...] and at obj[0] is the customer details object and after that each index object contains the customer bought items detail/price 

  let customer_Name = customer_dataand_Itemsbought[0].user_FirstName;
  let receipt_Id = customer_dataand_Itemsbought[0].Invoice_No_latest;
  let total_Price;

  customer_dataand_Itemsbought.shift();

  const today = new Date();
  return `
    <!doctype html>
    <html>
       <head>
          <meta charset="utf-8">
          <title>PDF Result Template</title>
          <style>
             ........
          </style>
       </head>
       <body>
          <div class="invoice-box">
             <table cellpadding="0" cellspacing="0">
                <tr class="top">
                   <td colspan="2">
                      <table>
                         <tr>
                            <td class="title"><img  src="https://i2.wp.com/cleverlogos.co/wp-content/uploads/2018/05/reciepthound_1.jpg?fit=800%2C600&ssl=1"
                               style="width:100%; max-width:156px;"></td>
                            <td>
                               Datum: ${`${today.getDate()}. ${today.getMonth() + 1}. ${today.getFullYear()}.`}
                            </td>
                         </tr>
                      </table>
                   </td>
                </tr>
                <tr class="information">
                   <td colspan="2">
                      <table>
                         <tr>
                            <td>
                               Customer name: ${customer_Name} // this still appears on the PDF
                            </td>
                            <td>
                               Receipt number: ${receipt_Id} // this still appears on the PDF
                            </td>
                         </tr>
                      </table>
                   </td>
                    </tr>`;
// here i used the .map function to go through each array object. nothing appears from here onwards on the pdf 
      customer_dataand_Itemsbought.map((eachitem) => {
        total = total + eachitem.price;
       return `    <tr class="heading">
                       <td>Bought items:</td>
                       <td>Price</td>
                    </tr>
                    <tr class="item">
                       <td>First item:</td>
                       <td>${eachitem.price}$</td>
                    </tr>
                    <tr class="item">
                       <td>Second item:</td>
                       <td>${eachitem.price}$</td>
                    </tr>`;
      })` 
                 </table>
                 <br />
                 <h1 class="justify-center">Total price: ${total_Price}£</h1>
              </div>
           </body>
        </html>
        `;
    };

at server.js side

const pdf = require("html-pdf");
const pdfTemplate = require("./documents/pdfTemplate");
pdf.create(pdfTemplate(customer_dataand_Itemsbought), {}).toFile("./filename.pdf", function (err, res) {
  if (err) {
    console.log(err);
  } 
});

enter image description here

Upvotes: 0

Views: 354

Answers (1)

Aditya
Aditya

Reputation: 52

When you have enclosed map function's body in curly braces - meaning you have multiple statements for processing data, you are expected to return from it explicitly:

customer_dataand_Itemsbought.map((eachitem) => {
        total = total + eachitem.price;
        return `<tr class="heading">
                       <td>Bought items:</td>
                       <td>Price</td>
                    </tr>
                    <tr class="item">
                       <td>First item:</td>
                       <td>${eachitem.price}$</td>
                    </tr>
                    <tr class="item">
                       <td>Second item:</td>
                       <td>${eachitem.price}$</td>
                    </tr>`;
      })

Upvotes: 1

Related Questions