Very basic file printing?

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
skylark2
Forum Commoner
Posts: 32
Joined: Wed Jun 16, 2010 6:00 am

Very basic file printing?

Post by skylark2 »

I'm currently porting a project from Windows to a web application. One of the things it does is to open and display some plain text files, and there's a "Print" button which simply dumps the contents of the file to the printer.

Can I do this? Everything I've found talks about printing the whole web page, maybe removing a few elements, but what I want is much more basic that that. I'm not interested in printing any of the html at all, and I'd prefer not to go via a "printer friendly" version for the user to deal with if possible.

I'm not worried about it bringing up whatever the standard print dialogs are on their system, in fact I'm highly delighted about it :)

The file contents are displayed in a textarea which has scrollbars at this point. I need to print the whole file contents, not just the visible area. I tried with a css file which only prints the textarea, and it almost works, but I only get the bit of the file which was visible on screen.

I also tried onclick="displayfile.rows=500;window.print();displayfile.rows=20;return false;" but it didn't help. I still just get the 20 rows on the printout.

Any suggestions?

(edit: displayfile is the id of the textarea).
Reviresco
Forum Contributor
Posts: 172
Joined: Tue Feb 19, 2008 4:18 pm
Location: Milwaukee

Re: Very basic file printing?

Post by Reviresco »

Sounds like you want to make a print style sheet:

Code: Select all

<link rel="stylesheet" type="text/css" media="print" href="css/print.css" />
Put your text in a div, and in the print style sheet, hide everything else (set all the other divs and such to "display: none") except for the div with the text.
skylark2
Forum Commoner
Posts: 32
Joined: Wed Jun 16, 2010 6:00 am

Re: Very basic file printing?

Post by skylark2 »

So the text's effectively in there twice, and then I flip which one's visible using the stylesheets? That sounds like it would work. Thanks - I'll have a play with it.

I have a print stylesheet which hides everything else already, but I hadn't thought of having all the text there but hidden in the non-print one.
Reviresco
Forum Contributor
Posts: 172
Joined: Tue Feb 19, 2008 4:18 pm
Location: Milwaukee

Re: Very basic file printing?

Post by Reviresco »

Well it sounds like the textarea (a form input) isn't printing properly, so yes, I guess you might need the text in there twice.
skylark2
Forum Commoner
Posts: 32
Joined: Wed Jun 16, 2010 6:00 am

Re: Very basic file printing?

Post by skylark2 »

Aaargh! I can almost make it work, but not quite...

I did what was suggested, but I was using visibility:hidden (because that's what I had already, not because I'm perverse). I see the correct things on both screen and printer, except that on each there's loads of blank space where the hidden div was. This makes sense to me but I'd like to get rid of the blank space.

So I tried replacing visibility:visible with display:all and visibility: hidden with display:none.

This works beautifully on the screen but I get nothing at all on the printout (I mean, I get a printout, it just has no text on it.)

This is the new bit of my "ordinary" css file:

Code: Select all

.print {display:none;}
.noprint {display:all;}
and this is the entirety of my "print" css file:

Code: Select all

body {visibility:hidden;}
.noprint {display:none;} 
.print {display:all;} 
Any ideas? The setting for my "ordinary" css file is "media=all" - do I have to change that? But I can't quite see why the rules for visibility and display seem to be different.

Sorry, this seems to have turned into a css question...
skylark2
Forum Commoner
Posts: 32
Joined: Wed Jun 16, 2010 6:00 am

Re: Very basic file printing?

Post by skylark2 »

Replying to myself...

display:all is nonsense.

display:inherit ever so almost works - I get everything I want except that the text's on the second page with a blank first page.

Might be a pdf driver issue. Still playing.
Reviresco
Forum Contributor
Posts: 172
Joined: Tue Feb 19, 2008 4:18 pm
Location: Milwaukee

Re: Very basic file printing?

Post by Reviresco »

Visibility:none still allows the element to take up space (it still exists on the page), but it just hides the content. Display:none makes the element "disappear" -- it's no longer shown on the page and doesn't take up any space.

For block elements (div, p, etc.) use display:block, and for inline elements like span, use display:inline.

So that you don't have to go through each element and change its display between none and block (or inline for inline elements), try to put them in a container div or divs, and you can change the display of just the container div(s). Give them all the same class name.

So your regular stylesheet would have something like this: (also - no need to set a "media" on this one)

Code: Select all

div.stuff_besides_the_text {
display:block;
}
div#the_text_div {
display:none;
}
Your print stylesheet is just the opposite:

Code: Select all

div.stuff_besides_the_text {
display:none;
}
div#the_text_div {
display:block;
}
Last edited by Reviresco on Wed Mar 23, 2011 3:33 pm, edited 1 time in total.
skylark2
Forum Commoner
Posts: 32
Joined: Wed Jun 16, 2010 6:00 am

Re: Very basic file printing?

Post by skylark2 »

Many thanks! I think I'm finally starting to get my head round this webdevelopment stuff properly (as opposed to just copying bits).

This really is a very helpful forum.
Post Reply