How to keep page design when I print it new tab Jquery? - javascript

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();

Related

CSS does not apply to printed document

I am using the following code to print a document:
function print(html) {
$('<iframe>', {
name: 'myiframe',
class: 'printFrame'
}).appendTo('body').contents().find('body').append(html);
window.frames['myiframe'].focus();
window.frames['myiframe'].print();
setTimeout(() => { $(".printFrame").remove(); }, 1000);
}
var html = '<head>' +
'<link rel="stylesheet" href="/static/css/main.css" type="text/css" media="print">' +
'<link rel="stylesheet" href="/static/css/vahan.css" type="text/css" media="print">' +
'</head>' +
'<body>' +
'<div>Test</div>' +
'</body>';
print(html);
The problem is that I see pure html without any of css applied. There's definitely something simple that I can't figure out. Any hints?
You need to first append the html to the document before you can add the iframe.
function print(html) {
// Add the html
document.innerHTML = html
// Append the iframe to the body
$('<iframe>', {
name: 'myiframe',
class: 'printFrame'
}).appendTo('body').contents();
window.frames['myiframe'].focus();
window.frames['myiframe'].print();
setTimeout(() = > {
$(".printFrame").remove();
}, 1000);
}

Print in angularjs

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>');

Remove the link tag if it contains a particular string - javascript

I need to strip all the tags containing a specific string,
How can I achieve this in javascript?
this is the string
<link rel="stylesheet" href="https://REMOVEME">
<link rel="stylesheet" href="https://ccc">
<link rel="stylesheet" href="https://abc/REMOVEME">
<div>yes</div>
and this the result
<link rel="stylesheet" href="https://ccc">
<div>yes</div>
Such tasks are better not done with regular expressions.
Instead use the DOM interface available to JavaScript, for instance with this ES6 function:
function removeLinks(html, match) {
var container = document.createElement('span');
container.innerHTML = html;
Array.from(container.querySelectorAll('link[href*=' + CSS.escape(match) + ']'))
.forEach( link => link.parentNode.removeChild(link) );
return container.innerHTML;
}
// Sample input
var html = '<link rel="stylesheet" href="https://REMOVEME">' +
'<link rel="stylesheet" href="https://ccc">' +
'<link rel="stylesheet" href="https://abc/REMOVEME">' +
'<div>yes</div>';
// Remove links that match REMOVEME
html = removeLinks(html, 'REMOVEME');
// Output result
console.log(html);
htmlString.replace(/<link[^>]*href="[^>]*REMOVEME[^>]*"[^>]*>/gi,'')

Bootstrap table pagination and searching is not working

I am new to bootstrap and working in D3.js, crossfilter.js to generate the table contents. I like to get the dataTable as in the following URL with some pagination and searching with in the datatable using bootstrap.
In that example the table is statically defined with id and class. I am able to run the html page with the desired output as in the example page source code.
But in my case I am generating a table from function and not able to get the pagination and searchBox on top of the table. I added all the supported files such as js and css files.
Here is my code and I just reduced the code to avoid more spaces in this portal. May I know where I am doing mistake.
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=us-ascii">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>DataTables example - Bootstrap</title>
<link rel="shortcut icon" type="image/png" href="/media/images/favicon.png">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/plug-ins/380cb78f450/integration/bootstrap/3/dataTables.bootstrap.css" />
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://cdn.datatables.net/1.10.3/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/plug-ins/380cb78f450/integration/bootstrap/3/dataTables.bootstrap.js"></script>
</head>
<body>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/d3/2.10.0/d3.v2.min.js"></script>
<script type='text/javascript' src="crossfilter.js"></script>
<div id="Default" class="default"></div>
<script>
$(document).ready(function () {
$('#example').dataTable();
$('#Default').show();
});
d3.json("myJson.json", function (desing) {
var data = desing;
var ndx = crossfilter(data);
var state1 = ndx.dimension(function (d) {return d.region;});
var dist1 = ndx.dimension(function (d) { return d.cluster;});
var taluk1 = ndx.dimension(function (d) { return d.center;});
var village1 = ndx.dimension(function (d) { return d.loan_type_id;});
cfds = ndx.dimension(function (d) {return d.region; });
$("#Default").html(totable(cfds.top(Infinity)));
cfds.filterAll();
});
function totable(json) {
var html = "";
html += "<thead>"
html += "<tr>"
html += "<th>REGION</th>"
html += "<th>CLUSTER</th>"
html += "<th>CENTER</th>"
html += "<th>GLP MONTH</th>"
html += "<th>LOAN AMT DISBURSED</th>"
html += "<th>NEW MEMBERS</th>"
html += "<th>DEMAND</th>"
html += "<th>PRINCIPAL</th>"
html += "<th>INTEREST</th>"
html += "<th>WRITTEN OFF</th>"
html += "<th>HM-PROCESSED</th>"
html += "<th>HM-ELIGIBLE</th>"
html += "<th>Eligible %</th>"
html += "<th>LOAN TYPE</th>"
html += "</tr>"
html += "</thead>"
json.forEach(function (row) {
html += "<tr role='row'>";
for (key in row) {
html += "<td>" + row[key] + "</td>";
};
html += "</tr>";
});
return "<table id='example' class='table table-striped table-bordered' cellspacing='0' width='100%' role='grid' aria-describedby='example_info'>" + html + "</table>";
}
</script>
</body>
</html>
It is working after I put the supported js files has been defined upon the end of the body tag.Also I initiate the dataTable under d3 function. All goes well now.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="http://cdn.datatables.net/1.10.3/js/jquery.dataTables.min.js"></script>
</body>
</html>
Hope its useful for someone..

How to append straight markup to HEAD without jQuery?

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.

Categories