使用Javascript打印外部HTML文件

我在index.html上有一個「打印」按鈕。我需要打印print.html文件需要哪些代碼？我的意思是，當我按下從index.html的按鈕時，打印頁面print.html。使用Javascript打印外部HTML文件

2011-05-29 vladchooo

負載它的iframe？ – Thai 2011-05-29 16:00:03

空載。我需要按按鈕打印外部文件。 – vladchooo 2011-05-29 16:09:25

我認爲你正在尋找window.print()

更新

只注意到你在裏面指定的文件名並點擊index.html一個按鈕時要打印print.html 。沒有內置的方法來執行此操作（因爲您無法將任何參數傳遞給指示要打印的文檔的window.print()）。你可以做的是加載文檔打印到iframe中或打開一個新窗口並加載，在該容器上調用window.print()。

這裏有一些論壇帖子和網頁，談論同樣的事情：

更新2

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

的index.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> 
<head> 
    <title>To Print</title> 
</head> 
<body> 
    Lorem Ipsum - this is print.html 
</body> 
</html>

更新3
你可能也想看看這個：How do I print an IFrame from javascript in Safari/Chrome

來源

2011-05-29 16:23:41

你可以給代碼，因爲我是新的和...但我不希望頁面可見...只是當我按下index.html頁面上的按鈕打印。HTML被打印... – vladchooo 2011-05-29 16:29:56

我不認爲所有的瀏覽器都會允許這樣做 - 這可能是一個安全問題。我正在更新答案，請在幾分鐘內查看。 – 2011-05-29 16:45:45

至於使內容打印不可見，您可以使用CSS對新窗口或iFrame進行樣式設置，使其隱藏或尺寸非常小 - 請注意，瀏覽器可能會使窗口小於特定尺寸。我建議使用一個iFrame。 – 2011-05-29 16:48:33

您可以使用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>

來源

2014-03-28 09:01:36 Scipius2012

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

來源

2017-11-17 21:40:38 MRRaja

使用Javascript打印外部HTML文件

回答

相關問題