【问题标题】:Prinitng issue in jQueryjQuery中的打印问题
【发布时间】:2013-10-31 14:31:11
【问题描述】:
<html>
<head>
<script type="text/javascript">

    function PrintElem()
    {
            var mydiv1 = document.getElementById("div1");
            var mydiv2= mydiv.getElementsByTagName("div2");
       printTheDivs(mydiv1, mydiv2);
    }

    function printTheDivs (d1,d2) 
    {
        var mywindow = window.open('', 'my div', 'height=400,width=600');
         mywindow.document.write('<html><body>' + d1.innerHTML + '</body></html>');
//Here I want to show the Images in this window.

$(d2).print();

//but want to print the Div2 Images I’m using the jquery.print.js plugin but not working. It is printing complete page. How to accomplish the task with multiple Browsers.


    }

</script>
</head>
<body>

<div id="div1">
<img src=”image1.jpg”/>
<img src=”image2.jpg”/>
<img src=”image3.jpg”/>
<img src=”image4.jpg”/>
<img src=”image5.jpg”/>
</div>

<div id="div2">
<img src=”image6.jpg”/>
<img src=”image7.jpg”/>
<img src=”image8.jpg”/>
<img src=”image9.jpg”/>
<img src=”image10.jpg”/>
</div>

<input type="button" value="Print Div" onclick="PrintElem()" />

</body>
</html>

我想使用 window.open() 显示一个 div 并打印另一个 div。我正在使用 jquery.print.js 插件,但无法正常工作。它正在打印完整的页面。如何使用多个浏览器完成任务。请帮我。提前致谢。

【问题讨论】:

标签: javascript jquery


【解决方案1】:

您可以打印特定的 div

<div id="divid">test</div>

function printDiv(divID) {
        //Get the HTML of div
        var divElements = document.getElementById(divID).innerHTML;
        //Get the HTML of whole page
        var oldPage = document.body.innerHTML;

        //Reset the page's HTML with div's HTML only
        document.body.innerHTML = 
          "<html><head><title></title></head><body>" + 
          divElements + "</body>";

        //Print Page
        window.print();

        //Restore orignal HTML
        document.body.innerHTML = oldPage;


    }
    printDiv('divid')

在这里查看http://jsfiddle.net/jrhp8/

【讨论】:

  • 但这会导致 window(Window.Open()) 在替换正文内容时加载。在我刷新页面之前,替换正文内容后页面也无法正常运行。还有其他解决办法吗?
猜你喜欢
  • 2012-01-26
  • 1970-01-01
  • 2014-09-10
  • 2018-12-27
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2011-08-08
  • 1970-01-01
相关资源
最近更新 更多