Printing Problem

#1 · November 20, 2024, 2:43 am

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.

#2 · November 20, 2024, 6:50 pm

@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:

notweb has reacted to this post.

#3 · December 11, 2024, 12:38 pm

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?

#4 · December 12, 2024, 2:15 pm

@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.

Printing Problem - Forum

Printing Problem

Solution Using CSS

Solution in JavaScript

Solution Using CSS

Solution in JavaScript