Print selected content from Div area using javascript

Ranch Hand

Posts: 53

posted 13 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Hi,

I have some content in div area. I want to take printout the selected content from div.

In my javascript, If i select 3 lines from div content, after print out, i get the 3 line content as single line. not 3 line.

<%@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">

******* 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>

Help me,
Thanks in advance

Eswar Nec

Ranch Hand

Posts: 105

posted 13 years ago

1
Number of slices to send:

Optional 'thank-you' note:

Send

Try this

http://stackoverflow.com/questions/4176923/html-of-selected-text

I hope it help your problem.

Wake up! Don't let your smile be snatched away by anybody!
Regards, Eswar

Paul Clapham

Sheriff

Posts: 28413

102

I like...

posted 13 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Don't forget that in HTML, line-ending characters in text are treated like spaces. And two spaces together are treated like one space. This is how HTML normalizes text. So that's why your text looks like one line, because that's how HTML works.

If you want to preserve the line endings, you have two options. One is to wrap the text in a <pre> element, which causes the usual normalization rules to not be applied. You may or may not like the way that looks, though. The other option is to replace the line-ending characters by
elements, which as you know cause the text to break to the next line. Which is what you want. Make sure that those
elements are treated as HTML markup and not as text if you do that.

Java 8 (verified skill)
Skill verified by Paul Clapham

Consider Paul's rocket mass heater.