打印<div id="printarea"></div> only?

如何打印指定的div(无需手动禁用页面上的所有其他内容)?

我想要避免一个新的预览对话框，所以用这个内容创建一个新窗口是没有用的。

该页面包含了几个表格，其中一个包含了我想打印的div -表格是用web的视觉样式设计的，不应该显示在打印中。

当前回答

我拿起使用JavaScript的内容，并创建了一个窗口，我可以打印代替…

2009-02-03 13:06:46

其他回答

printDiv(divId):在任何页面上打印任何div的通用解决方案。

我有一个类似的问题，但我想(a)能够打印整个页面，或(b)打印几个特定区域中的任何一个。由于上面的很多内容，我的解决方案允许您指定要打印的任何div对象。

此解决方案的关键是向打印媒体样式表添加适当的规则，以便打印所请求的div(及其内容)。

首先，创建所需的打印css来屏蔽所有内容(但没有允许您想要打印的元素的特定规则)。

<style type="text/css" media="print">
   body {visibility:hidden; }
   .noprintarea {visibility:hidden; display:none}
   .noprintcontent { visibility:hidden; }
   .print { visibility:visible; display:block; }
</style>

注意，我添加了新的类规则:

Noprintarea允许您禁止打印div中的元素——包括内容和块。 Noprintcontent允许您抑制div中元素的打印—内容被抑制，但分配的区域为空。打印让你有项目显示在打印版本，但不在屏幕上。它们通常会有“display:none”作为屏幕样式。

然后插入三个JavaScript函数。第一个选项只是打开和关闭打印媒体样式表。

function disableSheet(thisSheet,setDisabled)
{ document.styleSheets[thisSheet].disabled=setDisabled; }

第二个做真正的工作，第三个事后清理。第二个(printDiv)激活打印媒体样式表，然后追加一个新规则以允许所需的div打印，发出打印，然后在最后的清理之前添加一个延迟(否则可以在打印实际完成之前重置样式)。

function printDiv(divId)
{
  //  Enable the print CSS: (this temporarily disables being able to print the whole page)
  disableSheet(0,false);
  //  Get the print style sheet and add a new rule for this div
  var sheetObj=document.styleSheets[0];  
  var showDivCSS="visibility:visible;display:block;position:absolute;top:30px;left:30px;";
  if (sheetObj.rules) { sheetObj.addRule("#"+divId,showDivCSS); }
  else                { sheetObj.insertRule("#"+divId+"{"+showDivCSS+"}",sheetObj.cssRules.length); }
  print();
  //  need a brief delay or the whole page will print
  setTimeout("printDivRestore()",100);  
}

最后一个函数删除添加的规则，并再次将打印样式设置为禁用，以便可以打印整个页面。

function printDivRestore()
{
  // remove the div-specific rule
  var sheetObj=document.styleSheets[0];  
  if (sheetObj.rules) { sheetObj.removeRule(sheetObj.rules.length-1); }
  else                { sheetObj.deleteRule(sheetObj.cssRules.length-1); }
  //  and re-enable whole page printing
  disableSheet(0,true);
}

唯一要做的另一件事是在onload处理中添加一行，这样打印样式最初是禁用的，从而允许整页打印。

<body onLoad='disableSheet(0,true)'>

然后，在文档的任何地方，你都可以打印一个div。只要从按钮或其他地方发出printDiv("thedivid")即可。

这种方法的一大优点是它提供了从页面中打印选定内容的通用解决方案。它还允许对打印的元素使用现有样式——包括包含的div。

注意:在我的实现中，这必须是第一个样式表。将表引用(0)更改为适当的表号，如果需要将其置于表序列的后面。

2011-01-22 21:36:50

printDiv()函数出现了几次，但在这种情况下，将丢失所有绑定元素和输入值。所以，我的解决方案是为所有名为“body_allin”的东西创建一个div，并在第一个名为“body_print”的外部创建另一个div。

然后调用这个函数:

function printDiv(divName){

    var printContents = document.getElementById(divName).innerHTML;

    document.getElementById("body_print").innerHTML = printContents;

    document.getElementById("body_allin").style.display = "none";
    document.getElementById("body_print").style.display = "";

    window.print();

    document.getElementById("body_print").innerHTML = "";
    document.getElementById("body_allin").style.display = "";
    document.getElementById("body_print").style.display = "none";

}

2014-02-27 17:47:42

试试这个:

function printElement($elem){
    var $customPrintSection = document.getElementById('customPrintSection'),
        $customPrintSectionCss = document.getElementById('customPrintSectionCss');

    if ($customPrintSection){
        $customPrintSection.remove();
    }

    if ($customPrintSectionCss){
        $customPrintSectionCss.remove();
    }

    $customPrintSection = document.createElement('div');
    $customPrintSection.id = 'customPrintSection';

    $customPrintSectionCss = document.createElement('style');
    $customPrintSectionCss.id = 'customPrintSectionCss';

    document.body.appendChild($customPrintSection);
    document.body.appendChild($customPrintSectionCss);

    $customPrintSection.innerHTML = $elem.innerHTML;
    $customPrintSectionCss.innerHTML = '@media screen { div#customPrintSection { display: none; } } @media print { body *:not(div#customPrintSection):not(div#customPrintSection *) { display: none; } div#customPrintSection a[href]:after { content: none !important; } }';

    window.print();

    $customPrintSection.remove();
    $customPrintSectionCss.remove();
}

我喜欢这个解决方案，因为它不像css解决方案那样影响整个页面，它在一个特定的答案中使所有主体元素立即不可见。所以如果需要的话，祝你能打印整页。

我也更喜欢“display: none”方法而不是“visibility: hidden”方法，所以没有必要将可打印元素设置为绝对元素并将其对齐到左上角。但我想这是主观的。

最后，它真的打败了新的窗口方法。

2022-11-29 13:41:19

It's better solution. You can use it Angualr/React

Html

 <div class="row" id="printableId">
      Your html 
    </div>

Javascript

   function printPage(){
        
        var printHtml = window.open('', 'PRINT', 'height=400,width=600');
    
        printHtml.document.write('<html><head>');
        printHtml.document.write(document.getElementById("printableId").innerHTML);
        printHtml.document.write('</body></html>');
    
        printHtml.document.close(); 
        printHtml.focus(); = 10*/
    
        printHtml.print();
        printHtml.close();
    
        return true;
    
      }

2021-07-27 12:01:05

使用特殊的样式表进行打印

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

然后添加一个类，即。"noprint"到每个你不想打印的内容的标签。

在CSS中使用

.noprint {
  display: none;
}

2009-01-22 12:14:11

打印<div id="printarea"></div> only?

推荐文章

最新文章

标签