Solved: Re: HTML to PDF Conversion issue

Anonymous · ‎07-01-2020

Hi All,

This is an urgent requirement and if anyone could cater to it i would really appreciate it. I have already built a flow that works absolutely fine in converting sharepoint list items to an html code and then to a PDF.
However, today a user generated a quote and due to the increase word count in one column the PDF cut out the data and thus the PDF is of no use i will be attaching a PDF for reference so that you guys can have a look and will be attaching the html code too.

i would want my html table to automatically resize based on higher word count in any column per say.
kindly help me resolve the issue this issue as it is very urgent.

below is the image of the pdf Generated , kindly look at the word count in Project Description column and see how the html table has broken. i would like to fix this issue where in increased word count of the column should not affect the table layout. i am using Onedrive connection for converting my html code to pdf.
please find the html code below the pdf

concat('<!DOCTYPE html>
<html>
<head>
<style>
table {
  font-family: Arial;
  border-collapse: collapse;
  width: 100%;
  font-size :15px;
}

td, th {
  border: 1px solid black;
  text-align: left;
  padding: 5px;
  font-size :15px;
} 

img{
height:57px;
width:62px;
}

</style>
</head>
<body>

<img src="',variables('logo'),'">

<h1 style="text-align:center; font-family: Arial;">Global Analytics Center</h1>

<h2 style="text-align:center; font-family: Arial;">Work Agreement Quote</h2>

<table>
  <tr>
    <th>Quote Date</th>
	<td>',formatDateTime(utcnow(),'dd-MM-yyyy'),'</td>
</tr>
<tr>
    <th>Quote Validity</th>
<td>',triggerBody()?['Quotevalidtill'],'</td>
</tr>
<tr>
    <th>Customer cross charge BU</th>
<td>',triggerBody()?['BillingBU'],'</td>
  </tr>
<tr>
<th>Customer location</th>
<td>',triggerBody()?['CustomerLocation'],'</td>
</tr>
<tr>
<th>Project ID</th>
<td>',triggerBody()?['Title'],'</td>
</tr>
<tr>
<th>Project name</th>
<td>',triggerBody()?['ProjectName'],'</td>
</tr>
<tr>
<th>Project sponsor</th>
<td>',outputs('Compose_5'),'</td>
</tr>
<tr>
<th>GAC contact name</th>
<td>',outputs('Compose'),'</td>
</tr>
<tr>
<th>Project description</th>
<td>',triggerBody()?['WorkDescription'],'</td>
</tr>
 <tr>
<th>resource skill description</th>
<td>',triggerBody()?['SkillSetRequired_x002f_GPP'],'</td>
</tr>
<tr>
<th>Resource type</th>
<td>',outputs('Compose_2'),'</td>
</tr>
<tr>
<th> vertical</th>
<td>',triggerBody()?['Function'],'</td>
</tr>
<tr>
<th>Costing (Yearly/monthly)</th>
<th></th>
</tr>
<tr>
<th></th>
<th></th>
<th>Year 1</th>
<th>Year 2</th>
<th>Year 3</th>
</tr>
<tr>
<th></th>
<th>Currency</th>
<td>',outputs('Compose_4'),'</td>
<td>--</td>
<td>--</td>
</tr>
<tr>
<th>General Cost</th>
<th>Payroll Cost</th>
<td>',triggerBody()?['PayrollCost'],'</td>
<td>--</td>
<td>--</td>
</tr>
<tr>
<th></th>
<th>CBS charges</th>
<td>',triggerBody()?['CBScharges'],'</td>
<td>--</td>
<td>--</td>
</tr>
<tr>
<th></th>
<th>Rent</th>
<td>',triggerBody()?['Rent'],'</td>
<td>--</td>
<td>--</td>
</tr>
<tr>
<th></th>
<th>Common support cost</th>
<td>',triggerBody()?['Commonsupportcost'],'</td>
<td>--</td>
<td>--</td>
</tr>
<tr>
<th></th>
<th>Others (Employee fringes)</th>
<td>',triggerBody()?['Others_x0028_Employeefringes_x00'],'</td>
<td>--</td>
<td>--</td>
</tr>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
 <tr>
<th>Specific job need</th>
<th>Shift charge (Other than general shift)</th>
<td>',triggerBody()?['Shiftcharge_x0028_Otherthangener'],'</td>
<td>--</td>
<td>--</td>
</tr> 
<tr>
<th></th>
<th>Travel</th>
<td>',triggerBody()?['Travel'],'</td>
<td>--</td>
<td>--</td>
</tr> 
<tr>
<th></th>
<th>Training</th>
<td>',triggerBody()?['Training'],'</td>
<td>--</td>
<td>--</td>
</tr>
<tr>
<th></th>
<th>Subtotal</th>
<td>',triggerBody()?['Total_x0020_Transfer_x0020_Price'],'</td>
<td>--</td>
<td>--</td>
</tr>
<tr>
<th></th>
<th>Transfer Price Mark-up %</th>
<td>',outputs('Compose_10'),'</td>
<td>--</td>
<td>--</td>
</tr>
<tr>
<th></th>
<th>Transfer Price Mark-up amount </th>
<td>',triggerBody()?['Transfer_x0020_Price_x0020_Mark_0'],'</td>
<td>--</td>
<td>--</td>
</tr>
<tr>
<th></th>
<th>Total Transfer Price</th>
<td>',triggerBody()?['subtotal'],'</td>
<td>--</td>
<td>--</td>
</tr>
<tr>
<th></th>
<th>GST %</th>
<td>',outputs('Compose_13'),'</td>
<td>--</td>
<td>--</td>
</tr>
<tr>
<th></th>
<th>GST Amount</th>
<td>',triggerBody()?['GST_x0020_Amount'],'</td>
<td>--</td>
<td>--</td>
</tr>
<tr>
<th></th>
<th>Total cost to customer</th>
<td>',triggerBody()?['Total_x0020_cost_x0020_to_x0020_'],'</td>
<td>--</td>
<td>--</td>
</tr>
</table>
</html>')

Jay-Encodian · ‎07-02-2020

@Anonymous here you go

<td width="10px">Example</td>

You'll need to do some trial and error...

This may be of interest but the HTML / CSS support for OneDrive HTML conversion is not 100%... so it may just be easier to fix all the widths via trial and error until your output is correct. Or to save you a lot of time, obtain a third party converter which would just work, as per previous screen shot.

https://css-tricks.com/almanac/properties/t/table-layout/

View solution in original post

Anonymous · ‎07-02-2020

@Jay-Encodian well i figured out that it was a small issue.

Anyone out there facing the same issue just add the below css attribute to your table and your td and th.
so i just added table-layout as fixed for my table, and also reduced my font size to 10 and overflow as hidden.
Now even if the word count is more than expected it fits within the page and does get altered out.

Thank you so much for the help though @Jay-Encodian !!

table{
table-layout:fixed;}
td,th{
font-size:10px;overflow:hidden;}

View solution in original post

Jay-Encodian · ‎07-02-2020

@Anonymous try this

<html>
<head>
<style>
table {
font-family: Arial;
border-collapse: collapse;
width: 100%;
font-size :15px;
}

td, th {
border: 1px solid black;
text-align: left;
padding: 5px;
font-size :15px;
}

img{
height:57px;
width:62px;
}

</style>
</head>
<body>

<img src="',variables('logo'),'">

<h1 style="text-align:center; font-family: Arial;">Global Analytics Center</h1>

<h2 style="text-align:center; font-family: Arial;">Work Agreement Quote</h2>

<table>
<tr>
<th>Quote Date</th>
<td colspan=4>',formatDateTime(utcnow(),'dd-MM-yyyy'),'</td>
</tr>
<tr>
<th>Quote Validity</th>
<td colspan=4>',triggerBody()?['Quotevalidtill'],'</td>
</tr>
<tr>
<th>Customer cross charge BU</th>
<td colspan=4>',triggerBody()?['BillingBU'],'</td>
</tr>
<tr>
<th>Customer location</th>
<td colspan=4>',triggerBody()?['CustomerLocation'],'</td>
</tr>
<tr>
<th>Project ID</th>
<td colspan=4>',triggerBody()?['Title'],'</td>
</tr>
<tr>
<th>Project name</th>
<td colspan=4>',triggerBody()?['ProjectName'],'</td>
</tr>
<tr>
<th>Project sponsor</th>
<td colspan=4>',outputs('Compose_5'),'</td>
</tr>
<tr>
<th>GAC contact name</th>
<td colspan=4>',outputs('Compose'),'</td>
</tr>
<tr>
<th>Project description</th>
<td colspan=4>',triggerBody()?['WorkDescription'],'</td>
</tr>
<tr>
<th>resource skill description</th>
<td colspan=4>',triggerBody()?['SkillSetRequired_x002f_GPP'],'</td>
</tr>
<tr>
<th>Resource type</th>
<td colspan=4>',outputs('Compose_2'),'</td>
</tr>
<tr>
<th> vertical</th>
<td colspan=4>',triggerBody()?['Function'],'</td>
</tr>
<tr>
<th colspan=5>Costing (Yearly/monthly)</th>
</tr>
<tr>
<th></th>
<th></th>
<th>Year 1</th>
<th>Year 2</th>
<th>Year 3</th>
</tr>
<tr>
<th></th>
<th>Currency</th>
<td>',outputs('Compose_4'),'</td>
<td>--</td>
<td>--</td>
</tr>
<tr>
<th>General Cost</th>
<th>Payroll Cost</th>
<td>',triggerBody()?['PayrollCost'],'</td>
<td>--</td>
<td>--</td>
</tr>
<tr>
<th></th>
<th>CBS charges</th>
<td>',triggerBody()?['CBScharges'],'</td>
<td>--</td>
<td>--</td>
</tr>
<tr>
<th></th>
<th>Rent</th>
<td>',triggerBody()?['Rent'],'</td>
<td>--</td>
<td>--</td>
</tr>
<tr>
<th></th>
<th>Common support cost</th>
<td>',triggerBody()?['Commonsupportcost'],'</td>
<td>--</td>
<td>--</td>
</tr>
<tr>
<th></th>
<th>Others (Employee fringes)</th>
<td>',triggerBody()?['Others_x0028_Employeefringes_x00'],'</td>
<td>--</td>
<td>--</td>
</tr>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<th>Specific job need</th>
<th>Shift charge (Other than general shift)</th>
<td>',triggerBody()?['Shiftcharge_x0028_Otherthangener'],'</td>
<td>--</td>
<td>--</td>
</tr> 
<tr>
<th></th>
<th>Travel</th>
<td>',triggerBody()?['Travel'],'</td>
<td>--</td>
<td>--</td>
</tr> 
<tr>
<th></th>
<th>Training</th>
<td>',triggerBody()?['Training'],'</td>
<td>--</td>
<td>--</td>
</tr>
<tr>
<th></th>
<th>Subtotal</th>
<td>',triggerBody()?['Total_x0020_Transfer_x0020_Price'],'</td>
<td>--</td>
<td>--</td>
</tr>
<tr>
<th></th>
<th>Transfer Price Mark-up %</th>
<td>',outputs('Compose_10'),'</td>
<td>--</td>
<td>--</td>
</tr>
<tr>
<th></th>
<th>Transfer Price Mark-up amount </th>
<td>',triggerBody()?['Transfer_x0020_Price_x0020_Mark_0'],'</td>
<td>--</td>
<td>--</td>
</tr>
<tr>
<th></th>
<th>Total Transfer Price</th>
<td>',triggerBody()?['subtotal'],'</td>
<td>--</td>
<td>--</td>
</tr>
<tr>
<th></th>
<th>GST %</th>
<td>',outputs('Compose_13'),'</td>
<td>--</td>
<td>--</td>
</tr>
<tr>
<th></th>
<th>GST Amount</th>
<td>',triggerBody()?['GST_x0020_Amount'],'</td>
<td>--</td>
<td>--</td>
</tr>
<tr>
<th></th>
<th>Total cost to customer</th>
<td>',triggerBody()?['Total_x0020_cost_x0020_to_x0020_'],'</td>
<td>--</td>
<td>--</td>
</tr>
</table>
</html>

Anonymous · ‎07-02-2020

@Jay-Encodian sure. i am taking a look at myself. if you find anything do tell me!

Jay-Encodian · ‎07-02-2020

@Anonymous see previous reply

Jay-Encodian · ‎07-02-2020

You may need to do some additional styling to reduce font sizes force column widths to correctly process in OneDrive

OneDrive compared with Encodian 'HTML to PDF' below:

HTH

Jay

Anonymous · ‎07-02-2020

@Jay-Encodian this is the PDF output generated out of your code. it is still not completely falling under the page property. i tried increasing the colspan property to 8 and the table disappeared in the next output. any suggestions as to what has to be done. would really appreciate if you could give me more tips.

Anonymous · ‎07-02-2020

@Jay-Encodian i tired reducing the font-size to 8 from 15, still no luck.
can you help me in fixing this issue?

Jay-Encodian · ‎07-02-2020

@Anonymous You should not have changed the colspan values... there aren't 8 columns to span accross.

You need to use CSS to apply fixed widths to your table columns

Anonymous · ‎07-02-2020

@Jay-Encodian if you could just give a small example of the css that would really help.
you mean to say i need to apply fixed width percentage to all of my td and th tag?

Jay-Encodian · ‎07-02-2020

@Anonymous here you go

<td width="10px">Example</td>

You'll need to do some trial and error...

This may be of interest but the HTML / CSS support for OneDrive HTML conversion is not 100%... so it may just be easier to fix all the widths via trial and error until your output is correct. Or to save you a lot of time, obtain a third party converter which would just work, as per previous screen shot.

https://css-tricks.com/almanac/properties/t/table-layout/

Anonymous · ‎07-02-2020

@Jay-Encodian well i figured out that it was a small issue.

Anyone out there facing the same issue just add the below css attribute to your table and your td and th.
so i just added table-layout as fixed for my table, and also reduced my font size to 10 and overflow as hidden.
Now even if the word count is more than expected it fits within the page and does get altered out.

Thank you so much for the help though @Jay-Encodian !!

table{
table-layout:fixed;}
td,th{
font-size:10px;overflow:hidden;}

Jay-Encodian · ‎07-02-2020

@Anonymous

That approach was linked to in my previous post

Anonymous · ‎07-02-2020

@Jay-Encodian i followed your approach of colspan but that did not do the trick. i am sorry i did not notice this approach in your previous post.

fnunes · ‎03-04-2022

Thank you! I faced a similar issue where the table row was cutting off the content of a large text, and this provided some invaluable insight.

My solution was adding the overflow:hidden AND putting the content of the td inside of a div.

PowerUser1986 · ‎04-11-2022

Hi All,

I'm trying to convert HTML to PDF using similar method. I want to conditionally hide a row in the table, it works fine with HTML creation. however, when I convert that to PDF hidden row will appear in the PDF. Please find the table code below.

<table>
<tr>
<th>Question</th>
<th>Response</th>
</tr>
<tr><td>Company Name</td><td>Test</td></tr>
<tr><td>Address</td><td>Test address</td></tr>
<tr><td>Country</td><td>UK</td></tr>
<tr><td>Contact Name</td><td>HP</td></tr>
<tr><td>Telephone/Mobile Number</td><td>0123456</td></tr>
<tr><td>Email</td><td>0123456@compnay.com</td></tr>
<tr style='display:none'><td>Basic Details</td><td></td></tr>
</table>