create pdf from a list using handelbars #847

sergedahdouh · 2022-09-28T04:00:12Z

sergedahdouh
Sep 28, 2022

hello

I have the following script

`const derivative:Derivative = async ({row,ref,db,storage,auth})=>{
const pdfFrom = require("pdf-from");
const Handlebars = require("handlebars");

const htmlString = `
<!DOCTYPE html>

<!--  This file has been downloaded from bootdey.com @bootdey on twitter -->
<!--  All snippets are MIT license http://bootdey.com/license -->
<title>Invoice - Bootdey.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="./Invoice Template_files/jquery-1.10.2.min.js.download"></script>
<link href="./Invoice Template_files/bootstrap.min.css" rel="stylesheet">
<script src="./Invoice Template_files/bootstrap.min.js.download"></script>

    <div class="receipt-main col-xs-10 col-sm-10 col-md-6 col-xs-offset-1 col-sm-offset-1 col-md-offset-3">
        <div class="row">
			<div class="receipt-header">
				<div class="col-xs-6 col-sm-6 col-md-6">
					<div class="receipt-left">
						<img class="img-responsive" alt="{{groupName}}" src="./Invoice Template_files/{{groupLogoURL}}" style="width: 71px; border-radius: 43px;">
					</div>
				</div>
				<div class="col-xs-6 col-sm-6 col-md-6 text-right">
					<div class="receipt-right">
						<h5>{{groupName}}</h5>
						<!-- <p>+1 3649-6589 <i class="fa fa-phone"></i></p> 
						<p>[email protected] <i class="fa fa-envelope-o"></i></p> 
						<p>USA <i class="fa fa-location-arrow"></i></p>  -->
					</div>
				</div>
			</div>
        </div>
		
		<div class="row">
			<div class="receipt-header receipt-header-mid">
				<div class="col-xs-8 col-sm-8 col-md-8 text-left">
					<div class="receipt-right">
						<h5>{{customer}}</h5>
						<p><b>Booking for : </b> {{participantName}}</p>
						<p><b>Booking Date :</b> {{bookingDate}}</p>
						<p><b>Payment Status :</b> {{paymentStatus}}</p>
						<p><b>Ticket Status :</b> {{ticketStatus}}</p>
					</div>
				</div>
				<div class="col-xs-4 col-sm-4 col-md-4">
					<div class="receipt-left">
						<h3>{{ticketRef}}</h3>
					</div>
				</div>
			</div>
        </div>
		
        <div>
            <table class="table table-bordered">
                <thead>
                    <tr>
                        <th>Description</th>
                        <th>Amount</th>
                    </tr>
                </thead>
                <tbody>
                {{#repeater}}
                    <tr>
                        <td class="col-md-9">{{eventName}}</td>
                        <td class="col-md-3"><i class="fa fa-inr"></i>{{currencyCode}} {{amountTotal}}</td>
                    </tr>
                {{/repeater}}
                    <tr>
                        <td class="col-md-9"><p><b>Event From :</b> {{eventFromDate}} {{eventFromTime}} : {{eventToDate}} {{eventToTime}}</p></td>
                        <!-- <td class="col-md-3"><i class="fa fa-inr"></i> 6,00/-</td> -->
                    </tr>
                    <tr>
                        <td class="col-md-9"><p><b>Event Till :</b> {{eventToDate}} {{eventToTime}}</p></td>
                      <!--  <td class="col-md-3"><i class="fa fa-inr"></i> 35,00/-</td> -->
                    </tr>
                    <tr>
                        <td class="text-right">
                        <p>
                            <strong>Total Amount: </strong>
                        </p>
                        <p>
                            <strong>Late Fees: </strong>
                        </p>
						<p>
                            <strong>Payable Amount: </strong>
                        </p>
						<p>
                            <strong>Balance Due: </strong>
                        </p>
						</td>
                        <td>
                        <p>
                            <strong><i class="fa fa-inr"></i>{{currencyCode}} {{amountTotal}}</strong>
                        </p>
                        <p>
                            <strong><i class="fa fa-inr"></i>{{currencyCode}} 0</strong>
                        </p>
						<p>
                            <strong><i class="fa fa-inr"></i>{{currencyCode}} {{amountTotal}}</strong>
                        </p>
						<p>
                            <strong><i class="fa fa-inr"></i>{{currencyCode}} 0</strong>
                        </p>
						</td>
                    </tr>
                    <tr>
                       
                        <td class="text-right"><h2><strong>Status: </strong></h2></td>
                        <td class="text-left text-danger"><h2><strong><i class="fa fa-inr"></i> {{paymentStatus}}</strong></h2></td>
                    </tr>
                </tbody>
            </table>
        </div>
		
		<div class="row">
			<div class="receipt-header receipt-header-mid receipt-footer">
				<div class="col-xs-8 col-sm-8 col-md-8 text-left">
					<div class="receipt-right">
						<!-- <p><b>Date :</b> 15 Aug 2016</p> -->
						<h5 style="color: rgb(140, 140, 140);">Thank fors your participation.!</h5>
					</div>
				</div>
				<!--
				<div class="col-xs-4 col-sm-4 col-md-4">
					<div class="receipt-left">
						<h1>Stamp</h1>
					</div>
				</div>   -->
			</div>
        </div>
		
    </div>    
</div>

    .ubey-RecordingScreen-count-down-content {
        position: absolute;
        display: flex;
        top: 50%;
        left: 50%;
        justify-content: center;
        align-items: center;
        color: white;
        height: 15em;
        width: 15em;
        transform: translate(-50%, -100%);
        background-color: rgba(0, 0, 0, 0.6);
        border-radius: 50%;
    }

    #ubey-RecordingScreen-count-count {
        font-size: 14em;
        transform: translateY(-2%);
    }
</style>
<div class="ubey-RecordingScreen-count-down-content">
    <span id="ubey-RecordingScreen-count-count"></span>
</div>

`; const template = Handlebars.compile(htmlString);

const data = {
    groupName : row.bookedByName,
    currencyCode : row.currencyCode,
    repeater : [{eventName :row.eventName}]

			// [{eventName :row.eventName.stringify= JSON.stringify(row.eventName)}]
};

const result = template(data);

const pdfFile = await pdfFrom.html(result);
	

const file = await rowy.storage.upload.data(pdfFile, {
    fileName: "receiptHadndlebars.pdf",
    folderPath: ref.id
  });
  return [file]
  }`

and row is json with data when the script is executed the pdf template return object.objject please i need some support
what i am looking is the template should have multiple raws based on the row data

Answered by harinij

Jan 11, 2023

Hi @sergedahdouh we are starting to do office hours now and in case you are still looking for a solution for this, I recommend attending one of the upcoming office hours so that we can go over this on that chat, sign up here: https://discord.gg/vZbFQzje?event=1059820599184195604. We have a tutorial on PDF generation here: https://docs.rowy.io/tutorials/pdf-generator

View full answer

harinij · 2023-01-11T10:11:07Z

harinij
Jan 11, 2023
Maintainer

Hi @sergedahdouh we are starting to do office hours now and in case you are still looking for a solution for this, I recommend attending one of the upcoming office hours so that we can go over this on that chat, sign up here: https://discord.gg/vZbFQzje?event=1059820599184195604. We have a tutorial on PDF generation here: https://docs.rowy.io/tutorials/pdf-generator

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

create pdf from a list using handelbars #847

{{title}}

Replies: 1 comment

{{title}}

Select a reply

create pdf from a list using handelbars #847

sergedahdouh Sep 28, 2022

Replies: 1 comment

harinij Jan 11, 2023 Maintainer

sergedahdouh
Sep 28, 2022

harinij
Jan 11, 2023
Maintainer