I am creating a report table in my jsp which contains 60 columns. I can see all the columns by scrolling.
Now I want to print this report. The function I am using to print is
function printReport(rpt)
{
var report = document.getElementById(rpt);
var newWindow = "toolbar=no, addressbar=no, directories=no,location=no, status=yes, menubar=no, scrollbars=yes, resizable=yes, width=5000 , height=500, left=50, top=50";
var printWindow = window.open('',rpt, newWindow);
printWindow.document.write('<html><body>');
printWindow.document.write('<div id="rpt" name="rpt" style="overflow:scroll;" >');
printWindow.document.write(report.innerHTML);
printWindow.document.write('</div>');
printWindow.document.write('</body></html>');
printWindow.document.close();
printWindow.focus();
printWindow.print();
printWindow.close();
}
Now the problem is it only prints the content which is visible on screen i.e the printed paper only has around 10 columns which are visible on screen. But I want to print the remaining columns also in the next page so that whole table is printed.
Any Suggestions?
remove
style="overflow:scroll;"
or even just this (and note that I first removed the spaces in the parms and then removed most of them since they are irrelevant)
function printReport(rpt)
{
var report = document.getElementById(rpt);
var parms = "scrollbars,resizable,width=500,height=500,left=50,top=50";
var printWindow = window.open('',rpt, parms);
printWindow.document.write('<html><body onload="window.focus();window.print()">');
printWindow.document.write(report.innerHTML);
printWindow.document.write('</body></html>');
printWindow.document.close();
printWindow.close(); // not sure this is ok either.
}
UPDATE: I strongly suggest you send a PDF instead of trying to force the browser to print your page like you want
Related
I need to specify a filename when printing a page element using javascript.
Here is my code that will print the specified elementId from the page:
function printPartOfPage(elementId) {
var printHeader = document.getElementById('header');
var printContent = document.getElementById(elementId);
var windowUrl = 'NewWindow';
var uniqueName = new Date();
var windowName = 'Print' + uniqueName.getTime();
var printWindow = window.open(windowUrl, windowName, 'left=20,top=200');
printWindow.document.write('<html xmlns="http://www.w3.org/1999/xhtml"><head>');
printWindow.document.write('<link href='+sURL+'css/style.css rel="stylesheet">');
printWindow.document.write('<link href='+sURL+'css/print.css rel="stylesheet">');
printWindow.document.write('</head><body>');
printWindow.document.write(printContent.innerHTML);
printWindow.document.write('</body></html>');
printWindow.document.close();
printWindow.focus();
setTimeout(function(){
printWindow.print();
}, 500)
printWindow.setTimeout("window.close()", 2000);
}
This works fine, except that the default file name that appears in the print dialog is download.pdf and I need to specify my own file name based on parameters from the url:
https://example.com/a/b/c/123456789/2019/1
I would like to construct a file name using the last three elements of the URL such that the default file name that appears in the print dialog window is:
123456789_2019_1.pdf
Take a look at this: How to set a file name using window.open
Seems to be a work around, but a good one.
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.
This is the exact same function I am using in two different parts of my application. (Which is an Ember application). However, in the first instance, when you fire this function, the application opens a new window with the html data on it, then opens a print dialog with the options layout and paper size.
In the second instance, these options are not included. Why would this happen? Or, if there is a better way to format for printing, what am I doing wrong?
printPreview: function() { //For Printing Issue Document
var data = $('#editDoc').editable('getHTML', false, true);
data = '<div class="froala-view">' + data + '</div>';
data = '<link rel="stylesheet" href="styles/froala_editor.css"> <link rel="stylesheet" href="styles/froala_content.css"><link rel="stylesheet" href="styles/froala_style.css">' + data;
// debugger
var printWindow = window.open('', '_blank', 'width=825,height=590');
printWindow.document.write(data);
printWindow.document.close();
setTimeout(function() { //content loaded after 1 sec print will invoke
printWindow.print();
}, 1000);
},
JavaScript
function printDiv(divP) {
var win = window.open();
win.document.write($(divP).html());
win.print();
}
Here I am printing contents of a Div using Javascript.
This code opens a window along with print dialog.
How to open only the print dialog without displaying window.
Thanks for all.
Live example (clicking on the link opens a print dialog without opening a new window)
As pointed out, you can print a hidden iframe, as such refer to this:
function printDiv(divId) {
window.frames["print_frame"].document.body.innerHTML=document.getElementById(divId).innerHTML;
window.frames["print_frame"].window.focus();
window.frames["print_frame"].window.print();
}
<b>Div 3:</b> Print<br>
<div id="div3">This is the div3's print output</div>
<iframe name="print_frame" width="0" height="0" frameborder="0" src="about:blank"></iframe>
Here's some sample code showing how to print a hidden iframe
var ifr = document.createElement('iframe');
var html = '<p>hello world</p>';
ifr.src = 'about:blank';
ifr.setAttribute('style', 'display: none;');
ifr.onload = function (event) {
ifr.contentDocument.body.innerHTML = html;
ifr.contentWindow.print();
};
document.body.appendChild(ifr);
I have a page with pictures, which I want to displayed in a popup.php when clicking on them.
I want the popup window to display a picture(the one I'm clicking on), some text, and a print button.
I'm doing this on the page:
<img src="graphics/picture1.png" width="340" height="200" border="0"/>
In the JS file:
function popup()
{
window.open('popup.php', 'window', 'toolbar=no,location=no,status=no,menubar=no,scrollbars=no,resizable=no,width=520,height=400,left=350,top=100');
}
function showImg(img)
{
var imageSrc = "imageName/imagePath.png";
if(img.src != imageSrc){
img.src = imageSrc;
}
}
And in the popup.php:
<img src="graphics/picture03.png" onload="showImg(this)" />
There should be an obvious way, but I can't find it.
I would think adding the image name and text content to the URL would be the obvious way.
popup.php?image=myImage.gif&text=Say%20something%20witty%20here
Well, you'll want to have your popup contain a holder for the image (which it seems like you already have), but you'll also need to have a holder for your text. Your popup.php should have something like <div id="textHolder"></div> - then your javascript function needs to accept the appropriate text as well as populate it into the textHolder div.
I'm not sure how you're calling these JS functions, or from where - so some of the code might need to change - it should be something to the tune of....
function showImg(img, textHolderObj, text)
{
var imageSrc = "imageName/imagePath.png";
if(img.src != imageSrc){
img.src = imageSrc;
}
textHolderObj.innerHTML= text
}
If is that simple, you could create it:
var win = window.open('', 'win', 'toolbar=no,location=no,status=no,menubar=no,scrollbars=no,resizable=no,width=520,height=400,left=350,top=100');
var img = win.document.createElement('img');
img.src = 'image.png';
img.alt = 'Some text';
var label = win.document.createElement('p');
label.innerHTML = 'Some text';
var button = win.document.createElement('a');
button.href = 'javascript:window.close()';
button.innerHTML = 'Close';
win.document.body.appendChild(img);
win.document.body.appendChild(label);
win.document.body.appendChild(button);
I don't get the question too well. You want to access a function that was defined in the page that opened a popup? You should be able to use opener.showImg(this)
your popup has no idea what image you clicked on. you need to do this:
onClick="popup('imgSrc')"
and in your window reference:
window.open('popup.php?imgSrc='+imgSrc, ...
then... your popup window has to run off of url vars, but php now knows what its looking for:
<?php echo '<img src="' . $_GET["imgSrc"] . '" />'; // this is going to load the image, so you don't need the onLoad()
It is possible to create a new popup window using a variable
top.mydocument=window.open('','window','toolbar=no,location=no,
status=no,menubar=no,scrollbars=no,resizable=no,
width=520,height=400,left=350,top=100');
and then use document.write to write the content:
top.mydocument.document.write(
'<html><head></head>'
+'<body bgcolor=white onLoad="self.focus()">'
+'imageName/imagePath.png'
+'</body></html>'
)
Make sure you close it.
top.mydocument.document.close()