使用 javascript 打印动态内容答案

【问题标题】：Printing dynamic content with javascript使用 javascript 打印动态内容
【发布时间】：2011-08-18 11:49:06
【问题描述】：

问题

我们有带有表单的页面。
用户填写表格并提交。
我需要打印包含表单数据和其他内容的页面。

代码 #1

$(document).ready(function($){
 $('input[name=sumb_but]').bind('click', function(e){
  e.preventDefault();
  var print_text = "<p>Test " + $('#form').serialize() + "</p>";
  var newWin = window.open('','printWindow','Toolbar=0,Location=0,Directories=0,Status=0,Menubar=0,Scrollbars=0,Resizable=0');
  newWin.document.body.innerHTML = print_text;
  newWin.print();
  });
});

很酷，但是：

我需要特定的 css
在加载内容之前出现打印窗口...哎呀

好的！

代码 #2

$(document).ready(function($){
 $('input[name=sumb_but]').bind('click', function(e){
  e.preventDefault();
  var print_text = "<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'> <html xmlns='http://www.w3.org/1999/xhtml'> <head> <meta http-equiv='Content-Type' content='text/html; charset=windows-1251' /> <title>Оформление доверенности (простая письменная форма)</title> <link rel='stylesheet' type='text/css' href='/css/print_forms/warrant.css'> </head> <body> <p>Test " + $('#form').serialize() + "</p></body><script type='text/javascript'>window.print();</script></html>";
  var newWin = window.open('','printWindow','Toolbar=0,Location=0,Directories=0,Status=0,Menubar=0,Scrollbars=0,Resizable=0');
  newWin.document.write(print_text);
  });
});

document.write - 在其他情况下 css 不加载
在和内容添加“window.print()”

这在所有浏览器中都可以正常工作，但在 IE 中不行 - 内容加载成功但没有打印对话框的窗口。我需要帮助！
附：
带有 media="print" 的 CSS - 出于某种原因，这种情况不是很好的解决方案。

【问题讨论】：

它在 IE 中究竟做了什么？
内容加载成功的页面。发布更新，snx
尝试使用 $(window).load 而不是 .ready。 .load 是 onload，所以这是最后一个会触发的东西。

标签： javascript internet-explorer printing

【解决方案1】：

$(document).ready(function($){
 $('input[name=sumb_but]').bind('click', function(e){
  e.preventDefault();
  var print_text = "<p>Test " + $('#form').serialize() + "</p>";
  var newWin = window.open('','printWindow','Toolbar=0,Location=0,Directories=0,Status=0,Menubar=0,Scrollbars=0,Resizable=0');
  newWin.document.body.innerHTML = print_text;
  newWin.document.body.onload = function() { newWin.print(); }   

  });
});

这会有所帮助

【讨论】：

在这种情况下newWin.document.body.innerHTML = print_text; css 未加载。
我可以看到你没有添加 css，你需要的是在头部附加 css 链接，然后将内容放入正文中，这是因为当你将 css 链接放入正文时它没有加载跨度>
好的。我将完整的方式放入 css 文件并加载 css。 snx！