How to take print selected content from div using javascript?
Question
I have some content in div area. I want to take printout the selected content from div. In my javsscript,
For example, If i select 3 lines from div content, after print out , i get the 3 line content as single line . not 3 line.
My code
<%@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>
Help me. Thanks in advance
1 answers
solution1
1 ACCPTED 2011-12-09 02:22:29
document.getSelection() returns selected text as plain text not HTML so any formatting you have will be lost when you output the selection to your print window/div. To copy text as HTML check out HTML of selected text or Getting selected text in a browser, cross-platform
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.