使用 Javascript 打印外部 HTML 文件

Question

I have a "print" button on index.html .我在index.html上有一个“打印”按钮。 What code do I need to print the print.html file?打印print.html文件需要什么代码？ I mean, when I press the button from index.html , print the page print.html .我的意思是，当我按下index.html的按钮时，打印页面print.html 。

Answer 1

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.html when a button on index.html is clicked.刚刚注意到您已经在其中指定了文件名，并且您希望在单击index.html上的按钮时打印print.html 。 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).没有内置的方法可以做到这一点（从某种意义上说，您不能将任何 arguments 传递给window.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.您可以做的是将要打印的文档加载到 iframe 或打开新的 window 并在加载时调用该容器上的window.print() 。

Here are some forum posts and web pages that talk about the same thing:以下是一些讨论同一件事的论坛帖子和 web 页面：

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 load event for an empty iframe also - so the print dialog will be displayed immediately on load, even when no src value was set for the iframe.此外，Firefox 似乎也会触发空 iframe 的load事件 - 因此打印对话框将在加载时立即显示，即使没有为 iframe 设置src值。

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更新 3
You might also want to see this: How do I print an IFrame from javascript in Safari/Chrome您可能还想看到这个：如何在 Safari/Chrome 中从 javascript 打印 IFrame

Answer 2

You can use the JQuery printPage plugin ( https://github.com/posabsolute/jQuery-printPage-plugin ).您可以使用 JQuery printPage 插件（ https://github.com/posabsolute/jQuery-printPage-plugin ）。 This plugin works fine and you can simply print an external html page.这个插件工作正常，你可以简单地打印一个外部 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>

Answer 3

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');"

使用 Javascript 打印外部 HTML 文件

问题描述

3 个解决方案

解决方案1
2 2011-05-29 16:23:41

解决方案2
1 2014-03-28 09:01:36

解决方案3
1 2017-11-17 21:40:38

使用 Javascript 打印外部 HTML 文件

问题描述

3 个解决方案

解决方案1 2 2011-05-29 16:23:41

解决方案2 1 2014-03-28 09:01:36

解决方案3 1 2017-11-17 21:40:38

解决方案1
2 2011-05-29 16:23:41

解决方案2
1 2014-03-28 09:01:36

解决方案3
1 2017-11-17 21:40:38