使用 Javascript 打印外部 HTML 文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6168725/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Print external HTML file with Javascript
提问by vladchooo
I have a "print" button on index.html. What code do I need to print the print.htmlfile? I mean, when I press the button from index.html, print the page print.html.
我有一个“打印”按钮index.html。我需要什么代码来打印print.html文件？我的意思是，当我按下 按钮时index.html，打印页面print.html。
回答by no.good.at.coding
I think you're looking for window.print()
我想你正在寻找 window.print()
Update
更新
Just noticed you've specified file names in there and that you want to print print.htmlwhen a button on index.htmlis clicked. There's no built-in way to do this (in the sense that you can't pass any arguments to window.print()indicating the document to print). What you could do is load the document to print into an iframe or open a new window and on load, invoke window.print()on that container.
刚刚注意到您在其中指定了文件名，并且您想print.html在index.html单击按钮时进行打印。没有内置的方法可以做到这一点（从某种意义上说，您不能传递任何参数来window.print()指示要打印的文档）。您可以做的是将要打印的文档加载到 iframe 中或打开一个新窗口，并在加载时调用window.print()该容器。
Here are some forum posts and web pages that talk about the same thing:
以下是一些讨论相同内容的论坛帖子和网页：
- http://www.highdots.com/forums/javascript/printing-another-web-file-present-274201.html
- http://www.webmasterworld.com/javascript/3524974.htm
- http://www.felgall.com/jstip29.htm
- http://www.highdots.com/forums/javascript/printing-another-web-file-present-274201.html
- http://www.webmasterworld.com/javascript/3524974.htm
- http://www.felgall.com/jstip29.htm
Update 2
更新 2
Here's some quick-and-dirty code - note that this will only work if both your pages are in the same domain. Additionally, Firefox seems to fire the loadevent for an empty iframe also - so the print dialog will be displayed immediately on load, even when no srcvalue was set for the iframe.
这是一些快速而肮脏的代码 - 请注意，这仅在您的两个页面位于同一域中时才有效。此外，Firefox 似乎load也会为空 iframe触发事件 - 因此即使未src为 iframe 设置任何值，也会在加载时立即显示打印对话框。
index.html
索引.html
<html>
<head>
<title>Index</title>
<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script>
$(document).ready(function(){
$('#loaderFrame').load(function(){
var w = (this.contentWindow || this.contentDocument.defaultView);
w.print();
});
$('#printerButton').click(function(){
$('#loaderFrame').attr('src', 'print.html');
});
});
</script>
<style>
#loaderFrame{
visibility: hidden;
height: 1px;
width: 1px;
}
</style>
</head>
<body>
<input type="button" id="printerButton" name="print" value="Print It" />
<iframe id="loaderFrame" ></iframe>
</body>
</html>
print.html
打印.html
<html>
<head>
<title>To Print</title>
</head>
<body>
Lorem Ipsum - this is print.html
</body>
</html>
Update 3
You might also want to see this: How do I print an IFrame from javascript in Safari/Chrome
更新 3
您可能还想看到这个：如何在 Safari/Chrome 中从 javascript 打印 IFrame
回答by MRRaja
function closePrint () {
document.body.removeChild(this.__container__);
}
function setPrint () {
this.contentWindow.__container__ = this;
this.contentWindow.onbeforeunload = closePrint;
this.contentWindow.onafterprint = closePrint;
this.contentWindow.focus(); // Required for IE
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);
}
Then use
然后使用
onclick="printPage('print_url');"
回答by Scipius2012
You can use the JQuery printPage plugin (https://github.com/posabsolute/jQuery-printPage-plugin). This plugin works fine and you can simply print an external html page.
您可以使用 JQuery 打印页面插件 ( https://github.com/posabsolute/jQuery-printPage-plugin)。这个插件工作正常，你可以简单地打印一个外部 html 页面。
Example:
例子：
<html>
<head>
<title>Index</title>
<script src="http://www.position-absolute.com/creation/print/jquery.min.js" type="text/javascript"></script>
<script src="http://www.position-absolute.com/creation/print/jquery.printPage.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$(".btnPrint").printPage();
});
</script>
</head>
<body>
<input type="button" id="printerButton" name="print" value="Print It" />
<p><a class="btnPrint" href='iframe.html'>Print!</a></p>
</body>
</html>
