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

【问题标题】：Open in new window to add print page functionality在新窗口中打开以添加打印页面功能
【发布时间】：2016-01-27 00:51:10
【问题描述】：

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

到目前为止，我可以使用以下代码在点击实际页面的打印图标时打开一个新窗口：

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

【问题讨论】：

标签： javascript .net html css printing

【解决方案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 --> 打印 div id

【讨论】：

对您的答案进行一些解释会很有用

【解决方案2】：

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

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

}

【讨论】：

嗨，最终目标并非如此。如果您浏览handelsblatt.com/unternehmen/handel-konsumgueter/… 在左侧，您会看到一个名为Media Markt 的图像，其左侧有三个图标。如果您将鼠标悬停在第二个图标上，它会显示“druken”。单击此图标，将打开一个新窗口，其中包含一些内容和标题中的“druken”按钮。单击此按钮后，将打开打印对话框。我想实现类似的功能。
我认为您尝试做的实际上与handelsblatt 所做的不同。他们使用服务器端调用返回可打印页面。为了证明这一点，只需导航到此链接 (handelsblatt.com/unternehmen/handel-konsumgueter/…)。他们真正做的似乎只是 window.open('handelsblatt.com/unternehmen/handel-konsumgueter/…)
我同意。但是他们如何从实际页面（handelsblatt.com/unternehmen/handel-konsumgueter/…）创建这样的可打印页面（handelsblatt.com/unternehmen/handel-konsumgueter/…）是我关心的问题，也是我目前卡住的地方
我认为你看错了。您不需要从实际页面创建可打印页面，您需要在您的网站上创建另一个页面，该页面减少的内容量足以打印，就像“实际”页面一样从服务器提取数据。