web
You’re offline. This is a read only version of the page.
close
Skip to main content

Announcements

News and Announcements icon
Community site session details

Community site session details

Session Id :
Power Platform Community / Forums / Power Apps / html text to pdf forma...
Power Apps
Unanswered

html text to pdf formatting issue with table header

(0) ShareShare
ReportReport
Posted on by 65

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.  

image.JPG
Categories:
I have the same question (0)
  • v-xida-msft Profile Picture
    Microsoft Employee on at

    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,

     

     

  • mattthew Profile Picture
    65 on at

    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 Profile Picture
    Microsoft Employee on at

    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 Profile Picture
    66 on at

    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 Profile Picture
    156,297 Most Valuable Professional on at

    Hi @A8Tony ,

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

  • A8Tony Profile Picture
    66 on at
    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 Profile Picture
    2 on at

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

  • A8Tony Profile Picture
    66 on at

    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. 🤷🏽‍♂️

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

Quick Links

Season of Sharing Community Challenge Winners!

Congratulations to our community stars!

Kudos to our 2025 Community Spotlight Honorees

Expanding mentorship, skilling, and AI innovation

Congratulations to the July Top 10 Community Leaders!

These are the community rock stars!

Leaderboard > Power Apps

#1
WarrenBelz Profile Picture

WarrenBelz 392 Most Valuable Professional

#2
11manish Profile Picture

11manish 136 Super User 2026 Season 2

#3
MS.Ragavendar Profile Picture

MS.Ragavendar 109 Super User 2026 Season 2

Last 30 days Overall leaderboard