Member Avatar for ankit.pandey3

Hi friends..............
I have a page in which all details of user displays. I want that when user click on button"Print ICard" then ICard is printed and this printed Icard have size of what I desire instead of full page and I also need "Thank You" message on print out which is not displayed in web page....
I don't have much knowledge of css and php. So, please give the full code of it.............
Plzzzzzzzzz help............
Anyone????????????
thanks in advance......................

Plzzzzzzzzzzzz

  • 2 Contributors
  • 2 Replies
  • 653 Views
  • 6 Hours Discussion Span
  • Latest Post Latest Post by ankit.pandey3

Dani AI

Generated

As asked, you want to print only the ID card area at a specific physical size and show a "Thank You" line that does not appear on the normal page. is right that window.print() starts printing, but to get a trimmed card and print-only text you should either (A) use a print stylesheet that hides everything except the card, or (B) assemble a small print-only document (new window or popup) containing just the card plus a print-only message, then call print() on that document. Both approaches are shown below.

A compact print CSS you can add to your page (screen hides the thank-you, print shows only the #icard area and the thank-you):

@page { size: 85mm 55mm; margin: 0; } /* adjust to desired card size */

#icard { width:85mm; height:55mm; box-sizing:border-box; padding:6mm; }

.thankyou { display: none; }

@media print {
  body * { visibility: hidden; }          /* hide everything */
  #icard, #icard * { visibility: visible; }/* show card content */
  #icard { position: absolute; left: 0; top: 0; }
  .thankyou { display: block; text-align:center; margin-top:6mm; }
}

If you prefer a JS approach that prints only the card and appends a print-only thank-you, use this pattern (does not alter the current page):

function printICard() {
  var el = document.getElementById('icard');
  var css = '<style>@page{size:85mm 55mm;margin:0;}body{margin:0;font-family:Arial;} .thankyou{display:block;text-align:center;margin-top:6mm;}</style>';
  var w = window.open('', '_blank', 'noopener');
  w.document.write('<!doctype html><html><head><meta charset="utf-8"><title>Print</title>' + css + '</head><body>' + el.outerHTML + '<div class="thankyou">Thank You</div></body></html>');
  w.document.close();
  w.focus();
  w.print();
  w.close();
}

Notes and troubleshooting: browser print headers/footers and default margins are controlled by the print dialog and cannot be removed by page CSS — instruct users to set margins to "None" and disable headers/footers, and use scale 100% in print preview. Exact edge-to-edge printing depends on the printer (most have unprintable margins); if exact dimensions are critical, print to PDF first and verify or use a printer that supports borderless output.

Recommended Answers

All 2 Replies

Member Avatar for vibhaJ

Check this page, if it helps you.
If you dont want to show button on print then call printpage function on body tag onload.

<html>

<head>
 <title>New Page 1</title>
<script language="javascript">
 function printpage()
  {
   window.print();
  }
</script>
</head>

<body>

<form>
 <input type="button" value="Print" onclick="printpage();">
</form>
</body>

</html>
Member Avatar for ankit.pandey3

hi frd.........
But this code prints the full screen with button "Print" which is not desirable.I only want to print the output without any URL and buttons.
Have any idea? plz.........

Check this page, if it helps you.
If you dont want to show button on print then call printpage function on body tag onload.

<html>

<head>
 <title>New Page 1</title>
<script language="javascript">
 function printpage()
  {
   window.print();
  }
</script>
</head>

<body>

<form>
 <input type="button" value="Print" onclick="printpage();">
</form>
</body>

</html>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.