8

I have a website I am currently developing and the client has a very unique request. They would like the user to be able to hit a button and print the contents of the browser window. I wanted to know if anyone has implemented similar functionality or knows any strategy to develop something like this as I do not have the first clue.

Example: I have 30 images on a page but only 4 fit in the viewable area or browser window. I would like to only print the exact content of the browser window / or elements that are viewable area.

Thanks in advance,

JN

jeffreynolte
  • 3,654
  • 11
  • 36
  • 63
  • Print buttons are pretty common and using CSS media types, e.g. print and screen you can style your printed content to look completely different to how it is on-screen if you want to. But I feel that there may be some missing information or a slight lack of detail to the question? – Ryan Jul 29 '11 at 17:33
  • interesting question, probably quite tricky with plain old javascript, are you using a library like jQuery ? – Patricia Jul 29 '11 at 17:42
  • 1
    OK... now that makes a lot more sense but cannot think of any viable options sorry mate – Ryan Jul 29 '11 at 17:42
  • 1
    @jnolte - how about Ctrl++, Ctrl+- adjustments? Does your client want that as well? :) – Igor Turman Jul 29 '11 at 18:21
  • 1
    I would rather build Print-friendly page with some options/layouts (e.g. 2/4/6/8 pics per page) and give that option to the user – Igor Turman Jul 29 '11 at 18:23
  • @Igor - the example I used was a simple version just for the purpose of thie question. It is actually a bit more complex than that. I am hoping there is some sort of solution out there. – jeffreynolte Jul 29 '11 at 19:41
  • 1
    Understood. I just think browsers are not capable of doing that (yet)... – Igor Turman Jul 29 '11 at 19:51
  • I thought about this a little and am wondering if you can write a server-side script that takes the browser window size along with all of the data being viewed, generates the content, effectively takes a screen shot of the content and makes the image available for download/print? Not a perfect scenario but this would be the closest viable solution I can think of at the moment – Ryan Aug 03 '11 at 13:28

6 Answers6

1

This method requires jQuery, but might be able to be rewritten in plain javascript.

With a bookmarklet app of mine I found that the popup window was the most reliable way to print dynamic content and allowed the user to see the content before printing it. I also found that reducing the font size allowed fitting all the content on the page while sill be readable. You might try shrinking the images as well if that is an option. I had tried targeting media types with CSS and some jQuery print plugins but found them unreliable at best.

Here's the function I use to pass a jQuery object to be printed. I maximized the window on open and changed the title/font size. If you have more than images you'll need to clone your CSS as well, mine just happened to be stored in a variable from the bookmarklet loading. 

function printElement(oElement) {

    var oPopupWindow = window.open('', 'newwin', 'width=500,height=500');
    oPopupWindow.moveTo(0,0);
    oPopupWindow.resizeTo(screen.availWidth,screen.availHeight);
    oPopupWindow.document.open();

    var sHTML = '<html><head><title>TBA Enhanced User Interace</title>' +
        _EUI.sCSS + '<style>img {display:none!important}table{font-size:8pt!important}</style></head><body>'
        + $('<div />').append(oElement.clone()).html() + '</body></html>';

    oPopupWindow.document.write(sHTML);
    oPopupWindow.document.close();
    oPopupWindow.print();
    oPopupWindow.close();

}

function isScrolledIntoView(elem)
{
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom));
}

function printVisibleImages() {

    var oImageElement = $('<div />');

    $('img').each(function() {

        if (isScrolledIntoView(this)) {
            oImageElement.append(this);
        }

    });

    printElement(oImageElement);
}

Using the isScrolledIntoView function from this question: Check if element is visible after scrolling, something like the code above might work with some tweaking. Call printVisibleImages(), you might need to add some CSS for padding or pass the style sheets from the main page.

Community
  • 1
  • 1
Jeff
  • 836
  • 8
  • 13
1

You could - in the same or a new window - wrap a DIV around all of the BODYs content and restrict the display area to currently visible . If there's a root-container-DIV for example...

<body>
    <div id="theWholeDocument">
      ... content
    </div>
</body>

... it can easily be done by jQuery:

$('#theWholeDocument').wrap( function() {
    // get coordinates and dimensions of visible area first
    // assing to var prLeft, prTop, prWidth, prHeight
    return '<div style="position:absolute;left:"+prLeft+"px; top:"+prTop+"px; width:"+prWidth+"px; height:"+prHeight+"px; overflow:hidden"/>');
}

Should result in a Document that shows nothing else than what has been visible before. Printout schould look the same, like a screenshot - with propably cropped images at the bottom.

HBublitz
  • 672
  • 4
  • 6
0

Make a jQuery function that loads a page on the click of a button via Ajax. (sending the page name as a post parameter). In that page, you do this:

$file = file_get_contents($_POST['file']);
echo $file;

and you style accordingly.

  • 1
    Wouldn't this still print the entire document rather than just the area that can be physically seen in the browser? – Ryan Jul 29 '11 at 17:46
  • Ahhhhhhhhhhhh. Yes. Very much so. Sorry 'bout that. –  Jul 29 '11 at 17:48
  • I almost printed something similar because I misunderstood it myself, you're not alone mate – Ryan Jul 29 '11 at 17:50
  • @Jan - I initially posted similar solution (for asp.net, though.) but then deleted it. I guess the key word in the question is "viewable" – Igor Turman Jul 29 '11 at 17:51
  • I'd want to see the correct answer for this question. And I recall reading about it some time earlier. –  Jul 29 '11 at 17:52
  • Same here. If there is one :) – Igor Turman Jul 29 '11 at 18:00
0

Maybe you can play around with Javascript (take a look at how to get window dimensions and scroll positions), but I don't realize how to print only that part of the document...

Maybe this can help you: snapshot from browser with flash or javascript

Community
  • 1
  • 1
xOneca
  • 764
  • 8
  • 20
0

I have 30 images on a page but only 4 fit in the viewable area or browser window.

I don't think you can say with certainty that the above works in all situations.

It is quite possible that many other browsers/resolutions will produce man different configurations, including some where the images are chopped off, etc.

The better solution, I think, is to offer X number of images per printed page and style accordingly.

Jason Gennaro
  • 32,917
  • 6
  • 59
  • 84
0

One of the web apps needed something similar to what you are asking for. It is an FAQ link which produced an FAQ page and the user wanted the ability to print it, if they so chose.

I did this by simply adding a button to the html:

<input type="button" value="Print" onClick='window.print();' />
<input type="button" value="Close" onClick='window.close();' />

Because I popped this into its own little browser window, I stripped off all the other controls from the parent page via:

function popFaq() {
  window.open('faq.html', '', 
    'left=10, top=10, width=550, height=700, resizable=1, ' +
    'location=0, personalbar=0, scrollbars=1, statusbar=0, toolbar=0, menubar=0');
}

... and ...

<div id='hLink'>
<a title='Click Here for (F)requently (A)sked (Q)uestions' href='' onclick='popFaq(); return false;'>FAQ</a>
</div>

Hope that helps!

Jim
  • 330
  • 1
  • 15