Window.print not working for print graph - javascript

I have one page where I use java script and css to show graph.When I try to print graph using div content and opening new window it does not work.
Below is screenshot of graph page and print window
I have tried to put css before printing and also added bootstrap js but stil not work.
Below is code that I copy form stackoverflow and modify as I require.Thanks.
function printDiv() {
debugger;
var printContents = $('body').clone().find('script').remove().end().html();
// get all <links> and remove all the <script>'s from the header that could run on the new window
var allLinks = $('head').clone().find('script').remove().end().html();
var js = "";
js += "#Html.Raw(string.Format("<script src='/SkillsAssessmentModule/Scripts/bootbox.min.js'/>"))";
// open a new window
var popupWin = window.open('', '_blank');
// ready for writing
popupWin.document.open();
// -webkit-print-color-adjust to keep colors for the printing version
var keepColors = '<style>body {-webkit-print-color-adjust: exact !important; }</style>';
// writing
// onload="window.print()" to print straigthaway
popupWin.document.write('<html><head>' + keepColors + allLinks + '</head><body>' + document.getElementById("lProgress").innerHTML + js + '</body></html>');
popupWin.print();
// close for writing
popupWin.document.close();
setTimeout(function () { popupWin.close(); }, 1);
}
</script>
}

Related

Angular 4 print preview in new tab

I am working on angular4 print functionality and i want to open print preview in new tab by default along with print popup window. I am not able to figure out how to pass data from parent window to child window to do the same. Can someone suggest something?
Use Following Code :
This will open this page in another tab and will open print pop up.
Page will take some time to load so use setTimeout according to your need.
var getPrint = window.open(document.URL, '_blank');
setTimeout(getPrint.print(), 3000);
Had the same situation while trying to allow user to view and print QR image in new tab. Here is how I got it done:
prepareQRForPrint(source: string) {
return "<html><head><style type='text/css' media='print'>#media print { #page { size: auto; margin: 0;} body { margin:1.6cm; } }</style><script>function step1(){\n" +
"setTimeout('step2()', 2);}\n" +
"function step2(){window.print();window.close()}\n" +
"</scri" + "pt></head><body onload='step1()'>\n" +
"<img style='width:800px;height:1000px;' src='" + source + "' /></body></html>"
}
printPreviewQR(source: string) {
let Pagelink = "about:blank";
var pwa = window.open(Pagelink, "_new");
pwa.document.open();
pwa.document.write(this.prepareQRForPrint(source));
pwa.document.close();
}
And invoked as:
QR-Code
This will work in Angular 12
/*
Use ViewChild to reference the element that contains the content that should be printed.
*/
#ViewChild('PackageSlipPrint', { static: true }) printableRef?: ElementRef;
print() {
var printdata = this.docRef.nativeElement.outerHTML;
var tab = window.open('') as Window;
tab.document.open();
tab.document.write(printdata);
setTimeout(() => {
tab.stop();
tab.print();
tab.close();
}, 300);
}

Angularjs after modifying the body of the page functions no longer work

After try printing a specific area of the page. the functions stop working after print is close.
Can anyone help?
$scope.printContent = function(){
var restorePage = $(document.body).html();
var printContent = $('#PrintArea').html();
$(document.body).html(printContent);
window.print();
$(document.body).html(restorePage);
};

Chrome print blank page

I have an old javascript code to print images, if a user clicks on the thumbnail. It used to work just fine, but lately (only in Chrome!) there is a blank page in preview.
Here is a demonstration in JsBin: http://jsbin.com/yehefuwaso/7
Click the printer icon. Now try it in Firefox; it will work as expected.
Chrome: 41.0.2272.89 m
Firefox: 30.0, 36.0.1
function newWindow(src){
win = window.open("","","width=600,height=600");
var doc = win.document;
// init head
var head = doc.getElementsByTagName("head")[0];
// create title
var title = doc.createElement("title");
title.text = "Child Window";
head.appendChild(title);
// create script
var code = "function printFunction() { window.focus(); window.print(); }";
var script = doc.createElement("script");
script.text = code;
script.type = "text/javascript";
head.appendChild(script);
// init body
var body = doc.body;
//image
doc.write('<img src="'+src+'" width="300">');
//chrome
if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) {
win.printFunction();
} else {
win.document.close();
win.focus();
win.print();
win.close();
}
}
It looks like it's attempting to print before the <img> has loaded, move the call to print inside an event handler for the load event of window by opening the link as a data URI or Blob, for example
var code = '\
<html>\
<head>\
<title></title>\
<script>\
function printFunction() {\
window.focus();\
window.print();\
window.close();\
}\
window.addEventListener(\'load\', printFunction);\
</script>\
</head>\
<body><img src="'+src+'" width="300"></body>\
</html>';
window.open('data:text/html,' + code, '_blank', 'width=600,height=600');
Don't forget you may need to HTML encode the tags in code
You could probably just listen for load on the <img> instead, but if you ever do anything more complicated than tring to print a single image you may find it breaks again in future
doc.write('<img onload="printFunction();" src="'+src+'" width="300">');
Where printFunction is the print function for all browsers
I encountered the same problem in Chrome. You can try these approaches, the first one worked for me. setTimeout didn't work for me (had to edit this later).
function printDiv(divName) {
var printContents = document.getElementById(divName).innerHTML;
w = window.open();
w.document.write(printContents);
w.document.write('<scr' + 'ipt type="text/javascript">' + 'window.onload = function() { window.print(); window.close(); };' + '</sc' + 'ript>');
w.document.close(); // necessary for IE >= 10
w.focus(); // necessary for IE >= 10
return true;
}
setTimeout:
<div id="printableArea">
<h1>Print me</h1>
</div>
<input type="button" onclick="printDiv('printableArea')" value="print a div!" />
function printDiv(divName) {
var printContents = document.getElementById(divName).innerHTML;
w = window.open();
w.document.write(printContents);
w.document.close(); // necessary for IE >= 10
w.focus(); // necessary for IE >= 10
setTimeout(function () { // necessary for Chrome
w.print();
w.close();
}, 0);
return true;
}
You need to wait for the image to finish loading:
var img = new Image();
img.src = src;
img.style.width = '300px';
img.onload = function(){
doc.write(img);
};

Print a document with JavaScript

I want to open a print dialog for a file(docx,pdf,...) via a SharePoint Workflow. There I call a URL with GET and pass the URL of the file after the ? like this:
http://www.sharepoint_intranet.com/print.html?link-to-file.pdf
EDIT: I also tried:
<script type="text/javascript">
//Get the URL of the file
var urlOfFile = window.location.search.replace("?", "");
document.write("<iframe id=" + "printDocument" + " src=" + "'" + urlOfFile + "'" + " width=" + "600" + " height=" + "400" + "></iframe>");
window.frames['printDocument'].focus();
window.frames['printDocument'].print();
</script>
The Print Dialog is opening and in the print options there is the Point "Only selected Frame" selected but when I press the print button nothing will happen.
Thanks for any help!
you can put in the body of the html
<body onLoad="window.print();">
so the page is opened already prints the document.
The issue is that the new url doesn't start loading until the current script block has finished executing. Therefore when you call w.print(), the new window is currently blank.
Try:
<script type="text/javascript">
//Get the URL of the file
var urlOfFile = window.location.search.replace("?", "");
//print
var w = window.open(urlOfFile);
w.onload = function() {
w.print();
}
</script>
EDIT: I didn't read the question properly! The above technique only works for html. The way to solve this is to use an iframe and if we are using an iframe we might as well dispense with the popups entirely. The following code creates an iframe with a source set to the desired document, attaches the iframe to the page (but keeps it invisible), prints the contents of the iframe and finally removes the iframe once we've finished with it. Only tested in Chrome but I'm fairly confident that it'll work in other browsers.
<script type="text/javascript">
//Get the URL of the file
var urlOfFile = window.location.search.replace("?", "");
//print
var iframe = document.createElement('iframe');
iframe.src = urlOfFile;
iframe.style.display = "none";
var iFrameLoaded = function() {
iframe.contentWindow.print();
iframe.parentNode.removeChild(iframe);
};
if (iframe.attachEvent) iframe.attachEvent('onload', iFrameLoaded); // for IE
else if(iframe.addEventListener) iframe.addEventListener('load', iFrameLoaded, false); // for most other browsers
else iframe.onload = iFrameLoaded; // just in case there's a browser not covered by the first two
window.onload = function() {
document.body.appendChild(iframe);
};
</script>
where we can give the path of the file like("abc.doc"/"abc.xls")
var urlOfFile = window.location.search.replace("?", "");

Displaying the content of an external file within jQuery modal

I work with a simple modal to understand how jQuery modal works. With this process
var load = 'alert.html'; // THE PURPOSE OF THIS QUESTION IS TO CHANGE "alert.html" to "image.jpg"
$(this).click(function(e) {
e.preventDefault();
$('body').append('<div id="overlay" />');
$('#overlay').fadeIn(300, function() {
$('body').append('<div id="alertModalOuter"><div id="alertModal"></div></div>');
var outer = $('#alertModalOuter');
var modal = $('#alertModal');
var defWidth = outer.outerWidth();
var defHeight = outer.outerHeight();
modal.load(load + ' #alert', function() {
var alertBoxContent = $('#alert');
var alertWidth = alertBoxContent.outerWidth();
var alertHeight = alertBoxContent.outerHeight();
var widthCombine = -((defWidth + alertWidth) / 2);
var heightCombine = -((defHeight + alertHeight) / 2);
modal.animate({width: alertWidth, height: alertHeight}, 200);
outer.animate({marginLeft: widthCombine, marginTop: heightCombine}, 200, function() {
alertBoxContent.fadeIn(200, function() {
});
});
});
This appends the content of an external file come (from load) to the modal windows; but this only works for the content within tag of id="alert". How can I remove the role of "alert" to display the entire content of external file. For example, I want to load an external image (which is an image file and not between "alert" tag).
You don't have to specify the #alert selector and it'll load the whole page. It's worth noting that if you don't specify a selector, then load calls .html() and processes all the scripts before removing them. You may have some scripts running giving you unexpected results. The .load() docs

Categories