Html Page to Print, PDF and Copy to Clipboard in .net MVC 3.0

Question

I am developing a .Net MVC 3.0 Web application. There is a part I have to display invoice details like this.

On the top right corner I need to give Print, PDF & Copy to Clipboard function.

How to add those three button with above functions. Please Help ME......

Thanks In Advance.....!!!

Note: (I added this part later). There is a whole page. But this preview invoice is just a part of page wrapped by div tag. I don't want to print the whole page. I just want give three buttons only to that invoice div tag. Thanks :)

Answer 1

pdf = simply link to the URL of the PDF (Or the URL that generates the PDF)

print = what are you printing? The PDF? If so, this is redundant, as a person just needs to click the PDF and can print from there. Is it to print the web page? Again, redundant, as the web browser already has a print feature.

copy to clipboard = what are you copying to clipboard? For now, this is can only be accomplished via Flash, and, likely in the future not something you can do at all. This question's answers list some options: How do I copy to the clipboard in JavaScript?

Bottom line is that the image you provided appears to be a wireframe created by an IA or UX person that doesn't understand how web pages work. Not an uncommon thing, but really this is an UX issue, not a development issue. The problem needs to be addressed by the UX team first.

UPDATE based on question's UPDATE:

Regarding only wanting to deal with the contents of a particular div, the PDF and COPY TO CLIPBOARD comments above still stand.

What changes is the PRINT option. This can get messy. You could try swapping out the CSS via JS to only display the part you want to print, then triggering a print dialogue via JS, but that's going to be somewhat messy. I'd maybe consider instead making the PRINT icon a 'PRINT FRIENDLY' icon. Upon clicking that update the CSS to only display the content you want to print. Then let users use the PRINT feature in the browser, or you could try triggering the print dialogue with another bit of JS (though I'm not sure where browsers are at in supporting you printing from JS directly).