使用 Javascript 打印外部 HTML 文件

Question

我在index.html上有一個“打印”按鈕。 打印print.html文件需要什么代碼？ 我的意思是，當我按下index.html的按鈕時，打印頁面print.html 。

Answer 1

我認為您正在尋找window.print()

更新

剛剛注意到您已經在其中指定了文件名，並且您希望在單擊index.html上的按鈕時打印print.html 。 沒有內置的方法可以做到這一點（從某種意義上說，您不能將任何 arguments 傳遞給window.print()以指示要打印的文檔）。 您可以做的是將要打印的文檔加載到 iframe 或打開新的 window 並在加載時調用該容器上的window.print() 。

以下是一些討論同一件事的論壇帖子和 web 頁面：

更新 2

這是一些快速而骯臟的代碼 - 請注意，這只有在您的兩個頁面都在同一個域中時才有效。 此外，Firefox 似乎也會觸發空 iframe 的load事件 - 因此打印對話框將在加載時立即顯示，即使沒有為 iframe 設置src值。

索引.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>

打印.html

<html> 
<head> 
    <title>To Print</title> 
</head> 
<body> 
    Lorem Ipsum - this is print.html
</body>
</html>

更新 3
您可能還想看到這個：如何在 Safari/Chrome 中從 javascript 打印 IFrame

Answer 2

您可以使用 JQuery printPage 插件（ https://github.com/posabsolute/jQuery-printPage-plugin ）。 這個插件工作正常，你可以簡單地打印一個外部 html 頁面。

例子：

 <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);
}

然后使用

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