Copy content from a div + styles to a new window - javascript

I'm trying to copy the content from a div, create new window and put the content inside.
The code is working, but is not getting the styles. How can I copy all the styles references from source page?
Ps.: I'm using bootstrap + react
function PrintElem() {
var nWindow = window.open('', 'PRINT', 'height=400,width=600');
let content = document.getElementById('printablediv').innerHTML;
content.print();
nWindow.document.write('<html><head><title>' + document.title + '</title>');
nWindow.document.write('</head><body >');
nWindow.document.write(content);
nWindow.document.write('</body></html>');
nWindow.document.close();
nWindow.focus();
nWindow.print();
}

I have discovered how: You need to copy the header properties. It's where the css references stay.
export const PrintElement = (item) => {
var nWindow = window.open('', 'PRINT', 'height=400,width=600');
let element = document.getElementById(item);
let header = document.getElementsByTagName('head');
nWindow.document.write('<html>');
nWindow.document.write('<header>');
for (let headItem of header) {
nWindow.document.write(headItem.outerHTML);
}
nWindow.document.write('</header>');
nWindow.document.write('<body >');
nWindow.document.write(element.outerHTML);
nWindow.document.write('</body></html>');
nWindow.document.close();
nWindow.focus();
nWindow.print();
}

Related

How to print a div content with jquery? (Make sure Printed content will be in colored form.)

I want to print a div element. I have a function that prints a div. But I want to print a div content with css.
function printDiv() {
var divContents = document.getElementById("mymodelid").innerHTML;
var a = window.open('', '', 'height=600, width=700');
a.document.write('<html>');
a.document.write(divContents);
a.document.write('</body></html>');
a.document.close();
a.print();
}
This code will help you to print a div. But if you want to print it with CSS, you must use #media rules in CSS.
function printDiv()
{
var divToPrint=document.getElementById('mymodelid');
var newWin=window.open('','Print-Window');
newWin.document.open();
newWin.document.write('<html><body onload="window.print()">'+divToPrint.innerHTML+'</body></html>');
newWin.document.close();
setTimeout(function(){newWin.close();},10);
}
Use #media print in CSS file like below:
#media print {
.mymodelid {background-color:#FF00FF;}
}
if it doesn't work, you should change your browser options and check the "Background graphics".
As sajadre said, I would also suggest to use createElement().
To change the font color, you could use the method fontColor() (be aware that it is deprecated):
function printDiv() {
const el = document.createElement('div');
el.innerHTML = 'Hello World';
var divContents = el.innerHTML.fontcolor("red");
var a = window.open('', '', 'height=600, width=700');
a.document.write('<html>');
a.document.write(divContents);
a.document.write('</body></html>');
a.document.close();
a.print();
}

How to style div classes that are stored in a JS variable?

I am trying to print a series of divs shown on a page. The divs are stored in a parent ('printDialog') and is being stored as 'prtContent', to be presented in a new window.
$(document).on("click","#modalBtnPrint",function() {
var prtContent = document.getElementById("printDialog").innerHTML;
var WinPrint = window.open('', '', 'right=0,top=0,width=800,height=900,toolbar=0,scrollbars=0,status=0');
if(WinPrint != null) {
WinPrint.document.write(prtContent);
}
WinPrint.focus();
WinPrint.print();
WinPrint.close();
});
My questions is:
How do you style the inner div classes while in JS? (i.e - div class="formGroup" with a border)
Edit:
With the help of T.Chmelevskij this is what I got to work:
$(document).on("click","#modalBtnPrint",function() {
var prtContent = document.getElementById("printDialog").innerHTML;
var WinPrint = window.open('', '', 'left=0,top=0,width=800,height=900,toolbar=0,scrollbars=0,status=0');
if(WinPrint != null) {
WinPrint.document.write(prtContent);
var x = WinPrint.document.querySelectorAll(".update");
for (i = 0; i < x.length; i++) {
x[i].style.borderStyle = "solid";
}
var x = WinPrint.document.querySelectorAll(".required");
for (i = 0; i < x.length; i++) {
x[i].style.fontWeight = "bold";
}
}
WinPrint.document.close();
WinPrint.focus();
WinPrint.print();
WinPrint.close();
});
Thank you everyone!
Your WinPrint variable holds reference to desired window. So something like:
WinPrint.window.document.querySelector('body').style.backgroundColor = "red";
Works.
But as #epascarello mentioned, if it's just for styling print output then css '#media' queries for printing is the best solution.
If you want to append style from a variable you can use the following code:
var style = document.createElement('style');
style = **your variable which store css**
document.head.append(style);
this will apend your css on click on button. as well as no other css can override you css.

Set og:image and twitter:image meta in wordpress articles with javascript

I'm working on a WP website, and I'm pretty new with code, so after I struggled a whole day to make it work, I just gave up, and decided to ask someone.
I used dynamic meta for all open graphs and twitter cards except image.
All the website pages have a container with an article inside; some articles have an image, and some have none. For the ones with no image, I want to use the Company logo.
So I want to use javascript to add og:image and twitter:image to wordpress, but I can't get over one error that says:
document.getElementsByTagName(" ") is not a function
//add image meta tag
addImageMetaTag();
function addImageMetaTag() {
var imgHolder = document.getElementsByTagName("article")[0];
var image = imgHolder.getElementsByTagName("img");
var source;
function getSource() {
if (image.length != 0) {
var source = image[0].getAttribute("src");
} else {
var source = "http://link_to_my_default_image.png";
}
return source;
};
var meta = document.createElement('meta');
meta.setAttribute("property", "og:image");
meta.content = source;
meta.name = "twitter:image";
document.getElementsByTagName('head')[0].appendChild(meta);
};
Gerald, open graphs and twitter cards are used to create the shared snippet, so it's got nothing to do with crawling.
You were right with your other answer, there were two errors: indeed, I used "getSource" instead of "source", but Wordpress still wouldn't find the "article" class, because the content loads after the header, so I had "var content = undefined", so I got the function working by changing it to this:
// add image meta tag
window.addEventListener("load", function() {
addImageMetaTag();
});
function addImageMetaTag() {
var content = document.getElementById("primary");
var images = content.querySelectorAll("img");
var source;
if (images.length != 0) {
var source = images[0].getAttribute("src");
}
else {
var source = "http://link_to_my_default_image.png";
}
var meta = document.createElement('meta');
meta.setAttribute("property","og:image");
meta.content = source;
meta.name = "twitter:image";
document.getElementsByTagName('head')[0].appendChild(meta);
};

Open html text in new tab using $window.open

$window.open('<span>request processed successfully</span>', '_blank');
I would like the $window service to show the simple text request processed successfully in a new tab.
But instead of it, it treats the html text as location url and tries to open the page http://domain-addr#request processed successfully
How can i pass html text argument to angular's $window service?
You can do something like this in standard JavaScript...
function newWindow() {
// create some html elements
var para = document.createElement('p');
var title = document.createElement('title');
// define some window attributes
var features = 'width=400, height=400, status=1, menubar=1, location=0, left=100, top=100';
var winName = 'New_Window';
// populate the html elements
para.textContent = 'Some example text.';
title.textContent = 'New Window Title';
// define a reference to the new window
// and open it with defined attributes
var winRef = window.open('', winName, features);
// append the html elements to the head
// and body of the new window
winRef.document.head.appendChild(title);
winRef.document.body.appendChild(para);
}
you can use pure javascript,
var w = window.open("www.mydomain.com/test.php", "_blank");
w.document.write('<span>request processed successfully</span>');
you could just create a simple html document with called success.htm or similar with "request processed successfully" and include that in the function.
so $window.open('success.html','_blank', 'size blah blah');
Try this:
HTML:
<button id="newWindow">
Click
</button>
JavaScript:
//call the function right away
(function() {
//grab button by id
var newWindow = document.getElementById("newWindow");
//add an event listener
newWindow.addEventListener("click", function() {
//create a new p element
var p = document.createElement('p');
// change the styles of your paragraph
// optional
p.style.color = "red";
p.style.fontSize = "4em";
//Insert the text you want
p.textContent = "request processed successfully";
//open the window
var windRed = window.open('', '_blank');
//append the p element to the new window's body
windRed.document.body.appendChild(p);
}, false);
})();

How can I remove a node from selected html, without removing it from the current page?

I'm using jquery to grab HTML from my page and open it in a new window to print. I have to customize some of the styles so that the formatting works when I print it. I have a table on my main page that has <colgroup> to define the width of the columns, but when I print it, I've hidden the last column (since it has a button that there's no need for on the printout, and the button throws off the formatting when printed), but the width of the column remains due to the colgroup. If I remove the colgroup from the table, the non-hidden columns fill the width and formatting is perfect. I don't know how to delete the colgroup node on my print-window though, without deleting it from the origin window (which can't happen). This is my code for printing:
var newWin;
function printDetails() {
var content = $("#pdf-area").html();
var host = window.location.protocol + "//" + window.location.host;
var cssFiles = [
host + "/Themes/MSD/Styles/template/ma-order-details-2.css",
host + "/Scripts/libraries/zurb-responsive-tables/0.0.0/responsive-tables.css",
host + "/Themes/MSD/Styles/template/checkout-cart-2.css",
host + "/Themes/MSD/Styles/msdtheme.css",
host + "/Themes/MSD/Styles/foundation.css",
host + "/Themes/MSD/Styles/base.css",
host + "/Themes/MSD/Styles/print.css"
];
newWin = window.open();
cssFiles.forEach(function (file) {
newWin.document.write('<link rel="stylesheet" href="' + file + '" type="text/css" />');
});
newWin.document.write("<span class='please-wait'>Please wait...</span>");
newWin.document.write("<div class='ma-order-details-2'>");
newWin.document.write(content);
newWin.document.write("</div>");
newWin.document.close();
newWin.focus();
setTimeout(function () {
newWin.print();
newWin.close();
}, 1000);
}
I want to delete the colgroup from content, or delete it from newWin, but I don't know how to do this. $("colgroup").remove() will delete it from the origin page, not from the new window.
Instead of removing, you could be hiding it with display:none on your print stylesheet.
#media print {
...
.colgroup {
display:none;
}
}
You should do something like this:
var newPage = $('#newWin'); //Or whatever the new page will be
var content = $("#pdf-area").clone();
newPage.html(content.find('.colgroup').remove() );
The trick is cloning the content instead of grabbing the original and storing it in a variable, then you can modify it as you wish without changing the original.

Categories

Resources