Question

我想在我的网站上添加打印页面功能。当前行为：页脚中有一个打印图标，当我点击打印图标时，它会直接打开打印机对话框。而不是这个，新的预期行为是：当我点击打印图标 - ＆gt;它在一个带有单独页眉和页脚的新窗口中打开当前页面的内容。标题中应该出现一个新的“打印”按钮。当我单击标题中的“打印”按钮时，应打开“打印”对话框。

截至目前，我可以使用以下代码点击实际页面的“打印”图标打开一个新窗口：

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中写什么？请帮忙。

Answer 1

<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 - ＆gt;打印div id

Answer 2

如果您的最终目标是使用不同的页眉和页脚打印页面内容，我建议您在css中使用@media查询来显示和隐藏Print上的元素。如下所示，.header_print和.footer_print将保持隐藏状态，直到您执行Ctrl + P或window.print（）; 使用这种方法，您永远不必创建另一个打印窗口。

var obj = { length: 0 };
Array.prototype.push.apply(obj, ["hello world"]);
console.log(obj[0]); // hello world

}

在新窗口中打开以添加打印页面功能

2 个答案: