I am using the following code for printing a div in a new window:
$('#PrintNews').bind('click', function () {
var approot = '<%=AppRoot %>';
var printContents = new $("#divToPrint").clone();
var myWindow = window.open("", "popup", "width=800,height=600,scrollbars=yes,resizable=yes," +
"toolbar=no,directories=no,location=no,menubar=no,status=no,left=250px,top=80px");
var doc = myWindow.document;
doc.open();
$(printContents).find("#PrintNews").remove();
$(printContents).find("#bottom").remove();
doc.write("<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">");
doc.write("<html>");
doc.write("<head>");
doc.write("<link href='" + approot + "/Themes/print.css' rel='stylesheet' type='text/css' />");
doc.write("<link href='" + approot + "/Themes/secretaryPortal.css' rel='stylesheet' type='text/css' />");
doc.write("</head>");
doc.write("<body style='font: 11pt/1.2 Arial !important;'>");
doc.write("<div class='story'>");
doc.write($(printContents).html());
doc.write("</div>");
doc.write("</body>");
doc.write("</html>");
myWindow.document.close();
myWindow.focus();
myWindow.print();
myWindow.close();
});
});
It does open the print dialog But the page isn't with the original css.
if i change the 4 last lines to:
doc.document.close();
doc.focus();
doc.print();
doc.close();
It opens the page with the right CSS But the print dialog is not opened.
i get an error saying Uncaught TypeError: Cannot call method 'close' of undefined
I have to open it in a new window cause i need to re-size to print dialog, i am aware of #media print
in your description instead of :
doc.document.close();
doc.focus();
doc.print();
doc.close();
use:
myWindow.focus();
myWindow.print();
myWindow.close();
This is the final solution: *Thanks to Yussuf above
$('#PrintNews').bind('click', function () {
var approot = '<%=AppRoot %>';
var printContents = new $("#divToPrint").clone();
var myWindow = window.open("", "popup", "width=800,height=600,scrollbars=yes,resizable=yes," +
"toolbar=no,directories=no,location=no,menubar=no,status=no,left=250px,top=80px");
$(printContents).find("#PrintNews").remove();
$(printContents).find("#bottom").remove();
myWindow.document.write("<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">");
myWindow.document.write("<html>");
myWindow.document.write("<head>");
myWindow.document.write("<link href='" + approot + "/Themes/print.css' rel='stylesheet' type='text/css' />");
myWindow.document.write("<link href='" + approot + "/Themes/secretaryPortal.css' rel='stylesheet' type='text/css' />");
myWindow.document.write("</head>");
myWindow.document.write("<body style='font: 11pt/1.2 Arial !important;'>");
myWindow.document.write("<div class='story'>");
myWindow.document.write($(printContents).html());
myWindow.document.write("</div>");
myWindow.document.write("</body>");
myWindow.document.write("</html>");
myWindow.focus();
myWindow.print();
myWindow.close();
});
Related
I am trying to print a specific content area of my page. My problem is I have created separate CSS file for the content of this print area. But that external CSS is not working (loading) in browser print popup. I am sure file path is correct.
This is how I tried it:
function printReceipt(el) {
var docHead = "<html>\
<head>\
<title></title>\
<link rel='stylesheet' href='css/receipt-print.css' type='text/css' media='print' />\
</head>\
<body>";
var docFoot = " </body>\
</html>";
var docBody = document.getElementById(el).innerHTML;
var defaultBody = document.body.innerHTML;
document.body.innerHTML = docHead+docBody+docFoot;
//document.close();
//window.focus();
//setTimeout(function() {
window.print();
document.body.innerHTML = defaultBody;
//}, 1000);
//return true;
}
UPDATE:
Also check in this way. Problem is sill same.
function printReceipt(el) {
var w = window.open();
w.document.write('<html><head><title></title>');
w.document.write('<link rel="stylesheet" type="text/css" href="css/receipt-print.css">');
w.document.write('</head><body >');
w.document.write(document.getElementById(el).innerHTML);
w.document.write('</body></html>');
w.document.close();
w.focus();
w.print();
w.close();
return true;
}
Any ideas and suggestion would be appreciated.
The issue was you were printing the page without waiting for the styles and resources to load.
You should wait for the page to load before trying to print it or you can try using inline styles.
function printReceipt(el) {
var w = window.open();
w.document.write('<html><head><title></title>');
w.document.write('<link rel="stylesheet" type="text/css" href="css/receipt-print.css">');
w.document.write('</head><body >');
w.document.write(document.getElementById(el).innerHTML);
w.document.write('<script type="text/javascript">addEventListener("load", () => { print(); close(); })</script></body></html>');
w.document.close();
w.focus();
}
1 ) I want to dynamically create an iframe.
2 ) I have mocked data ( string templates ) for head and body tags.
3 ) I want to create the iframe with the given data from 2 )
Code
var bodyHtml = '<p>Content</p>';
var headHtml = '<title>Title</title>';
var iframe = document.createElement('iframe');
// inject the bodyHTML to locally iframe
iframe.src = 'data:text/html;charset=utf-8,' + encodeURI(bodyHtml );
// headHtml how ?
// inject my iframe in the DOM
$('mySelector').append(iframe);
How do I inject the headHtml in the iframe head tag ?
You've already done most of the work. The content of the document isn't just the body, it's the whole thing, so you build up the whole thing and then pass that to encodeURIComponent (rather than encodeURI):
var bodyHtml = '<p>Content</p>';
var headHtml = '<title>Title</title>';
var iframe = document.createElement('iframe');
// inject the bodyHTML to locally iframe
iframe.src = 'data:text/html;charset=utf-8,' + encodeURIComponent(
"<!doctype html>" +
"<html>" +
"<head>" + headHtml + "</head>" +
"<body>" + bodyHtml + "</body>" +
"</html>"
);
// inject my iframe in the DOM
$('body').append(iframe);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Or with ES2015+ syntax (in particular, a template literal):
// inject the bodyHTML to locally iframe
iframe.src = 'data:text/html;charset=utf-8,' + encodeURIComponent(`
<!doctype html>
<html>
<head>${headHtml}</head>
<body>${bodyHtml}</body>
</html>
`);
Live Example:
const bodyHtml = '<p>Content</p>';
const headHtml = '<title>Title</title>';
const iframe = document.createElement('iframe');
// inject the bodyHTML to locally iframe
iframe.src = 'data:text/html;charset=utf-8,' + encodeURIComponent(`
<!doctype html>
<html>
<head>${headHtml}</head>
<body>${bodyHtml}</body>
</html>
`);
// inject my iframe in the DOM
$('body').append(iframe);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
I want to get pictures from a local folder and post them on a webpage.
Pictures aren't loading on webpage but no errors in console.
<head>
<title> </title>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
var dir = "/Users/me/Desktop/imgtest/";
var fileextension = ".jpeg";
$.ajax({
url: dir,
success: function (data) {
$(data).find("a:contains(" + fileextension + ")").each(function () {
var filename = this.href.replace(window.location.host, "").replace("http://", "");
$("body").append("<img src='" + dir + filename + "'>");
});
}
});
</script>
</head>
<body>
This can't be running cos you page isn't loading.
You should add this script before the end of your body or use $(document).ready to be sure you page is loading before to call the Ajax script.
<script type="text/javascript">
var dir = "/Users/me/Desktop/imgtest/";
var fileextension = ".jpeg";
$(document).ready(function(){
$.ajax({
url: dir,
success: function (data) {
$(data).find("a:contains(" + fileextension + ")").each(function () {
var filename = this.href.replace(window.location.host, "").replace("http://", "");
$("body").append("<img src='" + dir + filename + "'>");
});
}
});
});
</script>
Wrap your script code in a document ready function, like so:
$(document).ready(function() {
// your code here
});
Then, run a local web server to avoid XSS issues.
I want to link css file on printing specific div but it dose not get stylesheet on printing area. How can i fix this. Here is my source code:
function print_area(){
var win = window.open('', '', 'left=0,top=0,width=800,height=900,toolbar=0,scrollbars=0,status=0');
win.document.write('<html><head><title>Print it!</title><link rel="stylesheet" type="text/css" href="css/thinking_aloud_test - Copy.css" media="print"></head><body>');
win.document.write($("#article_main_wrapper").html());
win.document.write('</body></html>');
win.print();
win.close();
}
var win = window.open('', '', 'left=0,top=0,width=800,height=900,toolbar=0,scrollbars=0,status=0');
var html = '<html><head><title>Print it!</title><link rel="stylesheet" type="text/css" href="css/thinking_aloud_test - Copy.css" media="print"></head><body>';
html += $("#article_main_wrapper").html();
html += '</body></html>';
win.print();
win.close();
win.document.write(html); // You need to append the `html` in a single element
// Write it at once to a single win.document.write
Here is an example of injecting css via javascript.
(function(d, s, id) {
var css, icss = d.getElementsByTagName(s)[0] || d.getElementsByTagName('head')[0];
if (d.getElementById(id)) {
return;
}
css = d.createElement(s);
css.id = id;
css.href = "http://getbootstrap.com/dist/css/bootstrap.min.css";
css.rel = "stylesheet";
}(document, 'link', 'bootstrap'));
<html>
<head>
</head>
<body>
<button class="btn btn-success">normal button to bootstrap button by adding css</button>
</body>
</html>
if it's for printing with a new tab where you want to append content with css and then print, just go with there steps
var content = document.createTextNode("Some HTML content you want to print");
var css = document.createElement('link');
css.rel = 'stylesheet';
css.type = 'text/css';
css.href = 'css url';
css.media = 'all';
printwindow.focus(); // if its a new tab where you want to do print operation, assuming printwindow is your new tab/popup opened by window.open()
printwindow.document.head.appendChild(css);
printwindow.document.body.appendChild(content);
printwindow.print();
printwindow.document.close();
Another possibility is to read the content of the stylesheet and write it directly into the HTML. Here an example using jQuery:
function print_area(){
var win = window.open('', '', 'left=0,top=0,width=800,height=900,toolbar=0,scrollbars=0,status=0');
$.get('main.css', function (data) {
console.log(data);
win.document.write('<html><head><title>my div</title><style>');
win.document.write(data);
win.document.write('</style></head><body >');
win.document.write('<div id="article_main_wrapper">My DIV</div>');
win.document.write('</body></html>');
win.print();
win.close();
});
}
I am having trouble getting css/js to show up on a Webview.
Here is what I am doing:
initializing the webview and engine
WebView browser = new WebView();
WebEngine webEngine = browser.getEngine();
webEngine.setJavaScriptEnabled(true);
This is where I load html content:
htmlViewImgBtn.addEventHandler(MouseEvent.MOUSE_CLICKED,
new EventHandler<MouseEven
#Override
public void handle(MouseEvent event){
if (counter == 0){
contentContainer.getChildren().addAll(browser);
webEngine.loadContent(export.getHTML(note));
//browser.getEngine().load("http://stackoverflow.com/questions/34554583/cant-load-css-js-on-javafx-webview");
contentContainer.getChildren().remove(noteContent);
counter = 1;
}
else {
contentContainer.getChildren().remove(browser);
contentContainer.getChildren().addAll(noteContent);
counter = 0;
}
}
});
Note: The commented code works when loading a website onto the webview, no issues. But Still does not work for the content I am loading.
The content (HTML) that is loaded looks looks like this:
<link href="prism.css" rel="stylesheet" type="text/css" />
<script src="prism.js" type="text/javascript"></script>
<pre><code class="language-java">System.out.println("Hello");
</code></pre>
Also, the css and js files are in the same directory as the java file
I can confirm that the html works by loading it on a web browser, What am I missing?
Blockquote
I was able to get it working by modifying the html as such:
"<link href=\"" + getClass().getResource("./prism.css") + "\"" + " rel=\"stylesheet\"" + " type=\"text/css\"" + " />\n" +
"<script src=\"" + getClass().getResource("./prism.js") + "\"" + " type=\"text/javascript\"" + "></script>\n" +
(rest of html);
You can use ResourceLoader to load HTML, js and css which are located in the same directory as the Java class.
URL url = getClass().getResource("index.html");
webEngine.load(url.toExternalForm());