How to remove the URL from the printing page?

html

responsive-design

css

print-preview

byNikita Barsukov·Dec 22, 2024

To prevent the URL from showing up on printed pages, all you need is a pinch of CSS magic. This snippet focuses on print actions and uses the print media query to its advantage:

@media print {
  /* URLs leaving the chat */
  a[href]:after { content: ''; }
  /* Margin, we're enjoying the zero life now */
  @page { margin: 0; }
}

With this, you can stop hyperlinks from appending the URL at the end. You might want to wave goodbye to margins in your printable area, typically home to headers and footers.

Under the Hood: Print Mechanics and Strategies

Taming browser print settings for Chrome, Firefox, IE

Different browsers, different strokes. Each has unique print settings that you can tailor:

For Chrome and Edge, use the system print dialog brought up by Ctrl+Shift+P, and choose to live a no header/footer life.
Firefox users can adjust in Page Setup > Margins & Header/Footer.
Internet Explorer has similar pull strings under Print > Page Setup.

POST it, don't show it

POST methods are like covert agents of form submissions. Instead of flapping around sensitive data in the URL like GET requests do, POST methods keep it under wraps, ensuring it doesn't show up during page prints.

The auto-size advantage for diverse page sizes

Assuring your content fits snugly on the printed page is as simple as:

@media print {
  /* Size does matter, and now it auto adjusts */
  @page { size: auto; }
}

This setting lets your content adapt dynamically, almost like yoga but for printable documents.

A more robust CSS approach

While we've kicked out URLs, you might want to consider showing the door to other unprintable elements:

@media print {
  /* Printer: "Hey, we're out of Magenta." Web page: "No worries, I'm all black and white now." */
  body {
    color: black;
    background: white;
  }
  /* Who prints images and videos anyway? */
  img, video {
    display: none;
  }
  /* Sayonara, .ads and .navigation, .footer! */
  .navigation, .footer, .ads {
    display: none;
  }
}

Print preview in control

See the changes before you print, saving you those 'Wait! I wasn't ready yet!' moments:

/* Jedi mind trick for browser: "This is not the content you're looking for" */
window.onbeforeprint = function() {
  // Dynamic adjustments before printing
};
/* "Sorry for the mess, let's get you back to normal." */
window.onafterprint = function() {
  // Revert to general settings after printing
};