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

[英]Open in new window to add print page functionality


I want to add print page functionality to my website. Current behavior : There is a print icon in footer, when I click on print icon it directly opens up printer dialog box. Instead of this, new expected behavior is: when i click on Print icon -> It opens the contents of current page in a new window with separate header and footer. a new "Print" button should be present in the header. When i click on "Print" button present in header, Print dialog box should open up.

我想在我的網站上添加打印頁面功能。當前行為:頁腳中有一個打印圖標,當我點擊打印圖標時,它會直接打開打印機對話框。而不是這個,新的預期行為是:當我點擊打印圖標 - >它在一個帶有單獨頁眉和頁腳的新窗口中打開當前頁面的內容。標題中應該出現一個新的“打印”按鈕。當我點擊標題中的“打印”按鈕時,應打開“打印”對話框。

As of now i am able to open a new window on click on Print icon of actual page using following code :

截至目前,我可以使用以下代碼點擊實際頁面的打印圖標打開一個新窗口:

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

But the content of current page is not being displayed in new window. What should i write in document.write() method instead of Test? Please help.

但是當前頁面的內容沒有在新窗口中顯示。我應該在document.write()方法而不是Test中寫什么?請幫忙。

2 个解决方案

#1


0  

<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 --> print div id

userdeatils - > print div id

#2


0  

If your ultimate goal is to print the content of the page with different header and footer, I suggest you look at using @media query in your css to show and hide elements on Print. As you see below, the .header_print and .footer_print will remain hidden until you do a Ctrl+P or window.print(); With this approach, you never have to create another window for printing.

如果您的最終目標是使用不同的頁眉和頁腳打印頁面內容,我建議您在css中使用@media查詢來顯示和隱藏Print上的元素。如下所示,.header_print和.footer_print將保持隱藏狀態,直到您執行Ctrl + P或window.print();使用這種方法,您永遠不必創建另一個打印窗口。

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

}


注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:https://www.itdaan.com/blog/2015/10/27/72532d29858b2304bd80e174423d5329.html



 
粤ICP备14056181号  © 2014-2021 ITdaan.com