Javascript:将打印功能添加到正文元素

Question

我需要实现具有以下限制的打印页面功能:

• 我不能有一个打印 View (没有 print.jsp 指向)
• 我不能单独依赖 print.css(因为我必须在 DOM 中移动很多东西才能获得我想要打印的页面)

所以我实现了这个小脚本，它可以帮助阐明我的目标:

$(document).ready(function(){

    $('a#print').click(function(){

      var body = $('body');
      var pageClone = body.clone(true);

      $('div#search, div.chapters, div#footer').hide();
      $('div.content').css('width', '100%');
      $('div#logo').css('float', 'right');

      window.print();

      //reset the content and then copy it back
      body.html('');
      body.html(pageClone);

      return false;

    });

  });

现在打印的是我的 DOM 更改之前的整个页面。所以这不是我想要的，所以我想我可以将 window.print() 函数移植到 body 元素，如下所示:

var body = $('body');
jQuery.extend(body, {print:function(){return window.print(); }});
body.print();

除了这种方法仍然打印窗口内容，而不是正文内容(如果有问题的话)。

你能帮我在我更改后只打印 DOM 中实现的正文吗？

谢谢

Answer 1

您可能想查看 jQPrint。这是一个漂亮的小插件，可让您指定要打印页面的哪些部分。

http://plugins.jquery.com/project/jqPrint