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

Problem with converting HTML to PDF

Hi, I have flow which converting HTML template/layout to PDF file using OneDrive connectors (see picture). My HTML "invoice template" have variables, which are dinamically changing for atributes of SP list item. Changing variables works quite good, but I have problem with HTML template. 
PDF file does't look simillar as HTML template. I tried to set style for HTML's body tag for "style of A4 page/paper" but this is not good, too. 
I have no idea, where could be problem. Maybe in converting connector, maybe in HTML layout. Is there someone that can halp me with some advice? Thanks. 

 

This is my flow:

TomasG_1-1610994893719.png


This is my HTML layout (invoice layout) 

 

<!DOCTYPE html>
<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style>
        
        /* thi is definition of A4 page format, but it's not working too
            body {
              height: 842px;
              width: 595px;
              // to centre page on screen
              margin-left: auto;
              margin-right: auto;
            }  */

            
        	table, td{
            	border-collapse: collapse;
                text-align:left;
                border: 2px solid black;
                padding-left:5px;
            }
        	
            #tabulka-zahlavie table,th{
            	border: 2px solid black;
	 		}
			
            #ic_dic_ucet{ 
            	overflow: hidden;
            }
            .prve{
               	float: left; 
               	margin: 0px;
          	}  
			.druhe{
            	padding-left:50px; 
                margin:0px
            }
            
            
            
          	#zahlavie_dodavatel{
            	padding-left: 20px;
                margin:4px;  
            }
            
            
            #tabulka-datumi table{
            	width:100%;
                font-size:12px;
                border: 2px solid black;
    		
            }
            
            
            
             #tabulka-datumi td{
             	border: 2px solid black;
             }
            
            p.a{
            	float: left;
                margin-bottom: 0px;
            }
            
            p.b{
            	padding-left:50px;
                margin-bottom: 0px;
            }
    
            
            
            #tabulka_poloziek{
            	font-size:12px;
                width: 100%;
                border: 1px solid white;
                border-collapse: collapse;
                
            }
            
            #tabulka_poloziek th, td{
            	border: 1px solid white;
                padding-left:5px;
            }
            
            
                   #con {
  		    min-height:100%;
   		    position:relative;
		    }

             #footer {
   			position:absolute;
   			bottom:0;
   			width:100%;
   			
			}


    </style>
</head>
<body>         
    <div style="overflow: hidden;">                      
        <h3 style="float: left;margin-bottom: 0px;">Faktura - daňový doklad</h3>                      
        <h3 style="float: right;margin-bottom: 0px;">{cislo_fakt}</h3>         
    </div> 
    
    <hr style="border: 1px solid black; margin-top:0px" >
    
    
    <!-- tabulka tabulka zahlavia -->  
    <div id="tabulka-zahlavie">
      <table style="width:100%;font-size: 12px">                    
          <tr>                              
              <th style="padding-left:5px; width: 50%">Dodavatel:   
                  <p id="zahlavie_dodavatel">{dodavatel_nazov}</p>   	                                  
                  <p id="zahlavie_dodavatel">{dodavatel_ulica}</p>
                  <p id="zahlavie_dodavatel">{dodavatel_mesto}</p>                 
                  
                  <div id="ic_dic_ucet">    	                                          
                    <p style="float: left; margin-bottom:0px">IČ:</p>    	                                          
                  	<p style="padding-left:50px; margin-bottom:0px">{ic_cislo_dodavatel}</p>
                    <p class="prve">DIČ:</p>    	                                          
                    <p class="druhe">{DIC_cislo_dodavatel} </p>	                                  
                    <p class="prve">Účet:</p>    	                                          
                    <p class="druhe">{ucet_cislo_dodavatel}</p>	                                  
                  </div>                              
              </th>  
              
              <th style="padding-left:5px; width: 50%">Odběratel:     	                                  
                  <p id="zahlavie_dodavatel">{odberatel_nazov}</p>    	                                  
                  <p id="zahlavie_dodavatel">{odberatel_ulica}</p>    	                                  
                  <p id="zahlavie_dodavatel">{odberatel_mesto}</p> 
                  
                  <div id="ic_dic_ucet">
                  	<p style="float: left; margin-bottom:0px">IČ:</p>    	                                          
                    <p style="padding-left:50px; margin-bottom:0px">{ic_cislo_odberatel}</p>
                    <p class="prve">DIČ:</p>    	                                          
                    <p class="druhe">{dic_cislo_odberatel} </p>	                                  
                    <p class="prve">Účet:</p>    	                                          
                    <p class="druhe">{ucet_cislo_odberatel}</p>	                                  
                  </div>                                    
              </th>                       
          </tr>         
      </table>
    </div>
    
    <br>
    
    <!-- tabulka s datumami, sposobom platby, sposobom dopravy a variabilnym symbolom -->  
    <div id="tabulka-datumi">
        <table>                    
            <tr>                              
                <td>                                      
                	<div id="ic_dic_ucet">    	                                          
                        <p class="a"><strong>Vystaveno:</strong></p>  
                        <p class="b">{datum_vystaveno}</p>
                    </div> 
                </td> 
                
                <td>                                      
                    <div id="ic_dic_ucet">    	                                          
                        <p class="a"><strong>Datum splatnosti:</strong></p>  
                        <p class="b">{datum_splatnosti}</p>
                    </div>
                </td>                                  
                
                <td>                                      
                    <div id="ic_dic_ucet">    	                                          
                        <p style="float: left;margin-bottom: 0px"><strong>Datum uskuteč. zdan. plnění:</strong></p>  
                        <p class="b">{datum_plnenia}</p>
                    </div>
               	</td>                    
            </tr>
            
            <tr>                            
                <td >                                      
                    <div id="ic_dic_ucet">    	                                          
                        <p class="a"><strong>Způsob platby:</strong></p>    	                                          
                        <p class="b">{platba}</p>	                                  
                    </div>                             
                </td>                                   
                <td>                                      
                    <div id="ic_dic_ucet">    	                                          
                        <p class="a"><strong>Způsob dopravy:</strong></p>    	                                          
                        <p class="b">{doprava}</p>	                                  
                    </div>                              
                </td>                                   
                <td>                                      
                    <div id="ic_dic_ucet">    	                                          
                        <p class="a"><strong>Variabilní symbol:</strong></p>
                        <p class="b">{cislo_fakt}</p>	                                  
                    </div>                              
                </td>                    
            </tr>         
        </table>
       </div>
       
       
    <br>
    
    
    <!-- tabulka s polozkami faktury -->          
    <table id="tabulka_poloziek">                    
        <tr >                              
            <th style="width:40%">                                 
                <p>Položka</p>                         
            </th>                              
            <th>                                 
                <p>Mn.</p>                         
            </th>                             
            <th>                                 
                <p>Jedn.</p>                         
            </th>                         
            <th>                                 
                <p>Cena za jedn.</p>                         
            </th>                              
            <th>                                 
                <p>DPH</p>                         
            </th>                              
            <th>                                 
                <p>Cena * ks</p>                         
            </th>                              
            <th style="text-align: right">                                 
                <p>včetně DPH</p>                         
            </th>                             
        </tr>                   
        <tr style="font-size:9px">                         
            <td style="width:40%">                                   
                <p>{polozka}</p>                           
            </td>                                
            <td >                                   
                <p>{mnozstvo}</p>                           
            </td>                               
            <td >                                   
                <p>{jednotka}</p>                           
            </td>                           
            <td>                                   
                <p>{cena_jednotka}</p>                           
            </td>                                
            <td >                                   
                <p>{dph}</p>                           
            </td>                                
            <td >                                   
                <p>{cena_ks}</p>                           
            </td>                                
            <td style="text-align: right">                                   
                <p>{s_dph}</p>                           
            </td>                    
        </tr>                       
    </table>  
    
    
    <hr style="border: 1px solid black; margin-top:0px" >                
                      
    <!-- tabulka konecneho suctu a vyslednej hodnoty -->     
                  
                
        <table style="border:0px; position:float right; ">            
            <tr>                
                <th style="padding-left:5px; border: 1px solid white;text-align:center">sazba                            
                </th>                  
                <th style="padding-left:5px; border: 1px solid white;text-align: center">bez DPH                             
                </th>                  
                <th style="padding-left:5px; border: 1px solid white;text-align: center">DPH                                           
                </th>                  
                <th style="padding-left:5px; border: 1px solid white;text-align: center">včetně DPH                                             
                </th>               
            </tr>            
            <tr>            
                <td style="padding-left:5px;border-right: 0px; border-left: 0px; border-bottom:0px ; text-align: right">                                   
                    <p>21%</p>                           
                </td>            
                <td style="padding-left:5px;border-right: 0px; border-left: 0px; border-bottom:0px ; text-align: right">                                   
                    <p>{suma_bez_dph}</p>
                </td>            
                <td style="padding-left:5px;border-right: 0px; border-left: 0px; border-bottom:0px ; text-align: right">                                   
                    <p>{suma_dph}</p>
                </td>            
                <td style="padding-left:5px;border-right: 0px; border-left: 0px; border-bottom:0px ; text-align: right">                                   
                    <p>{suma_s_dph}</p>         
                </td>            
            </tr>             
            <tr>            
                <td style="padding-left:5px;border: 1px solid white; text-align: right">                                   
                    <p>15%</p>                           
                </td>            
                <td style="padding-left:5px;border: 1px solid white; text-align: right">                                   
                    <p>{suma_bez_dph}</p>
                </td>            
                <td style="padding-left:5px;border: 1px solid white; text-align: right">                                   
                    <p>{suma_dph}</p>
                </td>            
                <td style="padding-left:5px;border: 1px solid white; text-align: right">                                   
                    <p>{suma_s_dph}</p>         
                </td>                                   
            </tr>             
            <tr>            
                <td style="padding-left:5px;border: 1px solid white; text-align: right">                                   
                    <p>10%</p>                           
                </td>            
                <td style="padding-left:5px;border: 1px solid white; text-align: right">                                   
                    <p>{suma_bez_dph}</p>
                </td>            
                <td style="padding-left:5px;border: 1px solid white; text-align: right">                                   
                    <p>{suma_dph}</p>
                </td>            
                <td style="padding-left:5px;border: 1px solid white; text-align: right">                                   
                    <p>{suma_s_dph}</p>         
                </td>         
            </tr>             
            <tr>            
                <td style="padding-left:5px;border: 1px solid white; text-align: right">                                   
                    <p>0%</p>                           
                </td>            
                <td style="padding-left:5px;border: 1px solid white; text-align: right">                                   
                    <p>{suma_bez_dph}</p>
                </td>            
                <td style="padding-left:5px;border: 1px solid white; text-align: right">                                   
                    <p>{suma_dph}</p>
                </td>            
                <td style="padding-left:5px;border: 1px solid white; text-align: right">                                   
                    <p>{suma_s_dph}</p>         
                </td>          
            </tr> 
            <tr >            
                <td style="padding-left:5px; border-right: 0px; border-left: 0px; border-bottom:0px ;text-align: right">                                   
                    <p>CELKEM</p>                           
                </td>            
                <td style="padding-left:5px; border-right: 0px; border-left: 0px; border-bottom:0px ;text-align: right">                                   
                    <p>{suma_bez_dph_celkovo}</p>
                </td>            
                <td style="padding-left:5px;border-right: 0px; border-left: 0px; border-bottom:0px ; text-align: right">                                   
                    <p>{suma_dph_celkovo}</p>
                </td>            
                <td style="padding-left:5px;border-right: 0px; border-left: 0px; border-bottom:0px ; text-align: right">                                   
                    <p>{suma_s_dph_celkovo}</p>         
                </td>          
            </tr> 
            
            
            
                                         
        </table>    
        
        
        <div id="miesto_na_podpis">
                  <p>asdasdads
                </p>        
        <p>asdasdads
        </p>        
        <p>asdasdads
        </p> 
        
       </div>
            
       </div>       
    </div>          
</body>
</html>

 


This is the result HTML (it's quite good).

HTML template seems right, but result of PDF file is not accepted.

TomasG_4-1610995446081.png

PDF invoice template
I dont know why text tags positions are not the same as in HTML template.

TomasG_5-1610995587383.png

 

 

 

 

 

 

 

 

 

 

 

 

 



  

2 REPLIES 2
v-litu-msft
Community Support
Community Support

Hi @TomasG,

 

You could consider using the Encodian connector to convert the HTML table to PDF file, please refer to this post with a similar requirement:

Solved: PDF format issue -onedrive pdf converter - Power Platform Community (microsoft.com)

 

Best Regards,
Community Support Team _ Lin Tu
If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.

 

Hi, @v-litu-msft , 

thanks for advice. I know about Encodian or Plumsail, but I am looking something for free, if it's possible. 
But there is vote ticket for this problem and three years old and without changes, so we will see.  

Helpful resources

Announcements
October Events

Mark Your Calendars

So many events happening this month - don't miss out!

 WHAT’S NEXT AT MICROSOFT IGNITE 2022

WHAT’S NEXT AT MICROSOFT IGNITE 2022

Explore the latest innovations, learn from product experts and partners, level up your skillset, and create connections from around the world.

Register for a Free Workshop.png

Register for a Free Workshop

Learn to digitize and optimize business processes and connect all your applications to share data in real time.

Users online (3,544)