Client Side Web Development

Re: How to print DIV contents only

NC01 — Tue, 06 Jan 2009 12:47:53 GMT

The newer browsers prevent things like: left=50000 and top=50000 which is basically illegal code since it opens the window off of the visible page. If you want that code to be browser independent, you're just going to have to change it to left=0 and top=0 (or something in the viewing area) and live with the print window showing momentarily.

NC...

Re: How to print DIV contents only

sirdneo — Tue, 06 Jan 2009 08:50:08 GMT

This is the most efficent cross browser code, all the codes which i get works only on IE and not on firefox, but this code is working on both IE and FireFox. However In Firefox window does not open with left=50000 and top=50000 :( can any one solve this window issue for firefox

Re: How to print DIV contents only

NC01 — Mon, 08 Sep 2008 18:48:13 GMT

First of all you should NOT hijack someone else's post. Start your own. Try this because I can't see how your code could possibly work.

printWindow.document.write(printContent.innerHTML);
printWindow.document.close();
printWindow.focus();
printWindow.print();
printWindow.close();
}
// -->
</script>

<div id="printDiv">
This is the content in the page to print
</div>
<input type="button" value="Print" onclick="JavaScript:printPartOfPage('printDiv');" />

NC...

Re: How to print DIV contents only

jimmy2552 — Mon, 08 Sep 2008 17:48:49 GMT

The javascript works fine. However, I receive an error when I try sorting my gridview after clicking on the Print button stating "theForm.__EVENTTARGET' is null or not an object.

function printdiv(printpage)
{
var headstr = "<html><head><title></title></head><body>";
var footstr = "</body>";
var newstr = document.all.item(printpage).innerHTML;
var oldstr = document.body.innerHTML;
document.body.innerHTML = headstr+newstr+footstr;
window.print();
document.body.innerHTML = oldstr;
return false;
}

Do you have any suggestions on how to fix this situation?

Thanks.

Re: How to print DIV contents only

NC01 — Mon, 28 Jul 2008 13:24:16 GMT

mirainc, you can't do this in VB.NET as this requires client-side functionality and needs to be done in JavaScript. VB.NET provides server-side functionality.

NC...

Re: How to print DIV contents only

mirainc — Mon, 28 Jul 2008 09:52:05 GMT

Hey blodfox777

i want to know how do u implement the method in a VB.NET language?

i too just want to print the content in content placeholder..

Re: How to print DIV contents only

NC01 — Thu, 17 Jul 2008 18:51:27 GMT

The only way that you can convert to PDF is with a third party tool, and they cannot be used client-side (like printing). Most cost money. This one used to be free: http://itextsharp.sourceforge.net/, but I haven't used it in a while, so I don't know if it still is.

NC..

Re: How to print DIV contents only

nzamorski — Thu, 17 Jul 2008 18:44:29 GMT

It worked once I used your markup. Thank you for your help. Do you know an easy way for me to convert that same div tag to a pdf easily with a separate button?

Re: How to print DIV contents only

NC01 — Thu, 17 Jul 2008 18:22:45 GMT

nzamorski:

That code did not work for me. Ideally I would like to just be able to click the print button and it would take all of the content from the place holder or the div and print it while keeping the formatting(font, size, color).

Well it certainly worked for me and here is the markup that I used. I'm afraid that I would need more information to tell what your problem is.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Print Test</title>
</head>
<body>

<form id="Form1" method="post" runat="server">
<style media="print">
.noPrint
{
  display: none;
}
</style>
<div>
  <div>
   <asp:button id="postBackButton" runat="server" text="PostBack"></asp:button>
  </div>
  <div>
   <input type="button" value="HTML Button">
  </div>
  <div id="workDiv">
   workDiv contents
  </div>
  <div>
   <asp:TextBox ID="TextBox1" runat="server">Text</asp:TextBox>
  </div>
</div>
<div id="divToPrint">
  divToPrint contents<br>Bla bla bla
</div>
<input type="button" class="noPrint" value="Print" onclick="printDiv('divToPrint');">
</form>

</body>
</html>

for (var i=0; i<divArray.length; i++)
{
divArray[i].style.display = 'none';
}

document.getElementById(divId).style.display = 'block';

window.print();

for (var i=0; i<divArray.length; i++)
{
divArray[i].style.display = 'block';
}
}
// -->
</script>

By the way, you can't use a PlaceHolder since it exudes no markup.

NC...

Re: How to print DIV contents only

nzamorski — Thu, 17 Jul 2008 17:58:20 GMT

That code did not work for me. Ideally I would like to just be able to click the print button and it would take all of the content from the place holder or the div and print it while keeping the formatting(font, size, color).

Re: How to print DIV contents only

NC01 — Thu, 17 Jul 2008 17:43:07 GMT

Try this:

for (var i=0; i<divArray.length; i++)
{
divArray[i].style.display = 'none';
}

document.getElementById(divId).style.display = 'block';

window.print();

for (var i=0; i<divArray.length; i++)
{
divArray[i].style.display = 'block';
}
}
// -->
</script>

</form>

NC...

Re: How to print DIV contents only

nzamorski — Thu, 17 Jul 2008 17:07:06 GMT

I tried this code on my website and it works great in Internet Explorer, but does not work in Firefox(same problem as someone else). Did you ever figure out how to make it work in Firefox as well?

Thanks

Re: How to print DIV contents only

just_life — Wed, 21 May 2008 16:33:23 GMT

Tried it too. Still the blank page !! :-(

Re: How to print DIV contents only

blodfox777 — Wed, 21 May 2008 02:23:22 GMT

Hi just_life

I suggest you try to use "onclientclick" instead of "onclick"

hope this helps!

Re: How to print DIV contents only

just_life — Tue, 20 May 2008 17:32:35 GMT

When I tried it, I got a blank page!!

I have the undermentioned on myprint.js page

function printdiv(printpage)
{
var headstr = "<html><head><title></title></head><body>";
var footstr = "</body>";
var newstr = document.all.item(printpage).innerHTML;
var oldstr = document.body.innerHTML;
document.body.innerHTML = headstr+newstr+footstr;
window.print();
document.body.innerHTML = oldstr;
return false;
}

on my code page I have:

<asp:Button ID="PrintAns" runat="server" Style="z-index: 105; position: relative;top: 55px; left:245px;width: 50px" onclick="printdiv('content');" Text="Print" />

where "content" is the div id whose contents I wish to print.

Could anyone please help in figuring out what I'm doing wrong?

Thank You