2

问题是新内容不会打印（更多元素）。

当用户单击我的打印链接时，我会在调用 window.print() 之前将更多 html 添加到文档中。

在打印之前，我使用 ajax 为一本书获取更多章节。

代码：

打印初始化：

var afterPrint = function () {

  var timer = setInterval(function () {

    afterContentPrint(); // Cleanup html (restore to initial state)
    clearInterval(timer);

  }, 900);
}
//window.onbeforeprint = beforePrint;
window.onafterprint = afterPrint;

活动打印点击：

$("#print-test").click(function (e) {

   e.preventDefault();

   beforeContentPrint(); // ajax call for additional content, finishing by calling window.print()
});

在函数 beforeContentPrint() 中：

var jqxhr = $.ajax({

   type: "GET",
   url: bookURL,

   success: function(data) {
     .....
     .....

     $(article).each(function () {
        parent.append(article);

     });
   },
   complete: function() {
     var timer = setInterval(function () {
        window.print();
     }, 900);
  }
 }

新内容明显添加到 HTML 文档中，因此它应该可以工作。但只有初始内容（在 ajax 调用之前）被拾取进行打印。

此解决方案适用于 IE 和 Firefox（onbeforeprint 和 onafterprint）。

使用 window.matchMedia('print') 在 Chrome 中使用这种逻辑似乎可以正常工作。

4

4 回答 4

1

我不知道为什么会这样，但是 Mozilla 文档中有一个解决方法；打印隐藏的 iframe，然后您无需显示即可打开本书的更多章节。这里的链接https://developer.mozilla.org/en-US/docs/Printing

这里的代码：

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>MDN Example</title>
<script type="text/javascript">
function closePrint () {
  document.body.removeChild(this.__container__);
}

function setPrint () {
  this.contentWindow.__container__ = this;
  this.contentWindow.onbeforeunload = closePrint;
  this.contentWindow.onafterprint = closePrint;
  this.contentWindow.print();
}

function printPage (sURL) {
  var oHiddFrame = document.createElement("iframe");
  oHiddFrame.onload = setPrint;
  oHiddFrame.style.visibility = "hidden";
  oHiddFrame.style.position = "fixed";
  oHiddFrame.style.right = "0";
  oHiddFrame.style.bottom = "0";
  oHiddFrame.src = sURL;
  document.body.appendChild(oHiddFrame);
}
</script>
</head>

<body>
  <p><span onclick="printPage('externalPage.html');" style="cursor:pointer;text-decoration:underline;color:#0000ff;">Print external page!</span></p>
</body>
</html>
于 2013-09-03T11:48:06.040 回答
1

第一次尝试：尝试将asyn:false放入 beforeContentPrint 的 ajax 请求中，以便首先添加元素，然后调用 print。

var jqxhr = $.ajax({

   type: "GET",
   url: bookURL,
   async:false,
   success: function(data) {
     .....
     .....

     $(article).each(function () {
        parent.append(article);

     });
   },
   complete: function() {
     var timer = setInterval(function () {
        window.print();
     }, 900);
  }
 }

2ndAttempt：看看 这里如何强制执行一个又一个函数。希望这可以帮助。

于 2013-09-06T13:58:06.083 回答
0

看起来 setInterval, clearInterval 是什么让你搞砸了。更改为 setTimeout 并删除 afterprint 函数中的 clearInterval 。我做了一个在 FF 和 IE9 中工作的小提琴。小提琴

    complete: function() {
        var timer = setTimeout(function () {
        window.print();
      }, 900);
    }
于 2013-08-29T21:33:59.317 回答
0

由于未显示添加的元素，因此很难确定确切的问题，但是通过附加/插入到文档中添加元素并不总是适用于所有浏览器，在最坏的情况下，您将需要添加这些元素通过代码手动（document.createElement()等appendChild()）。

在尝试创建解决方法时，您可以尝试使用MutationObservers来跟踪文章元素的更改，这有望帮助您在 DOM 正确更新时触发打印。这种支持在新浏览器中相当不错（您可能必须在某些情况下使用前缀 f.ex. WebKitMutationObserver），而对于旧浏览器，您可以提供回退 - 当然这只能让您到目前为止。

这将监视目标元素的更改并触发回调。

基于本文的通用示例：

var article = document.querySelector('#articleID'),
    doPrint = false,    // must be available in global/parent scope
    o,
    useFallback = (typeof MutationObserver !== 'undefined');


if (!useFallback) {    
    o = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {

           // you can do additional filtering here
           // using the mutation object (.name, .type, ...)

           if (doPrint) {
               doPrint = false;
               window.print();
           }
       });
    });

    var cfg = { attributes: true, childList: true, characterData: true };

    o.observe(article, cfg);
}

现在观察者正在运行，您可以在成功回调中进行此修改：

var timer;  // keep track of setTimeout so we can cancel it

success: function(data) {
   ...
   ...

$(article).each(function () {

    parent.append(article);

  });

  // after last element is added, add a "dummy" element
  doPrint = true;

  if (useFallback) {
     // fallback to setTimeout or other solution
  }
  else {
     parent.append('<br />');
  }

}

我在这里做了一个在线演示，它设置了观察者并添加了一些元素。打开控制台查看操作。该演示可能在数据方面过于有限，无法模拟您的情况，但对于查看该过程可能很有用。

如果是最好的，可以讨论这里用于触发打印对话框本身的机制 - 我只是提供一个作为示例。

但是你可以看到当有东西被添加到时，观察者被触发了article。这样你就知道 DOM 已经更新并且应该可以打印了。只有添加的最后一个元素需要触发打印，因此需要触发doPrint标志。

如果您仍然没有成功，您将需要考虑以代码方式手动添加元素，或者可能预定义一些您在需要时注入的元素（如上所述，在不知道这里的完整场景的情况下，它必须是猜测）。

于 2013-09-07T05:39:12.067 回答