asked on

Printing a HTML page

Hello Experts,

I am sending a HTML-formatted invoice via e-mail, but my client keeps saying that it is being cut off at the right when printing, but at my end it is printed fine.
I know that each printer prints differently based on drivers, etc., but what is a safe bet?

FYI: I am using a table width of 720.

Thank you

Dave Baldwin

What email client is he using? Can you post a copy of the HTML invoice? How are you generating the invoice? What program and what email client are you using?

Glenn Abelson

Why not send a .pdf invoice?

ArchonMagnus

While these suggestions are more "client side", is it a possible to print in landscape mode? Or to suggest narrower margins?

leakim971

What about the default format of the page when printing ? Letter(US) ? A4(European) ? The same on both side ?

Blue Street Tech

The safest bet is to creat a PDF and send it as an attachment.

Bottomline is there are many reasons this could be happening depending on, as you mentioned printer drivers, browser used, print setup, how/where its being printed from, etc. That is why a PDF removes all these issues.

WhiteMage

I would suggest chagning the CSS for printed documents using the Media type.

http://www.w3schools.com/css/css_mediatypes.asp
http://webdesign.about.com/cs/css/a/aa042103a.htm

<style type="text/css">
  /*This CSS will only be applied when printing this document*/
  @media print {
    body.someDiv {
      margin-left:0;
      padding-left:0;
    }
  }

  /*This CSS will be applied no matter what (unless @media overthrows it...*/
  h1 {
    //...
  }
</style>

Open in new window

barney_parker

CSS media type would be my first choice.

As WhiteMage shows, it should be possible to fix the issues for printing while still allowing browser viewing to look good.

It is also the easiest to implement since you don't need to do muck to make it work, so no need to sort out printing to a pdf for example...

APD Toronto

ASKER

hmmm... interesting.
Actually, I have 2 things to print, one of whhich may require a pdf. Could anyone recommend a good easy-to-use Classic ASP PDF writer, perhaps where I can design my invoice in a program like Excel, save it as pdf, than use ASP to populate it. If this is not possible, then an easy way to design.
For my second printout, I was thinking of using css to print only a certain portion of my page (not all of it). Can anyone tell me how to apply the above css to do this, and maybe how to make certain columns/rows repeat on each page as headers?
Lastly, does width matter, I heard 600pixels is safe for portrait printing?

WhiteMage

I'd suggest looking into Java for ASP to Excel to PDF. If you actually need a PDF file, then go to that much trouble, but if you just need the PDF file for printing purposes, it seems like a waste of time and energy in my opinion.

To hide an element, in your CSS Media type you would use the attached code below. Then whatever you don't hide would be printed.

<style type="text/css">
  elementToHide,div.divToHide,#someOtherElement {
    display:none;
    margin:0;
    padding:0;
    visibility:none;
  }
</style>

Open in new window

WhiteMage

Oops...correction on code....wish you could edit comments...

<style type="text/css">
  @media print {
  elementToHide,div.divToHide,#someOtherElement {
    display:none;
    margin:0;
    padding:0;
    visibility:hidden;
  }
  }
</style>

Open in new window

APD Toronto

ASKER

Can I have a div arround what I need printed, then have an onClick event print the div only?

WhiteMage

Yes, definitely. After an onClick, you'd use DOM/Javascript to create a printable page (new window) just extracting those DIV's and then call window.print(). Almost every site has a link to a printable page, so this seems to be the standard.

APD Toronto

ASKER

can you give me an exampler please

WhiteMage

Well, I was wrong haha. I was thinking you could do this:

var w=window.open();
w.document.write('<html><head></head><body>');
w.document.write(document.getElementById('content').innerHTML);
w.document.write('</body></html>');
w.print();

It writes correctly, but after researching, Window.print() on pop-up windows does not work on all browsers (and didn't work on my), even though the content was written correctly. I even tried writing the Javascript to the new window (i.e., window.onload=window.print();) and then closing, etc., but it didn't work.

However, even if it did work, the code below using just CSS would still be easier and be more likely to work among all browsers.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <meta http-equiv="Content-Language" content="en-us" />
    <title>Index</title>

    <style type="text/css">
    <!--
      @media print {
        #header,#footer {
          display:none;
          margin:0;
          padding:0;
          visibility:hidden;
        }
      }
    -->
    </style>
  </head>

  <body>
    <div id="header">Header..tons and tons of stuff...</div>

    <div id="content">Content</div>

    <div id="footer">Footer...tons and tons of stuff...</div>
  </body>
</html>

Open in new window

APD Toronto

ASKER

seems good, but how would i write my onclick event?

ASKER CERTIFIED SOLUTION

WhiteMage

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Dave Baldwin

For what it's worth, I use Excel to make up my invoices and print to PDF for the one's that I email to a customer. That also let's me fax directly from Excel for some customer's that don't seem to check their email and print a hard copy when I need to take it with me and hand it to someone.