cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Highlighted
Advocate I
Advocate I

html text to pdf formatting issue with table header

Can someone tell me what I'm doing wrong here....

 

<table width='100%' border='1' cellpadding='5' style='border:0px solid black; border-collapse:collapse'>" &
     "<tr style='background-color:#efefef'>
         <th>Company</th> 
         <th>Team </th> 

email format comes out fine.  PDF format looks like attached image.  

6 REPLIES 6
Highlighted
Community Support
Community Support

Re: html text to pdf formatting issue with table header

Hi @mattthew,

Could you please share a bit more about your scenario?

How do you convert your HTML Text into a PDF file?

I have made a test on my side, and don't have the issue that you mentioned. Please take a try with the following workaround:6.JPG

 

7.JPG

In order to convert a HTML Text content into a PDF content within an app, you could consider take a try to add a MuhimbiPDF connector within your app to achieve your needs.

Add a HTML Text control (HtmlText1) within your app, set the HtmlText property to following:

"<table width='100%' border='1' cellpadding='5' style='border:0px solid black; border-collapse:collapse'>" &
     "<tr style='background-color:#efefef'>
         <th>Company</th> 
         <th>Team </th>
      </tr>
      <tr>
          <td>Microsoft</td>
          <td>PowerApps</td>
      </tr>
      <tr>
          <td>Microsoft</td>
          <td>Power BI</td>
      </tr>
      <tr>
          <td>Mac</td>
          <td>iPhone</td>
      </tr>
</Table>"

Add a Button ("Send Email") within my app, set the OnSelect property to following:

Office365.SendEmail(
    "Test1@xxxxx.xxmicrosoft.com",
    "PowerApps Email Sending Test",
    HtmlText1.HtmlText,
    {
        IsHtml: true,
        Attachments:Table({Name:"Table.pdf", ContentBytes:MuhimbiPDF.converthtml(HtmlText1.HtmlText).processed_file_content, '@odata.type':""})
    }
)

On your side, you should type:

Office365.SendEmail(
    "Your Email Address",  /* <-- Type your email address here */
    "PowerApps Email Sending Test",
    HtmlText1.HtmlText,
    {
        IsHtml: true,
        Attachments:Table({Name:"Table.pdf", ContentBytes:MuhimbiPDF.converthtml(HtmlText1.HtmlText).processed_file_content, '@odata.type':""})
    }
)

The email sends well as below:8.JPG

Please check if you have typed proper HTML Text within your app, please check the above HTML Text I provided as a reference.

More details about the usage of MuhimbiPDF connector within PowerApps, please check the following blog:

http://blog.muhimbi.com/2017/08/convert-powerapps-data-to-pdf.html

More details about MuhimbiPDF connector, please check the following article:

https://docs.microsoft.com/en-us/connectors/muhimbi/

 

More details about sending a HTML table email within PowerApps, please check the following blog:

https://powerapps.microsoft.com/en-us/blog/html-email-reporting-with-tabular-data/

 

Best regards,

 

 

Community Support Team _ Kris Dai
If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.
Highlighted
Advocate I
Advocate I

Re: html text to pdf formatting issue with table header

Hi @v-xida-msft unfortunately we do not allow this connector at our company.  

 

"<h2 style='color:blue; background-color:#efefef; border:1px solid black'; align='center'>Chevron Oronite - Planning Phase Hazard Analysis (PPHA)</h2>" 
& "<h4 style='color:blue; background-color:#efefef; border:1px solid black'; align='center'>Work Order:  " & Dropdown4.Selected.Value &"</h4>" &
"<table width='100%' border='1' cellpadding='5' style='border:0px solid black; border-collapse:collapse'>" &
     "<tr style='background-color:#efefef'>
         <th>Company</th> 
         <th>Team </th> 
         <th>Job Site Participants</th>
         <th>Created By</th> 
         <th>Equipment Worked On</th>
      </tr> 
      <tr>" &
         Concat(Filter(TCD_1, Title= Dropdown4.Selected.Value),
             "<td>" & Company & " </td>
              <td>" & Name_x0020_Participants & " </td>
              <td>" & Job_x0020_Site_x0020_Participant & " </td> <td>" & Author.DisplayName & " </td>
              <td>" & Equipment_x0020_Worked_x0020_On & " </td>","<tr></tr>") &
"</table>" 

This is my table, or part of it.   I have a submit button which references the htmltext table.  

PDFConverter.Run(User().Email, HtmlText1.HtmlText)

The email looks ok but the pdf of the table looks funky as the below picture showed.  Not sure if this is a formatting issue in my html or what the issue is.   Thanks.

Highlighted
Community Support
Community Support

Re: html text to pdf formatting issue with table header

Hi @mattthew,

Based on the HTML Text content that you peovided, I think there is something wrong with it.

Please consider take a try to modify your formula as below:

"<h2 style='color:blue; background-color:#efefef; border:1px solid black'; align='center'>Chevron Oronite - Planning Phase Hazard Analysis (PPHA)</h2>" 
& "<h4 style='color:blue; background-color:#efefef; border:1px solid black'; align='center'>Work Order:  " & Dropdown4.Selected.Value &"</h4>" &
"<table width='100%' border='1' cellpadding='5' style='border:0px solid black; border-collapse:collapse'>" &
     "<tr style='background-color:#efefef'>
         <th>Company</th> 
         <th>Team </th> 
         <th>Job Site Participants</th>
         <th>Created By</th> 
         <th>Equipment Worked On</th>
      </tr> 
      <tr>" &
         Concat(Filter(TCD_1, Title= Dropdown4.Selected.Value),
             "<td>" & Company & " </td>
              <td>" & Name_x0020_Participants & " </td>
              <td>" & Job_x0020_Site_x0020_Participant & " </td> <td>" & Author.DisplayName & " </td>
              <td>" & Equipment_x0020_Worked_x0020_On & " </td></tr><tr>") &  /* <-- Modify formula here, the </tr> tag should be before <tr> tag */
"</table>" 

Or

"<h2 style='color:blue; background-color:#efefef; border:1px solid black'; align='center'>Chevron Oronite - Planning Phase Hazard Analysis (PPHA)</h2>" 
& "<h4 style='color:blue; background-color:#efefef; border:1px solid black'; align='center'>Work Order:  " & Dropdown4.Selected.Value &"</h4>" &
"<table width='100%' border='1' cellpadding='5' style='border:0px solid black; border-collapse:collapse'>" &
     "<tr style='background-color:#efefef'>
         <th>Company</th> 
         <th>Team </th> 
         <th>Job Site Participants</th>
         <th>Created By</th> 
         <th>Equipment Worked On</th>
      </tr>" &    
         Concat(Filter(TCD_1, Title= Dropdown4.Selected.Value),
             "<tr><td>" & Company & " </td>   /* <-- Modify formula here */
              <td>" & Name_x0020_Participants & " </td>
              <td>" & Job_x0020_Site_x0020_Participant & " </td> <td>" & Author.DisplayName & " </td>
              <td>" & Equipment_x0020_Worked_x0020_On & " </td></tr>") &  /* <-- Modify formula here */
"</table>" 

In addition, please check and see if the following video would help in your scenario:

https://www.youtube.com/watch?v=IhE0-HumNNo&feature=youtu.be

 

Best regards,

Community Support Team _ Kris Dai
If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.
Highlighted
Frequent Visitor

Re: html text to pdf formatting issue with table header

I've tried both of the solutions provided above, and neither of them resolved exactly this issue.

 

Has anyone resolved this?

 

Here is my HTML which I'm happy to take suggestion on.

 

"<h3>Data Table HTML Email</h3>" & "<strong> Purchase Order Items: </strong>" & "<p><strong> Supplier Account No: </strong>" & txtSupplierAccountNo.Text & "</p>
<p><strong> Supplier Name: </strong>" & txtSupplierName.Text & "</p>
<p> </p>
<p> </p>
<p><strong> Purchase Order No: </strong>" & DataCardValue1.Text & "</p>
<p><strong> Purchase Order Date: </strong>" & DataCardValue2.Text & "</p>
<p> </p>
<p><strong> Total Value: </strong>" & DataCardValue4.Text & "</p>
<p> </p>
<p> </p>
<table style='border: 0px solid black; border-collapse: collapse;' border=1px width='100%' cellpadding='5'>" & 
"<tr style='background-color:#efefef' >
      <th align=Left width='20%'> ItemCode </th> 
      <th align=left width='60%'> Description </th> 
      <th align=right width='10%'> Qty </th> 
      <th align=right width='10%'> Value </th>
      </tr>
      <tr>" & Concat(
    Filter(
        '[dbo].[POPOrderReturnLine]',
        POPOrderReturnID = Gallery1.Selected.POPOrderReturnID
    ),
    "<td>" & ItemCode & " </td>
                <td>" & ItemDescription & " </td>
                <td align=right>" & LineQuantity & " </td>
                <td align=right>" & Text(
        LineTotalValue,
        "0,0.00"
    ) & "</td>",
    "</tr><tr>"
) & "
</table>" & 
"<p> &nbsp </p>
<strong> Approved By : </strong>" & "<p>&nbsp</p>"
Highlighted
Super User III
Super User III

Re: html text to pdf formatting issue with table header

Hi @A8Tony ,

You have an unclosed <tr> table row tag at the bottom, other than that it looks fine.

Highlighted
Frequent Visitor

Re: html text to pdf formatting issue with table header

Thank you @WarrenBelz. That was a copy and paste error on my part 👍

I've come across other solutions and have adopted one of them which has solved my issue.

It seems that using css to define styles for elements resolves the issue. Odd, but it's working as expected now so I can't complain.

Helpful resources

Announcements
Community Conference

Power Platform Community Conference

Check out the on demand sessions that are available now!

Watch Now

Experience what’s next for Power Apps

See the latest Power Apps innovations, updates, and demos from the Microsoft Business Applications Launch Event.

Power Platform ISV Studio

Power Platform ISV Studio

ISV Studio is designed to become the go-to Power Platform destination for ISV’s to monitor & manage published applications.

secondImage

Power Platform 2020 release wave 2 plan

Features releasing from October 2020 through March 2021

Top Solution Authors
Top Kudoed Authors
Users online (6,833)