onbeforeprint and print dialog

Discuss how to use and promote Web standards with the Mozilla Gecko engine.
Post Reply
maurot
Posts: 2
Joined: February 15th, 2024, 2:01 am

onbeforeprint and print dialog

Post by maurot »

Hi everyone, I have a problem with Firefox. I would like, upon printing a page (via menu or ctrl-P), to ask if images are to be printed and, if the answer is 'no', then a style will be added to those elements that have to be hidden (and subsequently, after the print, restored -- the relative code is not given).
I can't get the following code to work because the onbeforeprint event, and the confirmation dialog that is displayed, do not block the print dialog from appearing. In fact, the confirmation dialog appears behind the print dialog.
I've tried 'nulling' window.print(), but to no avail. Same failure preventing default event on beforePrint().
Anyone have any suggestions?
Thank you

this does not work: confirmation appears behind the print dialog or, rather, the print dialog appears regardless of what happens inside onbeforeprint

Code: Select all

window.onbeforeprint = function(e){
  e.preventDefault();

  if(!confirm("Do you want to print with images?")){
      document.querySelectorAll('img')
        .forEach(elem => elem.style += '; display:none !important;');
    }
};
this does not work either, the print dialog continues to be displayed regardless of what happens inside onbeforeprint

Code: Select all

var oldWindowPrint = window.print;
window.print = function(){};

var beforePrint = function(){
  if(!confirm("Do you want to print with images?")){
      document.querySelectorAll('img')
        .forEach(elem => elem.style += '; display:none !important;');
    }

  window.onbeforeprint = null;
  oldWindowPrint();
  window.onbeforeprint = beforePrint;
};

window.onbeforeprint = beforePrint;
morat
Posts: 6432
Joined: February 3rd, 2009, 6:29 pm

Re: onbeforeprint and print dialog

Post by morat »

You can disable the print dialog by setting the print.always_print_silent pref to true.

Maybe you can use a print addon as an alternative.

Printable The Print Doctor
http://addons.mozilla.org/firefox/addon/1018254
http://www.jeffersonscher.com/ext/printable.html
maurot
Posts: 2
Joined: February 15th, 2024, 2:01 am

Re: onbeforeprint and print dialog

Post by maurot »

I don't want to completely disable the printer, I would just like to give those viewing the page the opportunity to choose whether or not to print the images too (because I have a page with several images and text).
Furthermore, it seems strange to me that it doesn't work in Firefox, while it does in Chromium
morat
Posts: 6432
Joined: February 3rd, 2009, 6:29 pm

Re: onbeforeprint and print dialog

Post by morat »

You can create a custom print button on your page.

How to add a print button
http://www.thoughtco.com/how-to-add-a-p ... on-4072006

CSS media queries - Printing
http://developer.mozilla.org/docs/Web/C ... s/Printing

You can create a bug.

Bug Writing Guidelines
http://bugzilla.mozilla.org/page.cgi?id ... iting.html
elias21
Posts: 1
Joined: March 1st, 2024, 4:13 am
Contact:

Re: onbeforeprint and print dialog

Post by elias21 »

Handling the print dialog flow in browsers like Firefox with custom logic, such as prompting the user with a choice to print images, is challenging due to how the print process is managed by the browser. The print dialog is system-level, and JavaScript execution, including confirm dialogs, does not halt its appearance. Here's a workaround strategy that might achieve your goal using a custom print button instead of relying on the default Ctrl+P or menu print action:

1. Custom Print Button
Create a custom print button in your HTML that users can click to initiate the print process. This gives you control over the print initiation sequence.

Code: Select all

<button id="customPrintButton">Print Page</button>
2. JavaScript Logic
Implement the logic to ask the user if they want to print images. If they choose 'No', apply a CSS class to hide images, then trigger the print dialog. After printing, you can revert the changes.

Code: Select all

document.getElementById('customPrintButton').addEventListener('click', function() {
  const printImages = confirm("Do you want to print images?");
  
  if (!printImages) {
    document.querySelectorAll('img').forEach(elem => {
      elem.classList.add('no-print');
    });
  }

  // Trigger the print process
  window.print();

  // Optional: listen to the afterprint event to revert changes
  window.onafterprint = () => {
    document.querySelectorAll('img').forEach(elem => {
      elem.classList.remove('no-print');
    });
  };
});
3. CSS for Hiding Images
Define a CSS class that hides images, and ensure it only applies when printing. This can be done using a media query for print.

Code: Select all

@media print {
  .no-print {
    display: none !important;
  }
}
Best regards, Cyfrania Services
Post Reply