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

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
MPA_User Group Leader_768x460.jpg

Manage your user group events

Check out the News & Announcements to learn more.

V3_PVA CAmpaign Carousel.png

Community Challenge - Giveaways!

Participate in the Power Virtual Agents Community Challenge

Carousel 2021 Release Wave 2 Plan 768x460.jpg

2021 Release Wave 2 Plan

Power Platform release plan for the 2021 release wave 2 describes all new features releasing from October 2021 through March 2022.

Top Solution Authors
Users online (3,575)