Power Automate Html Convert to PDF

[Dipak_Shaw]

Hi Everyone, I am trying to create a pdf from html document.

Everything is fine with HTML but when I am converting the html to PDF I am not getting the pdf as expected.
there are unnecessary spaces in borders and there are double borders in some tables.

is there any instructions to create such html so that pdf will be good? Please Help

@RezaDorrani

@Pstork1 @tom_riha @ScottShearer @abm 

[Pstork1]

How are you setting things like borders in the HTML? Are you using CSS?  The built-in converter is somewhat limited in its support for custom CSS formatting of tables.  That may be what is causing he issue.  The only real solution for that is to use a third party connector/action that has a better feature set.  But we will need more information on the HTML you are using before we can really tell if that is the cause.

[Dipak_Shaw]

I am using CSS for borders and also I am using the Border-collapse css but its not collapsing properly.

[Pstork1]

As I mentioned there is certain CSS that is not respected by the built-in PDF conversion.  In my case it was page breaks.  The only option then is to use one of the third party connectors to do the conversion. I've had good luck with Encodian.  They have a free license that can be used to explore the possibities.  I would try their connector and see if you get the results you want.  If you do you'll either need to use a third party converter or modify your table styling to supported CSS.

[Dipak_Shaw · Accepted solution]

The issue was that I was using multiple tables and appending them one by one but I found that using colspan property in td tag we can create multiple columns in different rows in a single table and single table won't cause any css issue.

Thanks

[Dhruv100322]

Hi @Pstork1 ,

I am facing similar issue. Can you please help?

https://powerusers.microsoft.com/t5/General-Power-Automate/Converting-from-HTML-to-PDF-returns-nothi...

[McPowerPlatform]

Depending of the Document you are going to format, the best experience I had was using DIV's, keep in mind that Power Automate supports inline CSS so let me add you some code with a table with sample data: you can add this in the flow as a compose step, let me know how this works for you

<div id="table" STYLE="display: table;">
<div style="display: table-caption; padding: 0.5em; border: 1px solid #000;">Table Head with DivsS</div>
<div style="display: table-row; ">
<div style="display: table-cell; padding: 0.5em; border: 1px solid; ">Data 1</div><div style="display: table-cell; padding: 0.5em; border: 1px solid; ">Data2</div><div style="display: table-cell; padding: 0.5em; border: 1px solid;">Data3</div>
</div>
<div style="display: table-row; ">
<div style="display: table-cell; padding: 0.5em; border: 1px solid; " >Data 4</div><div style="display: table-cell; padding: 0.5em; border: 1px solid; ">Data5</div><div style="display: table-cell; padding: 0.5em; border: 1px solid; " > Data6</div>
</div>
<div style="display: table-row; ">
<div style="display: table-cell; padding: 0.5em; border: 1px solid; " >Data 7</div><div style="display: table-cell; padding: 0.5em; border: 1px solid; " >Data 8</div><div style="display: table-cell; padding: 0.5em; border: 1px solid; ">Data 9</div>
</div>
</div>

[Anonymous]

What are you using to convert the HTML to PDF? Adobe has an option but it's premium.

[Anonymous]

Does anyone know how to fix the conversion of the html file to PDF from destroying my HTML table?

The HTML file displays fine, but the resulting PDF has a mashed up HTML Table that is not readable.

[McPowerPlatform]

Depending of the Document you are going to format, the best experience I had was using DIV's, keep in mind that Power Automate supports inline CSS so let me add you some code with a table with sample data: you can add this in the flow as a compose step, let me know how this works for you

<div id="table" STYLE="display: table;">
<div style="display: table-caption; padding: 0.5em; border: 1px solid #000;">Table Head with DivsS</div>
<div style="display: table-row; ">
<div style="display: table-cell; padding: 0.5em; border: 1px solid; ">Data 1</div><div style="display: table-cell; padding: 0.5em; border: 1px solid; ">Data2</div><div style="display: table-cell; padding: 0.5em; border: 1px solid;">Data3</div>
</div>
<div style="display: table-row; ">
<div style="display: table-cell; padding: 0.5em; border: 1px solid; " >Data 4</div><div style="display: table-cell; padding: 0.5em; border: 1px solid; ">Data5</div><div style="display: table-cell; padding: 0.5em; border: 1px solid; " > Data6</div>
</div>
<div style="display: table-row; ">
<div style="display: table-cell; padding: 0.5em; border: 1px solid; " >Data 7</div><div style="display: table-cell; padding: 0.5em; border: 1px solid; " >Data 8</div><div style="display: table-cell; padding: 0.5em; border: 1px solid; ">Data 9</div>
</div>
</div>

[Dlegal]

Thanks for posting this. This is a very good baseline to work from to build more advanced layouts and I would recommend anyone looking to avoid a premium connector to start with what you have provided and go from there. I only wish I found your response sooner.  As a result of further discovery (or pain depending on one's perspective) I was able to build out the following form/report. You can put together something a bit more elegant but at the cost of some sanity. 😄

Sample layoutPage 2

[notchrisball]

Would you ever share this code or does anyone know a place where I can find HTML to copy paste and use for my solution? I've never touched html but I was able to create a basic table and just want to go a step further. 

[PatrickC]

I use http://jsbin.com. It updates the output in near real time. Has saved me so much time from nothing having to save and run my flow everytime I change something. I do hope Dlegal lets us know their code.