Image shifts to the right when export the page to pdf

A

asifakhtar

Joined
Oct 24, 2013
Messages
47
Reaction score
0
I have a page that displays an image followed by a table. The image shifts to the right when exporting the page to pdf. Moreover, I want to make the column headers and text font smaller.

I have included the function that triggers the export. BTW I am using SAAS system.
HTML: 
<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Applicants By Country</title>
      <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" />
      @STYLELINK@
      <style>
         /* Change this value to 700px for Portrait Printing or 950px for landscape */
         .reportwrapper table {width:95%;}
         .reportwrapper TH.Sub a {
         font-size: 12px;
         color: #333333;
         text-decoration: none;
         }
         .reportwrapper .Data1, .reportwrapper .Data2 {
         font-size: 11px;
         padding: 6px 5px;
         border-bottom: 1px solid #f5f4f3;
         }
      </style>
   </head>
   <body class="reportwrapper">
      <div class="option_bar_in report" style="pd4ml-display:none">
         <table width="95%" border="0" cellspacing="0" cellpadding="0" align="center" style="border-collapse:collapse;">
            <tr>
               <td>
                  <div style="pd4ml-display:none"><button type="submit" class="ButtonSm" onClick="pdfwrite();"><i class="fa fa-file-pdf-o" aria-hidden="true"></i>Create PDF</button>
                     @fileexportbutton@
                     @navbar@
                  </div>
               </td>
            </tr>
         </table>
      </div>
      <!--Switch Page Orientation for your printing requirements-->
      <!--Use Landscape-->
      <!--Use TTF-->
      <!--filename='The Book - Applicants By Country'-->
      <!--START: Header and Footer when converted to PDF-->
      <pd4ml:page.header>
         <div class="reportheader">
            <div id="header_container_in">
               <div id="header_container_in">
                  <div class="header_container_left" style="margin-left: 50px;">
                      <a href="javascript:void();">
                         <img class="header_logo" style="margin-bottom: 20px !important;" id="header_logo_lg" src="/resources/1439748_462012121a8e9d32/lg_ClaraAbbott_Logo_black_RGB_F_final.jpg" alt="Clara Abbott Foundation Logo" valign="top" border="0" align="left">                           
                     </a>                         
                  </div>
            <table width="95%" border="0" cellspacing="0" cellpadding="0" align="center">
               <tr>
                  <td>
                     <h1>Applicants By Country</h1>
                     <h3>@currentdate@</h3>
         </div>
         </div>
         </td>
         </tr>
         </table>
         </div>
      </pd4ml:page.header>
      <pd4ml:page.footer>
         <div style="pd4ml-display:block;display:none; margin-bottom:20px; margin-top:10px;">
            <table width="95%" border="0" cellspacing="0" cellpadding="0" align="center">
               <tr>
                  <td style="text-align:left" class="reportfooter"></td>
                  <td style="text-align:right" class="reportfooter">page $[page] of $[total]</td>
               </tr>
            </table>
         </div>
      </pd4ml:page.footer>
      <!--END Header and Footer for PDF-->
      <pd4ml>
         <table width="95%" border="0" cellspacing="0" cellpadding="0" align="center" style="border-collapse:collapse;">
            @header@
            @rows@
         </table>
         <table width="95%" border="0" cellspacing="0" cellpadding="0" align="center" style="border-collapse:collapse; margin-top:30px; pd4ml-display: none;">
            <tr>
               <td class="reportfooter"></td>
            </tr>
         </table>
      </pd4ml>
   </body>
</html>

JavaScript: 
//Code that triggers when I click on the export button
function pdfwrite(){
    var frm = document.forms[0];
    var data = $(frm).serializeArray();
    $(data).each(function (i, item) {
        if (item.name === 'curpagesize') {
            item.value = "0";
        }
    });
    var request = $.ajax({
        url: $(frm).attr('action'),
        type: 'GET',
        data: $.param(data),
    });
    request.done(function (txt) {
        var new_win = window.open('','new_win', 'menubar=no,scrollbars=yes,width=800,height=800,status=no,resizable=yes,dependent=yes,alwaysRaised=yes');
        new_win.opener = window;
        new_win.focus();
        var form = document.createElement("form");
        var textelement = document.createElement("textarea");
        textelement.type = "text";
        textelement.name = "txt";
        textelement.value = txt;
        form.appendChild(textelement);
        form.style.display = "none";
        form.action = "/pdfWriter";
        form.method = "POST";
        form.target = "new_win";
        form.name = "pdfwriteform";
        document.body.appendChild(form);
        submitToDocGen(form, "/pdfWriter", "new_win", function() {document.body.removeChild(document.forms["pdfwriteform"]);});
    });
}
 

Attachments

  • Untitled123.png
    Untitled123.png
    84.2 KB · Views: 14
Phro0244

Phro0244

Joined
Mar 31, 2023
Messages
95
Reaction score
8
To fix the image shifting to the right in your exported PDF, you need to make sure that the image and the table are aligned properly within the HTML page. You can achieve this by placing them both in a container and then applying styles to that container to control the layout. You can also try adjusting the width of the container to ensure that the image and the table are displayed correctly.

To make the font size of your column headers and text smaller, you can add CSS styles to your page. You can create a class that targets your table headers and text and then set the font-size property to the desired value.

Here is an example of how you can modify your HTML and CSS to fix the image alignment issue and reduce the font size:

HTML:

cssCopy code
<div class="content">
<img src="your-image.jpg">
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
</tr>
</tbody>
</table>
</div>

CSS:

cssCopy code
.content {
display: flex;
align-items: center;
justify-content: center;
}

.content img {
width: 50%;
margin-right: 20px;
}

.content table {
width: 50%;
}

.content th,
.content td {
font-size: 12px;
}

In this example, we use a container with a class of "content" to wrap both the image and the table. We then use the "display: flex" property to center both elements horizontally and vertically within the container.

We set the width of the image and the table to 50% of the container width to ensure that they are displayed side by side. We also add a margin to the right of the image to create some space between the image and the table.

Finally, we set the font size of the table headers and text to 12px using the ".content th" and ".content td" selectors. You can adjust this value to suit your needs.

Once you have made these changes, you should be able to export your page to PDF without any alignment issues and with smaller font sizes for your table headers and text.
 
A

asifakhtar

Joined
Oct 24, 2013
Messages
47
Reaction score
0
Phro0244 said:
To fix the image shifting to the right in your exported PDF, you need to make sure that the image and the table are aligned properly within the HTML page. You can achieve this by placing them both in a container and then applying styles to that container to control the layout. You can also try adjusting the width of the container to ensure that the image and the table are displayed correctly.

To make the font size of your column headers and text smaller, you can add CSS styles to your page. You can create a class that targets your table headers and text and then set the font-size property to the desired value.

Here is an example of how you can modify your HTML and CSS to fix the image alignment issue and reduce the font size:

HTML:

cssCopy code
<div class="content">
<img src="your-image.jpg">
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
</tr>
</tbody>
</table>
</div>

CSS:

cssCopy code
.content {
display: flex;
align-items: center;
justify-content: center;
}

.content img {
width: 50%;
margin-right: 20px;
}

.content table {
width: 50%;
}

.content th,
.content td {
font-size: 12px;
}

In this example, we use a container with a class of "content" to wrap both the image and the table. We then use the "display: flex" property to center both elements horizontally and vertically within the container.

We set the width of the image and the table to 50% of the container width to ensure that they are displayed side by side. We also add a margin to the right of the image to create some space between the image and the table.

Finally, we set the font size of the table headers and text to 12px using the ".content th" and ".content td" selectors. You can adjust this value to suit your needs.

Once you have made these changes, you should be able to export your page to PDF without any alignment issues and with smaller font sizes for your table headers and text.
Click to expand...
Txs for the suggestion. Appreciated.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Help with Visual Lightbox: Scripts 2
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button> 1
How to have two html audio players on one page? 0
Nested Loop Insert Page Break 1
I am trying to detect Which image id="" was clicked ? 22
How can I calculate the last payment of the year to be the sum of all previous payments for that year and subtracting it from Research Costs value? 7
Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one? 0
SendGrid email issue in responsive Gmail 1

Members online

No members online now.
Total: 191 (members: 0, guests: 191)
Robots: 133

Forum statistics

Threads
473,931
Messages
2,570,085
Members
46,536
Latest member
keelop

Latest Threads

Top