Printing Problem - Forum

Forum Navigation
You need to log in to create posts and topics.

Printing Problem

Hello friends
When I want to send a container containing a photo and a few lines of text to the printer with the print command, the print preview looks like this:

It separates the photo on one page and shows the text on another separate page. What should I do?

My Code1:

BeginJS
  var printContents = $('#Container8').html();
  w = window.open();
  w.document.write(printContents);
  w.document.close();
  w.focus();
  w.print();
  w.close();
EndJS

My Code2:

neoPrintContainer "Container8"

 

Uploaded files:
  • You need to login to have access to uploads.

@notweb To address the issue where the photo and text in your container appear on separate pages when printed, this likely happens because the content in the container isn't being styled in a way that prevents page breaks. Both JavaScript and CSS can help ensure the photo and text remain together on the same page during printing.

Solution Using CSS

Apply the following CSS to prevent the content from breaking across pages:

#Container8 {
page-break-inside: avoid;
}
img {
  display: block;
  max-width: 100%;
}

This CSS ensures that the container (#Container8) won't be split across pages and keeps its content together.

Solution in JavaScript

If you are dynamically creating or modifying the container's content before printing, ensure that the generated HTML is complete and styled properly.

Here's an updated version of your Code1 with CSS injection and prinpting using plain JavaScript:

BeginJS
  var printContents = $('#Container8').html();
  var style = `<style>
#Container8 { page-break-inside: avoid; }
img { display: block; max-width: 100%; }
</style>`;
  var w = window.open();
  w.document.write(style + printContents);
  w.document.close();
  w.focus();
  w.print();
  w.close();
EndJS

 

notweb has reacted to this post.
notweb

Thanks It's Done!

Is it possible to display the text in rtl and with a specific font?
Another problem is that the first page is blank in print. Is there a way to make the first page, which is blank, not appear in print preview?

@notweb try this:

BeginJS
  var printContents = $('#Container8').html();
  var style = `<style>
    @media print {
      @page {
        margin: 0;
      }
      body {
        margin: 0;
      }
    }
    #Container8 {
      page-break-inside: avoid;
      direction: rtl;
      font-family: "YourDesiredFont", sans-serif;
    }
    img {
      display: block;
      max-width: 100%;
    }
  </style>`;
  var w = window.open();
  w.document.write(style + printContents);
  w.document.close();
  w.focus();
  w.print();
  w.close();
EndJS

Replace "YourDesiredFont" with the actual font name you want to use, e.g., "Arial", "Tahoma", or any font available in your environment.

javadrajabihakami has reacted to this post.
javadrajabihakami
Open chat
1
Do you need more info?
Hi, do you have any doubt?