Geek Answers Handbook

Print visible contents of a browser window

I have a website that I am developing now, and the client has a very unique request. They would like the user to be able to click a button and print the contents of a browser window. I wanted to know if anyone had implemented similar functionality or knew any strategy for developing something like this, since I don't have the first clue.

Example. I have 30 images per page, but only 4 fit in the viewport or browser window. I would only like to print the exact contents of the browser window / or elements that are the visible area.

Thanks in advance,

Jn

+8
javascript html browser printing
source share
6 answers

This method requires jQuery, but can be rewritten in plain javascript.

In my bookmarked application, I found that a popup is the most reliable way to print dynamic content and allows the user to see the content before printing it. I also found that reducing the font size made it possible to set all the content on the page until the threshold is readable. You can also try to compress images if this is an option. I tried to customize ad types using CSS and some jQuery print plugins, but found them to be unreliable at best.

Here is the function that I use to pass the jQuery object to print. I maximized the open window and resized the title / font. If you have more than images, you will need to clone your CSS, but I just managed to save it in a variable from loading the bookmarklet.

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 to see if the item is visible after scrolling , something like the code above may work with some tweaking. Call printVisibleImages (), you may need to add CSS to populate or pass stylesheets from the main page.

+1
source share

You can - in the same or a new window - wrap the DIV around the entire BODY content and limit the visibility of the displayed area. If there is a root container-div, for example ...

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

... this is easy to do with 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"/>'); }

I must give a document that does not show anything other than what it was before. The printout should look like a screenshot - with cropped images at the bottom.

+1
source share

Create a jQuery function that loads a page with the click of a button via Ajax. (sending the page name as the post parameter). On this page, you will do the following:

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

and you fit the style.

0
source share

Maybe you can play around with Javascript (see how to get window sizes and scroll positions ), but I can't figure out how to print only that part of the document ...

Maybe this might help you: snapshot from flash browser or javascript

0
source share

I have 30 images per page, but only 4 fit in the viewport or browser.

I do not think that you can say with confidence that this works in all situations.

It is possible that many other browsers / permissions will create different human configurations, including some where images are cut off, etc.

The best solution, I think, is to offer X the number of images per printed page and style, respectively.

0
source share

In one of the web applications, you need something similar to what you are asking for. This is a link to frequently asked questions, in which the page of frequently asked questions was published, and the user wanted to get it if they so wished.

I did this by simply adding a button in html:

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

Since I pulled this into my small browser window, I removed all other controls from the parent page with:

 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 this helps!

0
source share

More articles:


All Articles