如何使用javascript从div中选择打印所选内容?

时间:2011-12-09 01:42:21

标签: javascript jsf html printing

我在div区有一些内容。我想从div打印输出所选内容。 在我的javsscript中,

例如,如果我从div内容中选择 3行,打印后 ,我会将3行内容视为单行。不是 3 行。

我的代码

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"> 
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%@ taglib uri="http://richfaces.org/rich" prefix="rich" %>
<%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%>

<f:view>
    <html>
        <head>
           <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">


            function printPartialContent(divContentId)
            {
                var selectedContent = "";
                selectedContent= document.getSelection();

                var textPopupWindow = window.open('','popup','toolbar=no,menubar=no,width=1,height=1 left=-5000');
                textPopupWindow.document.open();
                textPopupWindow.document.write(makeTextPrint(selectedContent));
                textPopupWindow.document.close();
            }

            function makeTextPrint(textContent)
            {
                // We break the closing script tag in half to prevent
                // the HTML parser from seeing it as a part of
                // the *main* page.

                return  "<html>\n" +
                    "<head>\n" +
                    "<script>\n" +
                    "function step1() {\n" +
                    "  setTimeout('step2()', 10);\n" +
                    "}\n" +
                    "function step2() {\n" +
                    "  window.print();\n" +
                    "  window.close();\n" +
                    "}\n" +
                    "</scr" + "ipt>\n" +
                    "</head>\n" +
                    "<body onLoad='step1()'>\n" +
                    textContent +
                    "</body>\n" +
                    "</html>\n";
            }

        </script>
    </head>
 <body>
        <h:form id="parameterform">

            <rich:panel id="divPanelPanel">

                <f:facet name="header">
                    <h:outputText value="Div Content Demo"/>
                </f:facet>

                <a4j:outputPanel id="divOutputPanel">


                    <div id="contentDivId" style="text-align:left">

                        ******* Details 1 *******<br>
                        28/02/2011 08.19.00<br>
                        5641620100333718 566<br>
                        Value: 2000<br>
                        Counter : 123<br>  
                        ******* Details 2 *******<br>
                        16/10/2000 9.10.00<br>
                        56345345333718<br>
                        Value: 3000<br>
                        Counter : 765<br>                          
                    </div>

<a4j:commandButton value="Partial Content" 
onclick="printPartialContent('contentDivId')"/>


                 </a4j:outputPanel>

            </rich:panel>
</h:form
</body> </html></f:view>

帮帮我。 提前致谢

1 个答案:

答案 0 :(得分:1)

document.getSelection()将所选文本作为纯文本而不是HTML返回,因此当您将选择输出到打印窗口/ div时,您所拥有的任何格式都将丢失。 要将文字复制为HTML,请查看HTML of selected textGetting selected text in a browser, cross-platform