3

When the user try to print the web page, i want to hide all the extra details the browser is adding to the printed page, but still show only the page number.

Like so: enter image description here

I manage to hide all of them with this CSS code:

@page{
    size: A4;
    margin: 8mm;
}

Or only the top 2, with this CSS code:

@page{
        size: A4;
        margin: 8mm 8mm 9mm;
}

But it's not accomplished my goal, to hide the url structure when printing the page.

Elad
  • 2,087
  • 1
  • 16
  • 30

2 Answers2

2

By design, you can't touch the browser print dialog.

When you use the @page{ margin: 8mm} you make the default page margin smaller, and all the extra details are gone because they have no place to be.

Because both the page number and the page url are in the bottom of the page- you can't show or hide only one of them, but,you can change the page URL before the print dialog is shown, and change it back when the print is over, so the printed page won't reveal URL structure.

//custom function to fire when print dialog is closed
function afterPrintOver (){
    console.log('Print is over.');
    //remove our empty state
    window.history.back();
}

//detect when the user is click `Ctrl + P` to print
document.addEventListener('keydown', function(e){
    const PKeyCode = 80;
    if( e.ctrlKey && e.keyCode === PKeyCode ){
        //stop the browser from open the print dialog
        event.preventDefault();

        //add an empty state, the url now will be www.yourDomainName.com/#/print
        window.history.pushState('', '', '#/print');

        //call our afterPrintOver function, and 'pass' the result of `window.print()`*
        afterPrintOver(window.print());
});

This is whats happen:

  1. The user press CTRL + P
  2. We add an empty state to the history with custom relative url
  3. The browser's print dialog show the custom url
  4. The print is over (or, the user close the print dialog)
  5. We remove the empty state, that will change the url back to the correct url

*The trick is that our afterPrintOver function won't be fire until the window.print() function will over and return undefined, which means, the print process is over.

Elad
  • 2,087
  • 1
  • 16
  • 30
  • 1
    What if someone uses the mouse to print or is using a keyboard with a "print" key? – Benjamin Gruenbaum Jul 10 '18 at 12:26
  • A more sustainable approach might be to instruct users to untick the headers/footers in their settings: https://kb.whitman.edu/display/public/KB/How+to+Turn+off+Headers+and+Footers+when+Printing+from+a+webpage+or+Whitmail there is no way to reliably control this across browsers anyway. – Benjamin Gruenbaum Jul 10 '18 at 12:28
  • @Elad Nice hack but unfortunately it is not working now in chrome Version 90.0.4430.212 (Official Build) (64-bit) . I am stuck at same problem like yours . I want to print page numbers but I do not want other details like URL , Title and Date – PalakM May 26 '21 at 07:06
-3
@page{
        size: A4;
        margin: 8mm 15mm 0mm 8mm;
    }
sai kiran
  • 11
  • 1