在新窗口中打開添加打印頁面功能

我想將打印頁面功能添加到我的網站。當前行爲：頁腳中有一個打印圖標，當我點擊打印圖標時，它直接打開打印機對話框。而不是這個，新的預期行爲是：當我點擊打印圖標 - >它打開當前頁面的內容在一個新的窗口與單獨的頁眉和頁腳。標題中應該有一個新的「打印」按鈕。當我點擊標題中的「打印」按鈕時，打印對話框應該打開。在新窗口中打開添加打印頁面功能

截至目前，我能夠上點擊打開一個新的窗口，使用下面的代碼實際頁的打印圖標：

var printLinks = {}; 

printLinks.init = function() { 
    $('body').on('click', '.js-print-link', function(e) { 
      myWin = window.open('', '_blank', 'resizable,scrollbars,status'); 
      myWin.document.write("<p>Test</p>"); 
      myWin.document.close(); 
      myWin.focus(); 
      e.preventDefault(); 
    }); 
};

但當前頁面的內容沒有被顯示在新窗口。我應該在document.write（）方法而不是Test中寫什麼？請幫忙。

來源

2015-10-27 Natasha Batra

<script type = "text/javascript"> 
     function CallPrint(strid1) { 
      var prtContent1 = document.getElementById(strid1); 
      var prtContent2 = document.getElementById(strid2); 
      <%-- var prtContent1 = document.getElementById("<%=UserDetails1.ClientID %>"); 
      var prtContent2 = document.getElementById("<%=UserDetails2.ClientID %>");--%> 
     <%--  document.getElementById('<%=UserDetails1.ClientID%>');--%> 
      <%-- var prtContent1 = document.getElementById('<%=MasterPage2.FindControl("UserDetails1").ClientID %>'); 
      var prtContent2 = document.getElementById('<%=MasterPage2.FindControl("UserDetails2").ClientID %>'); 
      var WinPrint = window.open('', '', 'letf=10,top=10,width="450",height="250",toolbar=1,scrollbars=1,status=1'); 

      //WinPrint.document.write("<html><div>UserDetails1</div><body>"); 
      //WinPrint.document.write("<html><body>"); 
      WinPrint.document.write(prtContent1.innerHTML); 
      WinPrint.document.write(prtContent2.innerHTML); 
      //WinPrint.document.write("</body></html>"); 
      WinPrint.document.close(); 
      WinPrint.focus(); 
      WinPrint.print(); 
      WinPrint.close(); 

      return false; 
     } 
    </script> 


<input name="b_print" type="button" class="ipt" onclick="return CallPrint('UserDetails');" value=" Peerint ">

userdeatils - >打印DIV ID

來源

2015-10-27 14:56:33

一些解釋你的回答將是有益的 – Muds

如果你的最終目標是打印不同的頁眉和頁腳的頁面的內容，我建議你看看使用@media查詢在你的CSS展現並在Print上隱藏元素。正如您在下面看到的，.header_print和.footer_print將保持隱藏狀態，直到您執行Ctrl + P或window.print（）;使用這種方法，您不必創建另一個打印窗口。

@media print { 
.header, .footer { 
    display:none; 
} 
.header_print, .footer_print { 
    display: block; 
}

}

來源

2015-10-27 15:03:06 Vadim

嗨，最終的目的卻並非如此。如果你瀏覽http://www.handelsblatt.com/unternehmen/handel-konsumgueter/umsatzminus-zum-trotz-metro-bleibt-bei-gewinnprognose/12467366.html在左邊你會看到一個名爲Media的圖像Markt和左邊有三個圖標。如果你懸停在第二個圖標上，它會顯示「drucken」。點擊這個圖標，會打開一個新窗口，其中有一些內容和標題中的「drucken」按鈕。點擊此按鈕後，打印對話框打開。我想實現類似的功能。 –

我認爲你想要做的事實際上與handelsblatt完成的不同。他們使用服務器端調用返回可打印頁面。爲了證明這一點，只需導航到此鏈接（http://www.handelsblatt.com/unternehmen/handel-konsumgueter/umsatzminus-zum-trotz-metro-bleibt-bei-gewinnprognose/v_detail_tab_print/12467366.html）。他們真正所做的只是window.open（'http://www.handelsblatt.com/unternehmen/handel-konsumgueter/umsatzminus-zum-trotz-metro-bleibt-bei-gewinnprognose/v_detail_tab_print/12467366.html'） – Vadim

我同意。但他們如何從實際頁面（http）創建這樣的可打印頁面（http://www.handelsblatt.com/unternehmen/handel-konsumgueter/umsatzminus-zum-trotz-metro-bleibt-bei-gewinnprognose/v_detail_tab_print/12467366.html）：//www.handelsblatt.com/unternehmen/handel-konsumgueter/umsatzminus-zum-trotz-metro-bleibt-bei-gewinnprognose/12467366.html）是我的顧慮，也是我目前卡住的地方 –

在新窗口中打開添加打印頁面功能

回答

相關問題