html text to pdf formatting issue with table header

[mattthew]

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.  

[v-xida-msft]

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:

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:

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,

[mattthew]

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.

[v-xida-msft]

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,

[A8Tony]

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>"

[WarrenBelz]

Hi @A8Tony ,

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

[A8Tony]

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.

[thanseehbh]

@A8Tony : Can you please share the solution. I'm facing the same issue.

[A8Tony]

I've literally just had the same issue again over the past few days. Trying to make a document which looks professional whilst using some more modern css to make it so. 

I've had to revert to the old method in order to move forward with a solution for my client. 🤷🏽‍♂️