7

这是我的问题，我有一个实现 window.print 的代码，但问题是当我关闭窗口打印并返回我的页面时，我的打印按钮不再起作用。

$(function(){
    $('#button1').click(function()
        {
          $('head').append('<link rel="stylesheet" href="<?php echo base_url() ?>assets/weekly/style/weekly.css" type="text/css"/>');
           var printContents = document.getElementById('data').innerHTML;
           var originalContents = document.body.innerHTML;
           document.body.innerHTML = printContents;
           window.print();
           document.body.innerHTML = originalContents;
           //window.location = document.body.innerHTML;       
           //location.reload(); 
        });
     });

但是当我添加location.reload()（见我评论它）时，打印按钮再次工作，但它加载以前的数据而不是当前数据，这就是我不想使用location.reload(). 我的问题还有其他解决方案或方法吗？

4

3 回答 3

3

您确实应该为此使用特定于打印的 CSS 样式表，但是如果您想以这种方式实现目标，也许这会更好：

$(function(){
    $('#button1').click(function(){
        $('head').append('<link rel="stylesheet" href="<?php echo base_url() ?>assets/weekly/style/weekly.css" type="text/css"/>');
         var printContents = $( $('#data').html() );
         var originalContents = $('body > *').hide();
         $('body').append( printContents );
         window.print();
         printContents.remove();
         originalContents.show();
      });
 });

使用“数据”元素的 innerHTML 创建一个新元素。隐藏body标签的所有子元素。将新元素附加到 body 标记。打印。删除新元素。再次显示原始内容。

这仍然有点混乱，但你不应该丢失你的事件。

于 2013-06-27T02:48:25.173 回答
1

我通过只打开一个只包含我想要打印的内容的新窗口来解决类似的问题，如下所示：

function printPage(htmlstring){

    var boiler  = "put any styling or js scripts here to make it look right";
        boiler += "<div id='print-page-content'>\n</div>\n";

    var PrintWindow = window.open("","newwin", height=600, width=800, toolbar=no, menubar=no");
    PrintWindow.document.write(boiler);
    $(PrintWindow.document).find("#print-page-content").append(htmlstring);
    $(PrintWindow).ready(function(){
        PrintWindow.print();
    });
}

然后只需通过以下方式调用它：

printPage(document.body.innerHTML);
于 2013-06-26T14:55:12.360 回答
0

非常感谢大家的回答和回复。我真的很感激。我只想添加答案，这个答案来自我的朋友。

首先在按钮上添加 onlick="window.print()"

 <p><img src="images/printButton.gif" id="button1" width="100" height="75" onclick="window.print()"></p>

然后像这样添加css样式

<link href = 'css/print.css' rel = 'stylesheet' style = 'text/css'  MEDIA="print, handheld"/>

不要忘记 MEDIA="print,handheld"

于 2013-06-27T07:31:22.503 回答