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

HTML Table Colours to PDF

Hi everyone. I'm working on a project for my office's weekly newsletter. Basically, the user selects news stories and statistics from either SharePoint lists or direct user input. The PowerApp takes the user input and creates an HTML text field as a preview. Once the user is happy with the layout, they trigger a flow which creates the actual document.

Currently, I want to have this send out via a PDF. I found a flow online that creates an HTML document, converts it to PDF and deletes the HTML document. This aspect of the flow works. What doesn't seem to work is some of the formatting on the table - specifically colours.

 

For example, I ran this sample table from w3schools through my proces:

 

 

 

<!DOCTYPE html>
<html>
<head>
<style>
table {
  width:100%;
}
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
th, td {
  padding: 15px;
  text-align: left;
}
table#t01 tr:nth-child(even) {
  background-color: #eee;
}
table#t01 tr:nth-child(odd) {
 background-color: #fff;
}
table#t01 th {
  background-color: black;
  color: white;
}
</style>
</head>
<body>

<h2>Styling Tables</h2>

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>
<br>

<table id="t01">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>

</body>
</html>

 

 

Here is a screenshot of the HTML document VS the generated PDF.

 

image.png


Does anyone know how I can get the table background colours to translate into the PDF? I'm not too familiar with HTML/CSS so I'm at a loss.  Thank you in advance!

1 ACCEPTED SOLUTION

Accepted Solutions
Highlighted
Advocate II
Advocate II

Re: HTML Table Colours to PDF

@Gristy - I am using the "Convert File Using Path" action under the OneDrive for Business connector. I know that Plumsail is pretty powerful but I want to proof it out before I need to acquire additional licensing.

@Jay-Encodian I'll check that out as well moving forward.

That being said, I seem to have (more or less) fixed the issue. I had to add the style elements to each table cell instead of using CSS. I just adjusted the formulas that concatenated the data into tables and it worked as expected. Its not perfect but its enough to get me up and running and maybe get things approved for more.

View solution in original post

5 REPLIES 5
Highlighted
Super User II
Super User II

Re: HTML Table Colours to PDF

which html to pdf converter are you using? try the plumsail one its quite good

Highlighted
Super User II
Super User II

Re: HTML Table Colours to PDF

@RTW 

The Encodian 'Convert HTML to PDF' connector will work for you as well - https://support.encodian.com/hc/en-gb/articles/360022205154-Convert-HTML-to-PDF

 

An example (and very simple) Flow configuration:

 

screen2.png

 

You can either convert a file, a URL or just add the HTML which you can also interlace directly with dynamic Flow data!

 

screen3.png

 

Example output below:

 

screen1.png

 

The Encodian action also provides some useful configuration options where tables span multiple pages, check out the 'Repeat Table Header' and 'Repeat Table Footer' advanced options. 

 

HTH

Jay

Highlighted
Advocate II
Advocate II

Re: HTML Table Colours to PDF

@Gristy - I am using the "Convert File Using Path" action under the OneDrive for Business connector. I know that Plumsail is pretty powerful but I want to proof it out before I need to acquire additional licensing.

@Jay-Encodian I'll check that out as well moving forward.

That being said, I seem to have (more or less) fixed the issue. I had to add the style elements to each table cell instead of using CSS. I just adjusted the formulas that concatenated the data into tables and it worked as expected. Its not perfect but its enough to get me up and running and maybe get things approved for more.

View solution in original post

Highlighted
Helper V
Helper V

Re: HTML Table Colours to PDF

Hi @RTW 

 

I seem to be having the same issue as you are you able to show your code for your solution?

Highlighted
Advocate II
Advocate II

Re: HTML Table Colours to PDF

@Kmayes  - Basically I had to do it all without CSS - manually set the colours and what not as needed.

Helpful resources

Announcements
firstImage

Super User Program Update

Three Super User rank tiers have been launched!

firstImage

Power Platform 2020 release wave 2 plan

Features releasing from October 2020 through March 2021

firstImage

New & Improved Power Automate Community Cookbook

We've updated and improved the layout and uploading format of the Power Automate Cookbook!

thirdimage

Power Automate Community User Group Member Badge

Fill out a quick form to claim your user group badge now!

Top Solution Authors
Users online (7,618)