Missing Content from HTML to PDF convert

micross · ‎08-18-2022

I'm trying to create a PDF dynamically filled in with content from a single item in a gallery.

So far I have run into two problems: (1) consistently missing content and (2) content that is sometimes included but sometimes missing.

Because there is content that is sometimes converted and other times not, without changing the html, I'm not sure what the problem is. In my experience when the html to pdf conversion runs into an issue it's usually the html code. However, I cannot find what is wrong in my code. Would y'all mind taking a look?

I've attached V1 and V2 of the html and pdf. V1 includes one piece of information "will be attending friday sessions" and V2 does not. There is no difference in the html code between the two. Beyond that I am missing most of the content that is supposed to be on this page, as you can see between the html and pdf versions.

Here;s the html:

<!DOCTYPE html>
<html lang='en'>
<head>
  <link rel='preconnect' href='https://fonts.googleapis.com'>
  <link rel='preconnect' href='https://fonts.gstatic.com' crossorigin>
  <link href='https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,700;0,900;1,300;1,400;1,900&display=swap' rel='stylesheet'> 

</head>

<body>

<div style='"& 'top-bar'.HtmlText &"'>
  <table style='width:100%;'>
    <tr>
        <td><img src=" & logoVar &" width = '88' height = '32'></td>
        <td style='vertical-align: top;'>
            <h3>
            FirstStepStaffing.com  
            </h3>
       </td>
    </tr>
 </table>
</div>

<div style='" & titlerow.HtmlText & "'>
  <h1 style='" & titlerowText.HtmlText & "'> Resource Referral Form</h1>
</div>

<div>
  <h3 style='" & headingborder.HtmlText & "'> Client Information </h3>
  <table style='border: #1f1f1f 1px solid; width:100%; padding-bottom: 20px;'>
    <tr style='width:100%'>
      <th style='" & newsubbox.HtmlText & "'>"
        & ClientFirstName.Text & "
      </th>
      <th style='" & newsubbox.HtmlText & "' >"
        & ClientLastName.Text & "
      </th>
      <th style='" & newsubbox.HtmlText & "'>"
        & ClientPhone.Text & "
      </th>
      <th style='" & newsubbox.HtmlText & "'>"
        & ClientEmail.Text & "
      </th>
    </tr>
    <tr  style='width:100%;'>
      <td  style='" & newsubbox.HtmlText & "'>
        First Name
      </td>
      <td style='" & newsubbox.HtmlText & "'>
        Last Name
      </td>
      <td style='" & newsubbox.HtmlText & "'>
        Phone
      </td>
      <td style='" & newsubbox.HtmlText & "'>
        Email
      </td>
    </tr>
  </table>
</div>

<div>
  <table style='border: #1f1f1f 1px solid; width:100%; padding-bottom: 20px;'>
    <tr  style='width:100%;'>
      <th style='" & newsubbox.HtmlText & "'>
        Referer Information:
      </th>
      <th style='" & newsubbox.HtmlText & "'>"
        & ReferrerFirstName.Text & " " & ReferrerLastName.Text & "
      </th>
      <th style='" & newsubbox.HtmlText & "'>"
        & ReferrerPhone.Text & "
      </th>
      <th style='" & newsubbox.HtmlText & "'>"
        & ReferrerPhone.Text & "
      </th>
    </tr>
  </table>
</div>


<div>
  <h3 style='" & headingborder.HtmlText & "'> Service Information</h3>
  <table style='border: #1f1f1f 1px solid; width:100%; padding-bottom: 20px;'>
    <tr  style='width:100%;'>
      <th style='" & newsubbox_3.HtmlText & "'>" 
         & BrowseGallery1.Selected.Organization_Name &"
      </th>
      <th style='" & newsubbox_3.HtmlText & "'> "
        & AcceptedService.Text&"
      </th>
      <th style='" & newsubbox_3.HtmlText & "'>"
        & AcceptedTraining.Text&"
      </th>
    </tr>
    <tr  style='width:100%;'>
      <td style='" & newsubbox_3.HtmlText & "'>
        Organization Name
      </td>
      <td  style='" & newsubbox_3.HtmlText & "'>
        Service Provided
      </td>
      <td  style='" & newsubbox_3.HtmlText & "'>
        Training Provided
      </td>
    </tr>
  </table>

  <table style='border: #1f1f1f 1px solid; width:100%; padding-bottom: 20px;'>
    <tr>
      <td style='" & newtext.HtmlText & newsubbox_3.HtmlText & "'>
        Program Notes: 
      </td>
      <td style='" & newsubbox_2.HtmlText & "'>"
        & ProgramSpecificNotes.Text &      
    "</td>
    </tr>
  </table>

  <table style='border: #1f1f1f 1px solid; width:100%; padding-bottom: 20px;'>
    <tr  style='width:100%;'>
      <th style='" & newsubbox.HtmlText & "'>"
        & AcceptedContact.Text&"
      </th>
      <th style='" & newsubbox.HtmlText & "'>"
         & AcceptedPhone.Text & "
      </th>
      <th style='" & newsubbox.HtmlText & "'>"
        & AcceptedEmail.Text &"
      </th>
      <th style='" & newsubbox.HtmlText & "'>"
        & BrowseGallery1.Selected.Website & "
      </th>
    </tr>
    <tr  style='width:100%;'>
      <td style='" & newsubbox.HtmlText & "'>
        Direct Contact
      </td>
      <td style='" & newsubbox.HtmlText & "'>
        Phone
      </td>
      <td style='" & newsubbox.HtmlText & "'>
        Email
      </td>
      <td style='" & newsubbox.HtmlText & "'>
        Website
      </td>
    </tr>
    <tr  style='width:100%;'>
      <th style='" & newsubbox_1.HtmlText & "'>"
        & BrowseGallery1.Selected.Address &"
      </th>
      <td style='" & newsubbox_1.HtmlText & "'>
        Address
      </td>
    </tr>
  </table>
</div>


<div>
  <h3 style='" & headingborder.HtmlText & "'> Additional Client or Referral Notes </h3>
  <p style='" & newPtext.HtmlText & "'>"
  & ClientSpecificNotes.Text & 
  "</p>
</div>  

</body>

And here's the css that it has included.

These are saved in labels in the powerapp, but here are fomatted as a css file for easier viewing:

.top-bar {
  width: 100%;
  height: 7%;
  overflow-y: auto;
  background-color: #2e8d9e;
  color: #1F1F1F;
}

body {
  margin: 0;
  box-sizing: border-box;
  font-family: 'Montserrat', sans-serif;
}

.titlerowText {
  color:#1F1F1F;
  font-weight: bold;
font-size: 25px;
text-align: center;
}

.titlerow {
  border-color: #1F1F1F;
border-style: solid;
border-width: 1px;
}

.newsubbox {
  width: 20%;
  height: 100%;
  display: inline-block;
  vertical-align: top;
  text-align: center;
  padding-top: 10px;
  padding-bottom: 10px;
}

.newsubbox_3 {
  width: 30%;
  height: 100%;
  display: inline-block;
  vertical-align: top;
  text-align: center;
  padding-top: 10px;
  padding-bottom: 10px;
}

.newsubbox_2 {
  width: 65%;
  height: 100%;
  display: inline-block;
  vertical-align: top;
  text-align: center;
  padding-top: 10px;
  padding-bottom: 10px;
}

.newtext {
  color:#1F1F1F;
  font-weight: bold;
  font-size: 16px;
}

.newsubbox_1 {
  width: 90%;
  height: 100%;
  display: inline-block;
  vertical-align: top;
  text-align: center;
  padding-top: 10px;
  padding-bottom: 10px;
}

.headingborder{
  border: #1F1F1F 2px solid;
  padding: 10px;
}

.newPtext{
  font-size: 13px;
  text-align: left;
  padding: 10px;
}

See the attached V1 HTML and PDF images, as well as V2 HTML. The V2 PDF is below (you can only upload three files 🙄)

WarrenBelz · ‎08-18-2022

Hi @micross ,

Without going into the details of your code, I can tell you that CSS and the PDF in OneDrive "are not best friends" and what you are seeing is not unusual, particularly with the complexity of some of it. and I have always kept my HTML tables simple with nothing but tables, borders and font bold/italic etc. If I want to produce a stylised PDF, I use a Word merge, which give almost complete freedom of how it looks.

Please click Accept as solution if my post helped you solve your issue. This will help others find it more readily. It also closes the item. If the content was useful in other ways, please consider giving it Thumbs Up.

Visit my blog Practical Power Apps

RandyHayes · ‎08-18-2022

@micross

To add what @WarrenBelz mentioned...converting the html to PDF in your PowerAutomate via the free convert to pdf option is a bear! First, you need to provide all of your css styles in your html. It cannot be referenced.

Some styles will not work (the PDF conversion engine is old and will only do some basics).

To add to my point about the css styles above, is they are on the tags in your html, they will most likely not be honored. The PDF converter will want them as embedded styles and will ignore (not in all cases) the inline styles on the tags.

To get it right, you need to really design your html outside of the app. What I have had to do in the past is to create a simple flow that just converted a file once changed. Then, in an editor I would alter the html file accordingly...then look at the resultant PDF until I hit the magic combination that is needed for the conversion engine to work properly.

I will also add that this was only in cases where the client did not want to pony up another $15 or so a month to subscribe to the Plumsail Documents connector Which does a most excellent job of generating PDF's.

I hope this is helpful for you.

_____________________________________________________________________________________
Digging it? - Click on the Thumbs Up below. Solved your problem? - Click on Accept as Solution below. Others seeking the same answers will be happy you did.
NOTE: My normal response times will be Mon to Fri from 1 PM to 10 PM UTC (and lots of other times too!)
Check out my PowerApps Videos too! And, follow me on Twitter @RandyHayes
Really want to show your appreciation? Buy Me A Cup Of Coffee!

micross · ‎08-19-2022

Thank you both for the feedback!

micross · ‎08-19-2022

Thank you both for the feedback! Can you say a little more about word merge?

WarrenBelz · ‎08-19-2022

Hi @micross ,

As I mentioned, it is a Premium connector and needs Power Automate, but is it fairly straight-forward. You construct a Word Template with the design you need and add the merge fields as you would in any Word Merge, then store the Template in in a SharePoint Library. You then send the fields to the Flow, select the Template and merge the file. The connector also has a PDF convertor which works well.

Please click Accept as solution if my post helped you solve your issue. This will help others find it more readily. It also closes the item. If the content was useful in other ways, please consider giving it Thumbs Up.

Visit my blog Practical Power Apps