仅打印

2020/09/26 21:21 · javascript ·  · 0评论

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

我想避免使用新的预览对话框,因此使用此内容创建新窗口没有用。

该页面包含几个表,其中一个表包含我要打印的div-该表已通过网络的视觉样式进行了样式设置,因此不应以打印形式显示。

这是一个通用的解决方案,使用CSS,我已经验证可以使用。

@media print {
  body * {
    visibility: hidden;
  }
  #section-to-print, #section-to-print * {
    visibility: visible;
  }
  #section-to-print {
    position: absolute;
    left: 0;
    top: 0;
  }
}

替代方法不是很好。使用display非常棘手,因为如果有任何元素,display:none则其任何后代都不会显示。要使用它,您必须更改页面的结构。

使用visibility可以更好地工作,因为您可以打开后代的可见性。尽管看不见的元素仍然会影响布局,所以我移至section-to-print左上方,以使其正确打印。

我用最少的代码有了更好的解决方案。

将可打印部分放在具有以下ID的div内:

<div id="printableArea">
      <h1>Print me</h1>
</div>

<input type="button" onclick="printDiv('printableArea')" value="print a div!" />

然后添加一个事件,如onclick(如上所示),并像上面一样传递div的ID。

现在,让我们创建一个非常简单的javascript:

function printDiv(divName) {
     var printContents = document.getElementById(divName).innerHTML;
     var originalContents = document.body.innerHTML;

     document.body.innerHTML = printContents;

     window.print();

     document.body.innerHTML = originalContents;
}

请注意,这有多简单?没有弹出窗口,没有新窗口,没有疯狂的样式,没有jquery之类的JS库。真正复杂的解决方案的问题(答案并不复杂,也不是我要指的是),它永远不会在所有浏览器中转换!如果要使样式不同,请通过将media属性添加到样式表链接(media =“ print”)来执行已检查的答案中所示的操作。

没有绒毛,重量轻,可以正常工作。

所有的答案至今是相当有缺陷-他们要么涉及添加class="noprint"到任何东西,或者会搞乱display#printable

我认为最好的解决方案是围绕不可打印的东西创建包装器:

<head>
    <style type="text/css">

    #printable { display: none; }

    @media print
    {
        #non-printable { display: none; }
        #printable { display: block; }
    }
    </style>
</head>
<body>
    <div id="non-printable">
        Your normal page contents
    </div>

    <div id="printable">
        Printer version
    </div>
</body>

当然这不是完美的,因为它涉及到在HTML中移动一些内容...

使用jQuery就是这样简单:

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

您能否使用打印样式表,并使用CSS来安排要打印的内容?阅读本文以获取更多指导。

这很好用:

<style type="text/css">
@media print
{
body * { visibility: hidden; }
#printcontent * { visibility: visible; }
#printcontent { position: absolute; top: 40px; left: 30px; }
}
</style>

请注意,这仅适用于“可见性”。“显示”不会这样做。在FF3中测试。

我真的不喜欢所有这些答案。如果您有一个类(例如printableArea)并将其作为body的直接子代,则可以在打印CSS中执行以下操作:

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

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

对于在其他地方寻找printableArea的用户,您需要确保显示了printableArea的父代:

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

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

使用可见性会导致很多间距问题和空白页。这是因为可见性可以维持元素空间,只是将其隐藏,而在显示将其移除并允许其他元素占用其空间的情况下。

此解决方案有效的原因是您没有抓住所有元素,只是身体的直接子实体并将其隐藏。下面带有显示CSS的其他解决方案隐藏了所有元素,这会影响printableArea内容内的所有内容。

我不建议使用javascript,因为您需要具有一个用户单击的打印按钮,而标准浏览器的打印按钮将不会具有相同的效果。如果您确实需要这样做,我要做的就是存储正文的html,删除所有不需要的元素,打印,然后再添加html。如前所述,如果可以并使用上述CSS选项,我会避免这种情况。

注意:您可以使用内联样式将任何CSS添加到打印CSS中:

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

或者像我通常使用的是链接标记:

<link rel="stylesheet" type="text/css" media="print" href="print.css" />
  1. 给出您想要打印id的任何元素printMe

  2. 在您的head标签中包含以下脚本:

    <script language="javascript">
        var gAutoPrint = true;
    
        function processPrint(){
    
        if (document.getElementById != null){
        var html = '<HTML>\n<HEAD>\n';
        if (document.getElementsByTagName != null){
        var headTags = document.getElementsByTagName("head");
        if (headTags.length > 0) html += headTags[0].innerHTML;
        }
    
        html += '\n</HE' + 'AD>\n<BODY>\n';
        var printReadyElem = document.getElementById("printMe");
    
        if (printReadyElem != null) html += printReadyElem.innerHTML;
        else{
        alert("Error, no contents.");
        return;
        }
    
        html += '\n</BO' + 'DY>\n</HT' + 'ML>';
        var printWin = window.open("","processPrint");
        printWin.document.open();
        printWin.document.write(html);
        printWin.document.close();
    
        if (gAutoPrint) printWin.print();
        } else alert("Browser not supported.");
    
        }
    </script>
    
  3. 调用函数

    <a href="javascript:void(processPrint());">Print</a>
    

第1步:在您的head标签内编写以下javascript

<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>

步骤2:通过onclick事件调用PrintMe('DivID')函数。

<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>

嗯...使用样式表的类型进行打印...例如:

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

print.css:

div { display: none; }
#yourdiv { display: block; }
<script type="text/javascript">
   function printDiv(divId) {
       var printContents = document.getElementById(divId).innerHTML;
       var originalContents = document.body.innerHTML;
       document.body.innerHTML = "<html><head><title></title></head><body>" + printContents + "</body>";
       window.print();
       document.body.innerHTML = originalContents;
   }
</script>

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允许您禁止打印内容和块中的元素。
  • noprintcontent允许您禁止显示div中的元素-禁止显示内容,但是分配的区域保留为空。
  • 通过print,您可以使某些项目显示在打印版本中,而不显示在屏幕页面上。这些通常会在屏幕样式上显示为“ 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);
}

唯一要做的另一件事是在上载处理中添加一行,以便最初禁用打印样式,从而实现整页打印。

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

然后,可以从文档中的任何位置打印div。只需通过按钮或其他命令发出printDiv(“ thedivid”)即可。

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

注意:在我的实现中,这必须是第一个样式表。如果需要稍后在工作表序列中将工作表参考(0)更改为适当的工作表编号。

打印特定Div或任何元素的最佳方法

printDiv("myDiv");

function printDiv(id){
        var printContents = document.getElementById(id).innerHTML;
        var originalContents = document.body.innerHTML;
        document.body.innerHTML = printContents;
        window.print();
        document.body.innerHTML = originalContents;
}

使用CSS 3,您可以使用以下代码:

body *:not(#printarea) {
    display: none;
}

我使用JavaScript提取了内容,并创建了一个可以稳定打印的窗口...

桑德罗的方法效果很好。

我对其进行了调整,以允许使用多个printMe链接,尤其是在选项卡式页面和扩展文本中使用。

function processPrint(printMe){ <-在此处调用变量

var printReadyElem = document.getElementById(printMe); <-删除了printMe周围的引号,以请求一个变量

<a href="javascript:void(processPrint('divID'));">Print</a><-将要打印的div ID传递给将printMe变量转换为div ID的函数。需要单引号

@Kevin Florida如果您的同一个班有多个div,则可以这样使用:

 <div style="display:none">
   <div id="modal-2" class="printableArea">
     <input type="button" class="printdiv-btn" value="print a div!" />
   </div>
 </div>

我正在使用Colorbox内部内容类型

$(document).on('click', '.printdiv-btn', function(e) {
    e.preventDefault();

    var $this = $(this);
    var originalContent = $('body').html();
    var printArea = $this.parents('.printableArea').html();

    $('body').html(printArea);
    window.print();
    $('body').html(originalContent);
});

就我而言,我必须在页面内打印图像。当我使用投票解决方案时,我只有1个空白页,另一个显示图像。希望它能帮助某人。

这是我使用的CSS:

@media print {
  body * {
    visibility: hidden;
  }

  #not-print * {
    display: none;
  }

  #to-print, #to-print * {
    visibility: visible;
  }

  #to-print {
    display: block !important;
    position: absolute;
    left: 0;
    top: 0;
    width: auto;
    height: 99%;
  }
}

我的html是:

<div id="not-print" >
  <header class="row wrapper page-heading">

  </header>

  <div class="wrapper wrapper-content">
    <%= image_tag @qrcode.image_url,  size: "250x250" , alt: "#{@qrcode.name}" %>
  </div>
</div>

<div id="to-print" style="display: none;">
  <%= image_tag @qrcode.image_url,  size: "300x300" , alt: "#{@qrcode.name}" %>
</div>

最佳CSS以适应空间的空高:

@media print {
  body * {
    visibility: hidden;
    height:0;
  }
  #section-to-print, #section-to-print * {
    visibility: visible;
    height:auto;
  }
  #section-to-print {
    position: absolute;
    left: 0;
    top: 0;
  }
}

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

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

然后将一个类别(即“ noprint”)添加到每个您不想打印的标签上。

在CSS中使用

.noprint {
  display: none;
}

如果只想打印此div,则必须使用以下说明:

@media print{
    *{display:none;}
    #mydiv{display:block;}
}

函数printDiv()出现了几次,但在这种情况下,您将松开所有绑定元素和输入值。因此,我的解决方案是为所有名为“ body_allin”的对象创建一个div,并在第一个对象之外创建一个名为“ body_print”的对象。

然后调用此函数:

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";

}

您可以使用一种单独的CSS样式,该样式禁用除ID为“ printarea”的内容以外的所有其他内容。

有关更多说明和示例,请参见CSS设计:印刷

我有多个图像,每个图像都有一个按钮,需要单击一个按钮才能在每个div上打印图像。如果我已禁用浏览器中的缓存,并且在Chrome中图像大小未更改,则此解决方案有效:

        function printDiv(divName) {

        var printContents = document.getElementById(divName).innerHTML;
        w = window.open();

        w.document.write(printContents);
        w.document.write('<scr' + 'ipt type="text/javascript">' + 'window.onload = function() { window.print(); window.close(); };' + '</sc' + 'ript>');

        w.document.close(); // necessary for IE >= 10
        w.focus(); // necessary for IE >= 10

        return true;
    }

<div id="printableArea">
      <h1>Print me</h1>
</div>

<input type="button" onclick="printDiv('printableArea')" value="print a div!" />

在不影响当前页面的情况下又进行了一次批准,并且在打印时也保留了CSS。在这里选择器必须是特定的div选择器,我们需要打印哪些内容。

printWindow(selector, title) {
   var divContents = $(selector).html();
   var $cssLink = $('link');
   var printWindow = window.open('', '', 'height=' + window.outerHeight * 0.6 + ', width=' + window.outerWidth  * 0.6);
   printWindow.document.write('<html><head><h2><b><title>' + title + '</title></b></h2>');
   for(var i = 0; i<$cssLink.length; i++) {
    printWindow.document.write($cssLink[i].outerHTML);
   }
   printWindow.document.write('</head><body >');
   printWindow.document.write(divContents);
   printWindow.document.write('</body></html>');
   printWindow.document.close();
   printWindow.onload = function () {
            printWindow.focus();
            setTimeout( function () {
                printWindow.print();
                printWindow.close();
            }, 100);  
        }
}

这里提供了一些超时,表明外部CSS已应用到它。

我尝试了提供的许多解决方案,但都没有完美的解决方案。他们会丢失CSS或JavaScript绑定。我找到了一个既简单又完美的解决方案,既不损失CSS也不影响JavaScript绑定。

HTML:

<div id='printarea'>
    <p>This is a sample text for printing purpose.</p>
    <input type='button' id='btn' value='Print' onclick='printFunc();'>
</div>
<p>Do not print.</p>

Javascript:

function printFunc() {
    var divToPrint = document.getElementById('printarea');
    var htmlToPrint = '' +
        '<style type="text/css">' +
        'table th, table td {' +
        'border:1px solid #000;' +
        'padding;0.5em;' +
        '}' +
        '</style>';
    htmlToPrint += divToPrint.outerHTML;
    newWin = window.open("");
    newWin.document.write("<h3 align='center'>Print Page</h3>");
    newWin.document.write(htmlToPrint);
    newWin.print();
    newWin.close();
    }

我参加这个聚会很晚,但是我想提出另一种方法。我编写了一个名为PrintElements的微型JavaScript模块用于动态打印网页的各个部分。

它通过迭代选定的节点元素来工作,并且对于每个节点,它遍历DOM树直到BODY元素。在每个级别(包括初始级别)(这是要打印的节点级别),它将标记类(pe-preserve-print附加到当前节点。然后,将另一个标记类(pe-no-print附加到当前节点的所有同级上,但前提是pe-preserve-print它们上没有任何同级。作为第三步,它还将另一个类附加到保留的祖先元素上pe-preserve-ancestor

一个非常简单的补充性仅打印css将隐藏并显示各个元素。这种方法的一些好处是保留了所有样式,不会打开新窗口,不需要在许多DOM元素之间移动,并且通常对原始文档无害。

请参阅演示,或阅读相关文章以获取更多详细信息

您可以使用以下网址http :
//vikku.info/codesnippets/javascript/print-div-content-print-only-the-content-of-an-html-element-and-not-the-whole-document/

visibility:visiblevisibility:hiddenCSS属性一起使用@media print{}

'display:none'将隐藏所有嵌套的'display:block'。那不是解决方案。

我找到了解决方案。

@media print {
    .print-area {
        background-color: white;
        height: 100%;
        width: auto;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index:1500;
        visibility: visible;
    }
    @page{
        size: portrait;
        margin: 1cm;
    }
/*IF print-area parent element is position:absolute*/
    .ui-dialog,
    .ui-dialog .ui-dialog-content{
        position:unset !important;
        visibility: hidden;
    }
}

基于@Kevin Florida答案,我提出了一种避免由于覆盖内容而禁用当前页面上的脚本的方法。我使用了另一个名为“ printScreen.php”(或.html)的文件。将要打印的所有内容包装在div“ printSource”中。并使用javascript,打开您之前创建的新窗口(“ printScreen.php”),然后在顶部窗口的“ printSource”中获取内容。

这是代码。

主视窗:

echo "<div id='printSource'>";
//everything you want to print here
echo "</div>";

//add button or link to print
echo "<button id='btnPrint'>Print</button>";

<script>
  $("#btnPrint").click(function(){
    printDiv("printSource");
  });

  function printDiv(divName) {
   var printContents = document.getElementById(divName).innerHTML;
   var originalContents = document.body.innerHTML;
   w=window.open("printScreen.php", "_blank", "toolbar=yes,scrollbars=yes,resizable=yes,top=50,left=50,width=900,height=400");
   }
</script>

这是“ printScreen.php”-抓取要打印内容的其他文件

<head>
// write everything about style/script here (.css, .js)

</head>
<body id='mainBody'></body>
</html>


<script>
    //get everything you want to print from top window
    src = window.opener.document.getElementById("printSource").innerHTML;

    //paste to "mainBody"
    $("#mainBody").html(src);
    window.print();
    window.close();
</script>
本文地址:http://javascript.askforanswer.com/jindayin.html
文章标签: ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!