remove url and print text from the printed page

Question

I have developed a web application and in my web page there are some data displays with common headers, footers , menus and other images. so I have added a small button as

Answer 1

The header with the URL (and sometimes the page title, page number etc.) is automatically added by the web browser. Basically the settings can only be changed by the user. This topic is discussed in details in that question

For the button itself, you could hide it using specific print CSS as discussed in that question. And as MMacdonald said, you can use this technique for other elements as well so that you don't need to re-render your page. But then you would lose the preview feature (the user could still use the browser's print preview feature).

Answer 2

This worked for me with about 1cm margin

@page 
{
    size:  auto;   /* auto is the initial value */
    margin: 0mm;  /* this affects the margin in the printer settings */
}
html
{
    background-color: #FFFFFF; 
    margin: 0mm;  /* this affects the margin on the html before sending to printer */
}
body
{
    padding:30px; /* margin you want for the content */
}

Answer 3

Consider using media-dependent style sheets instead of making a bespoke "print page" solution.

Answer 4

If you're using bootstrap, find following code:

 @media print {
  ...
  a[href]:after {
    content: " (" attr(href) ")";
  }
  ...
}

Overriding the style with content:none handles the situation fine.

Reference: this url