Print < div id = "printarea" >?

How do I print the indicated div (without manually disabling all other content on the page)?

I want to avoid using the new preview dialog, so it's useless to create a new window with this content.

The page contains several tables, one of which contains the div s I want to print - the table has a visual style for the network and should not be displayed as a print.

#1 building

Sandro's method worked well.

I tweaked it to allow multiple printMe links, especially in tabbed pages and extended text.

Function processprint (printme) {< - call variable here

Var printreadyelem = document.getelementbyid (printMe); < - removed quotes around printMe to require a variable

< a href = "javascript: void (processprint ('divid '));" > Print < / a > < pass the div ID to be printed to the function that converts the printMe variable to the div ID. Single quote required

#2 building

You can use the following Website : http : //vikku.info/codesnippets/javascript/print-div-content-print-only-the-content-of-an-html-element-and-not-the-whole-document/

Or use a combination of visibility: visibility and visibility: visibility: hidden @media The print{} css property and @media print{}

'display: none' hides all nested 'display: block s'. That's not the solution.

#3 building

Step 1: write the following javascript in your head tag

<script language="javascript">
function PrintMe(DivID) {
var disp_setting="toolbar=yes,location=no,";
disp_setting+="directories=yes,menubar=yes,";
disp_setting+="scrollbars=yes,width=650, height=600, left=100, top=25";
   var content_vlue = document.getElementById(DivID).innerHTML;
   var docprint=window.open("","",disp_setting);
   docprint.document.open();
   docprint.document.write('<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"');
   docprint.document.write('"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">');
   docprint.document.write('<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">');
   docprint.document.write('<head><title>My Title</title>');
   docprint.document.write('<style type="text/css">body{ margin:0px;');
   docprint.document.write('font-family:verdana,Arial;color:#000;');
   docprint.document.write('font-family:Verdana, Geneva, sans-serif; font-size:12px;}');
   docprint.document.write('a{color:#000;text-decoration:none;} </style>');
   docprint.document.write('</head><body onLoad="self.print()"><center>');
   docprint.document.write(content_vlue);
   docprint.document.write('</center></body></html>');
   docprint.document.close();
   docprint.focus();
}
</script>

Step 2: call the PrintMe ('DivID ') function through the onclick event.

<input type="button" name="btnprint" value="Print" onclick="PrintMe('divid')"/>
<div id="divid">
here is some text to print inside this div with an id 'divid'
</div>

#4 building

Using jQuery is as simple as this:

w=window.open();
w.document.write($('.report_left_inner').html());
w.print();
w.close();

#5 building

I really don't like all of these answers. If you have a class (such as printableArea) and use it as a direct descendant of body, you can do the following in print CSS:

body > *:not(.printableArea) {
    display: none;
}

//Not needed if already showing
body > .printableArea {
    display: block;
}

Using visibility can cause many spacing issues and blank pages. This is because visibility maintains element space, just making it hidden, while showing where it is deleted and other elements are allowed to occupy its space.

The reason this solution works is that you don't capture all the elements, but just the immediate descendants of the body and hide them. The following additional solution with the display CSS hides all elements, which affects everything within the printable area content.

I don't recommend javascript because you need to have a print button that the user clicks, and the print button in a standard browser won't have the same effect. If you really need to do this, all I have to do is store the html of the body, delete all unnecessary elements, print, and then add html. As mentioned above, I'll avoid this if I can and use the CSS options above.

Note: you can use inline styles to add any CSS to the print CSS:

<style type="text/css">
@media print {
   //styles here
}
</style>

Or like I usually use link Tags:

<link rel="stylesheet" type="text/css" media="print" href="print.css" />

Posted by delxy on Mon, 03 Feb 2020 07:21:09 -0800

Programmer Group