Quote from notweb on November 20, 2024, 2:43 amHello 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(); EndJSMy Code2:
neoPrintContainer "Container8"
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:
Quote from luishp on 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:
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 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.
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.
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
Quote from notweb on December 11, 2024, 12:38 pmThanks 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?
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?
Quote from luishp on 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(); EndJSReplace
"YourDesiredFont"
with the actual font name you want to use, e.g.,"Arial"
,"Tahoma"
, or any font available in your environment.
@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.