打开新窗口以打印元素

【问题标题】：open new window to print element打开新窗口以打印元素
【发布时间】：2013-02-11 02:02:02
【问题描述】：

尝试打开一个新窗口以包含仅用于打印的元素。但它在 IE8 中不起作用。

function printElement(elementId) {
  var printWindow = window.open('', '_blank',
    'status=0,toolbar=0,location=0,menubar=1,resizable=1,scrollbars=1'); 

  printWindow.document.write("<html><head></head><body></body></html>"); 

  var head = jQuery('head').clone();
  var printElement = jQuery('#' + elementId).clone();

  jQuery(printWindow.document).find('head').replaceWith(head);  // does not work in IE8
  var body = jQuery(printWindow.document).find('body');
  body.empty();
  body.append(printElement);  // does not work in IE8
  return false;
}

感谢您的帮助。

【问题讨论】：

标签： jquery printing replace append

【解决方案1】：

这个怎么样？如果我了解您想要正确执行的操作，那么这应该对您有用。在 IE 8 中测试。

Working example on JSBin.

HTML：

<a href="#" id="one" class="trigger">Print One</a>
<a href="#" id="two" class="trigger">Print Two</a>

JavaScript：

var $trigger = $(".trigger"),
    printElement = function(id) {
        var printWindow = window.open('','_blank','status=0,toolbar=0,location=0,menubar=1,resizable=1,scrollbars=1'),
            html = $('html').clone(),
            printElement = $('#' + id).clone(),
            body;

      printWindow.document.write("<!DOCTYPE html><head></head><body></body></html>"); 

      $(printWindow.document).find('html')
                            .replaceWith(html);

      body = $(printWindow.document).find('body')
                                    .html(printElement);
    };

$trigger.on("click", function(e) {
  var id = $(this).attr("id");

  e.preventDefault();

  printElement(id);
});

【讨论】：