I wrote the below code to print the screen. It is working fine. And it is opening the pdf file also. But behind the pdf file one window is opening. that window will open when we press on pdf file. The problem with that pdf behind window is it is becoming editable. How to remove the behind window.
angular.element('#hideLeftLinks').addClass("no-print");
var printContents = angular.element('#Print').html();
var popupWin = window.open('', '_blank', 'width=1000,height=1000');
popupWin.document.open();
popupWin.document.write('<html><head><link rel="stylesheet" type="text/css" href="css/Copyofstyles.css" /></head><body onload="window.print()">' + printContents + '</body></html>');
popupWin.document.close();
popupWin.innerHTML='';
angular.element('#hideLeftLinks').removeClass("no-print");
You should check this answer. I tested myself and it seems that the answer is the only one working answer for now. I removed onload="window.print()" and added <script>window.print(); setTimeout(window.close, 0);</script> and it worked. No need for popupWin.document.close(); and probably popupWin.innerHTML=''; too. So, replace below three lines
popupWin.document.write('<html><head><link rel="stylesheet" type="text/css"
href="css/Copyofstyles.css" /></head><body onload="window.print()">' + printContents +
'</body></html>');
popupWin.document.close();
popupWin.innerHTML='';
to
popupWin.document.write('<html><head><link rel="stylesheet" type="text/css"
href="css/Copyofstyles.css" /></head><body>' + printContents +
'<script>window.print(); setTimeout(window.close, 0);</script></body></html>');
Related
I use this function to make print
function printContent(el,tble,img) {
var printcontent = document.getElementById(el).innerHTML
+" <div class='row'><span class='glyphicon glyphicon-tasks'></span><b></b></div>"
+ document.getElementById(tble).innerHTML
+ document.getElementById(img).innerHTML;
var w = window.open();
$(w.document.body).html(printcontent);
w.print();
}
this works fine for me but the problem is it didn't contain the same page design and the print page has no design
please help
You should use a link in the head of your page:
<link rel="stylesheet" type="text/css" media="print" href="style.css">
Note the media attribute.
Edit:
var bodyContent = document.getElementById(el).innerHTML
+" <div class='row'><span class='glyphicon glyphicon-tasks'></span><b></b></div>"
+ document.getElementById(tble).innerHTML
+ document.getElementById(img).innerHTML;
var windowHTML = '<html><head><title>Print page</title><link rel="stylesheet" type="text/css" media="print" href="style.css"></head><body>' + bodyContent + '</body>';
var w = window.open();
w.document.write(windowHTML);
w.print();
I'm currently trying to copy a div to another browser tab with the events still working.
I found ways to do this on the same tab, but not for a different one, for example:
https://api.jquery.com/clone/
jQuery: clone elements AND events
Here's my approach:
var newWindow;
if (navigator.userAgent.match(/msie|trident/i))
{
newWindow = window.open("", "_blank");
}
else
{
newWindow = window.open("about:blank", "_blank");
}
var currentDate = moment().format(L11n.get(".dateTimeFormat"));
var printDate = L11n.get(".printDate") + " " + currentDate;
var cssUrl = $app.appRoot + "rt/main.css";
var jsUrl = $app.appRoot + "app/main.js";
var d3Url = $app.appRoot + "pub/d3.js";
var title = L11n.get(".contractDetail");
var start = "<!DOCTYPE html> \
<html xmlns=\"http://www.w3.org/1999/xhtml\" style=\"height: 100%;\"> \
<head id=\"Head1\"> \
<title>" + title + "<\/title> \
<link href=\"" + cssUrl + "\" rel=\"stylesheet\" type=\"text/css\" /> \
<script src=\"" + jsUrl + "\" language=\"javascript\" type=\"text/javascript\"></script> \
<script src=\"" + d3Url + "\" language=\"javascript\" type=\"text/javascript\"></script> \
<script src=\"pub/jquery.js\" language=\"javascript\" type=\"text/javascript\" /></script> \
<body class=\"detailTabsView limitWidthPrint\" style=\"margin-bottom: 0; margin-top: 0; height: auto;\"> \
<div class =\"detailPrintHeader\">" + printDate + "</div>\
<div class =\"detailContainer\">";
var end = "<\/div><\/body><\/html>";
newWindow.document.write(start + detailHtmlString + end);
newWindow.document.close();
//newWindow.document.$("#dashboardFrame").replaceWith($(".ALL #dashboardFrame").clone(true));
var dash = $(".ALL #dashboardFrame").clone(true, true);
$(newWindow).load(function ()
{
console.log("loaded");
$(newWindow.document.body).find("#dashboardFrame").replaceWith(dash);
});
$(newWindow.document).ready(function ()
{
console.log("ready");
});
newWindow.focus();
The interesting part is this:
var dash = $(".ALL #dashboardFrame").clone(true, true);
$(newWindow).load(function ()
{
console.log("loaded");
$(newWindow.document.body).find("#dashboardFrame").replaceWith(dash);
});
Further explanation:
I have a webapp that, for example, shows a diagram made with D3 (Data-driven-documents). It also shows other information, split up into a tab pane. That diagram has some datapoints that show a tooltip when the user hovers over them.
The app also has a button that opens the current tab in a new window. The tooltips don't work on that new window, but it would be nice if they would.
Edit:
Simple example:
Tab A = source tab, with a button in it that has a click-event bound to it. The event reads, let's say the current time and writes it to an alert box.
Then I open a new tab with javascript, let's call it Tab B. When Tab B is loaded, I want to append the button from Tab A to the body of Tab B. The event on the button still has to work in Tab B.
TL:DR:
You can only solve this by re-binding the events on the new tab in the
ready event
I tried that with this piece of code. You have to pass the event-handler within that piece of code (sry for the long-line-example). Just copy that snipped into your dev-console, paste and run it. You will get an alert();
var newWindow = window.open('about:blank', '_blank');
newWindow.document.write('<!doctype html><html><head><title>Test</title><script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script><script type="text/javascript">$(document).ready(function() { $(window).load(function(e) { alert(\'onload\'); }); });</script><script type="text/javascript">function onload() {alert("load");}</script></head><body><div>Test</div></body></html>');
newWindow.document.close();
You can't get the event from another tab. That's browser restriction. You can use an iFrame for that.
Edit:
As I said you can use an iFrame to retrieve the loaded message. But it also should be possible within a new tab. There is a window.postMessage method in HTML5. You can see which browsers are supportet on caniuse.com. You may also have a very brief look at David Walsh's site. He explains how to use it.
I do not have ressources right now. But you can simple "google" it. Or test it otherwise within your developer console to access a variable declared in windowA on windowB. The result will be undefined
Edit part 2: I don't think it is possible without having a script-ressource or a inline JavaScript in the DOM.
See example:
<!doctype html>
<html>
<head>
<title>Test</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#test_button').bind('click', function (e) {
alert('Button was clicked!');
e.preventDefault();
});
$(window).load(function (e) {
var body = '<!doctype html><html><head><title>Test2</title><scr' + 'ipt type=\'text/javascript\' src=\'https://code.jquery.com/jquery-2.1.4.min.js\'></scr' + 'ipt></head><body id="body">' + $('#test_button').clone(true, true).attr({'id': 'test2_button', 'data-time': new Date()}).wrap("<div />").parent().html() + '</body></html>';
console.log(body);
var newWindow = window.open('about:blank', '_blank');
newWindow.document.write(body);
//newWindow.document.write('<!doctype html><html><head><title>Test2</title><scr' + 'ipt type=\'text/javascript\' src=\'https://code.jquery.com/jquery-2.1.4.min.js\'></scr' + 'ipt></head><body>' + + '</body></html>');
newWindow.document.close();
});
});
</script>
<body>
<div id="test">
<button id="test_button">Test-Button</button>
</div>
</body>
</html>
I just copy the #test_button into the new window. As a new window is opened a new DOM is generated without the JavaScript event (bind) of the #test_button.
If you append the JavaScript for event-handling you can of course copy your hole content into a new tab/window. Just move your event-bindings into a JavaScript file and append it like I did with the jQuery-file.
Furthermore you just can open the new tab programmatically within your existing tab as you can't access the other tabs ressource (DOM).
You can pass a parameter as well if you like. Just add a param to the open. See other SO-question.
If it helped to clearify your question please feel free to mark this one as answer.
Edit 3
I hope I got it right this time! Try this one:
JavaScript-file (e. g. test.js)
$(document).ready(function () {
console.log('ready');
$('#test_button').bind('click', function (e) {
alert('Button was clicked!');
e.preventDefault();
});
})
HTML-file
<!doctype html>
<html>
<head>
<title>Test</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="test.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(window).load(function (e) {
var body = '<!doctype html><html><head><title>Test2</title><scr' + 'ipt type=\'text/javascript\' src=\'https://code.jquery.com/jquery-2.1.4.min.js\'></scr' + 'ipt><scr' + 'ipt type=\'text/javascript\' src=\'test.js\'></scr' + 'ipt></head><body id="body">' + $('#test_button').clone(true, true).attr({'data-time': new Date()}).wrap("<div />").parent().html() + '</body></html>';
console.log(body);
var newWindow = window.open('about:blank', '_blank');
newWindow.document.write(body);
//newWindow.document.write('<!doctype html><html><head><title>Test2</title><scr' + 'ipt type=\'text/javascript\' src=\'https://code.jquery.com/jquery-2.1.4.min.js\'></scr' + 'ipt></head><body>' + + '</body></html>');
newWindow.document.close();
});
});
</script>
<body>
<div id="test">
<button id="test_button">Test-Button</button>
</div>
</body>
</html>
So I'm trying to make a custom BBCode for my forum that will properly color coding by it's language. It works great but it's appearing completely inline and doesn't line break at all like it should.
Here is the coding:
<head>
<link rel="stylesheet" type="text/css" href="http://z3.ifrm.com/63/1/0/p509771/prism.css" />
<body>
<script type="text/javascript">
function addLang(nClass, nName) {
$('blockquote dt:contains(' + nClass + ')').parents('blockquote').find('code').addClass('language-' + nClass);
$('blockquote dt:contains(' + nClass + ')').text('Code: ' + nName);
}
addLang('css', 'CSS');
addLang('javascript', 'JavaScript');
addLang('php', 'PHP');
addLang('sql', 'SQL');
addLang('c++', 'C++');
addLang('c#', 'C#');
addLang('python', 'Python');
addLang('java', 'Java');
</script>
<script type="text/javascript" src="http://z3.ifrm.com/63/1/0/p509772/prism.js"></script>
Here is how it appears: http://i.imgur.com/I67HO7I.png
Here is an example of how I want it to appear: http://i.imgur.com/7kjlrxD.png
I have a string containing HTML for stylesheets (created via the Rails asset pipeline), and I need to append this to the head and have the stylesheets actually load, in all major browsers. The string looks like this:
<link href="https://www.v.me/assets/core-28020ec7a202f8bc47a5d70d5aeb8477.css" media="screen" rel="stylesheet" type="text/css" />
<link href="https://www.v.me/assets/widgets-d4c93376a05ffe6d726371b89bc58731.css" media="screen" rel="stylesheet" type="text/css" />
<link href="https://www.v.me/assets/flowplayer-minimalist-3254ab41f4865c79282728f0012bb98d.css" media="screen" rel="stylesheet" type="text/css" />
<link href="https://www.v.me/assets/main-12765c4980ba6d109852c52830b34586.css" media="screen" rel="stylesheet" type="text/css" />
I need to do this without using jQuery. Is this possible?
I wish I had the URLs in an array, but I don't. As a last resort, I could consider using a regex to parse out the URLs, but I'd like to avoid this.
var pHead = document.getElementsByTagName('head')[0];
pHead.innerHTML = pHead.innerHTML + assetsString;
If CSSTags is a string containing the HTML for all your link tags then you can use:
document.getElementsByTagName('head')[0].innerHTML += CSSTags;
function addLink(linkURL,rel,type,media){
var link = document.createElement('link');
link.href = linkURL;
link.rel = rel? rel: 'stylesheet';
link.media = media ? media: 'screen';
link.type = type ? type: 'text/css';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(link, s)
}
addLink('https://www.v.me/assets/core-28020ec7a202f8bc47a5d70d5aeb8477.css')
There are few things which might be not obvious here, like inserting after the script tag instead of body or head. Refer here for more information
You could try this:
document.head.innerHTML +=
'<link href="https://www.v.me/assets/core-28020ec7a202f8bc47a5d70d5aeb8477.css" media="screen" rel="stylesheet" type="text/css" />'
+'<link href="https://www.v.me/assets/widgets-d4c93376a05ffe6d726371b89bc58731.css" media="screen" rel="stylesheet" type="text/css" />'
+'<link href="https://www.v.me/assets/flowplayer-minimalist-3254ab41f4865c79282728f0012bb98d.css" media="screen" rel="stylesheet" type="text/css" />'
+'<link href="https://www.v.me/assets/main-12765c4980ba6d109852c52830b34586.css" media="screen" rel="stylesheet" type="text/css" />'
;
For old browsers, first use
if(!document.head) document.head = document.getElementsByTagName('head')[0];
Edit: #Sriharsha warned that the code above could download again all the resources. That doesn't happen on Firefox 27, but if you want to avoid this for sure, you could use:
var tmpHead = document.implementation.createHTMLDocument().head;
tmpHead.innerHTML = myString;
for (var i=0, tmpLink; tmpLink = tmpHead.childNodes[i]; ++i) {
document.head.appendChild( tmpLink.cloneNode(false) );
}
Note that document.implementation.createHTMLDocument only works on new browsers.
Problem
We have page with form.
User fill the form and submit it.
I need to print page with data from form and some other content.
Code #1
$(document).ready(function($){
$('input[name=sumb_but]').bind('click', function(e){
e.preventDefault();
var print_text = "<p>Test " + $('#form').serialize() + "</p>";
var newWin = window.open('','printWindow','Toolbar=0,Location=0,Directories=0,Status=0,Menubar=0,Scrollbars=0,Resizable=0');
newWin.document.body.innerHTML = print_text;
newWin.print();
});
});
Cool, but:
I need specific css
Print window appear before content was loaded... ooops
Ok!
Code #2
$(document).ready(function($){
$('input[name=sumb_but]').bind('click', function(e){
e.preventDefault();
var print_text = "<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'> <html xmlns='http://www.w3.org/1999/xhtml'> <head> <meta http-equiv='Content-Type' content='text/html; charset=windows-1251' /> <title>Оформление доверенности (простая письменная форма)</title> <link rel='stylesheet' type='text/css' href='/css/print_forms/warrant.css'> </head> <body> <p>Test " + $('#form').serialize() + "</p></body><script type='text/javascript'>window.print();</script></html>";
var newWin = window.open('','printWindow','Toolbar=0,Location=0,Directories=0,Status=0,Menubar=0,Scrollbars=0,Resizable=0');
newWin.document.write(print_text);
});
});
document.write - in other case css not loading
At the and of content added "window.print()"
That works fine in all browsers, but not in IE - windows with content loading successfully without printing dialog.
I need help!
p.s.
CSS with media="print" - not good solution for this case for some reason.
$(document).ready(function($){
$('input[name=sumb_but]').bind('click', function(e){
e.preventDefault();
var print_text = "<p>Test " + $('#form').serialize() + "</p>";
var newWin = window.open('','printWindow','Toolbar=0,Location=0,Directories=0,Status=0,Menubar=0,Scrollbars=0,Resizable=0');
newWin.document.body.innerHTML = print_text;
newWin.document.body.onload = function() { newWin.print(); }
});
});
this could help