resize window.print() screen in javascript - javascript

I am using onclick="window.print()" on button print. Now the print screen overlaps the current screen. So I need to reduce the size of the print screen. I cannot use JQuery as there is no specific #id, the whole page has to be printed.

You can't crop printing area, but you can define a CSS style different for printing.
https://www.arclab.com/en/webformbuilder/how-to-print-a-specific-part-of-a-html-page-css-media-screen-print.html

Related

Printed Output Dependent on Window Size

As the title suggests, I'm working on a project and need to have print capability on a specific page. This page is 90% text. Changing the window size affects the size of the content printed on each page. This is odd because I'm already using an #print media query in my stylesheet.
In other words, when inspecting the print dialog while the window is at full width, the preview shows small print and all the content is stretched out across the page. When halving the screen size and again inspecting the print dialog, the content and text become bigger and better fit the page. This behavior persists even when I change the unit of measurement for font-size from px to pt.
Put simply, the size of the printed output is responsive to the size of the window. Is this normal / to be expected? Is there a way around this? I don't see this behavior on other sites. I would think that whether you attempt to print at full window size of half window size, the size of the printed content should be the same.
Either use a printing stylsheet as explained by mdn
<link href="/path/to/print.css" media="print" rel="stylesheet" />
or use a print media query css selector in your regular stylesheet.
#media print {
/* set a constant font size, width and height, hide toolbars etc */
}

Any way to do page breaks with javascript (print media)?

Browser support for page-break-inside: avoid is poor. There are lots of scenarios where it's not applied. In my case it's a nested flexbox with flex-wrap.
Is there any way to add a page break using javascript?
I can detect if the browser is in print mode with onbeforeprint event in FF, or window.watchMedia on Chrome, but what next?
I guess I need to find out what's the printed page size in pixels, so I can determine the position where to insert the page break. But window.screen.availHeight returns the same value and window.print.availHeight does not exist :(
Assuming this is possible somehow, how do I do the page break then?
You can try a calculation, A4 has a certain proportion between width and height, so simply said if your print css makes the html/body 900px width. The height for each print page can be calculated by using the A4 proportions.
So you can add a print css file that changes the layout so that the content that needs to be on the next page has a margin top.

WebPage Prints in two print pages

I want to print a page on my website via javascript, but it prints in two pages instead of one. What should I change?
All my CSS is inline.
window.print();
Here is my HTML: JSFiddle
Its only table based, but it still is not working. There is no height assigned to it.
A screen has 72ppi, creating things in HTML sticks to this rule as it is on screen so the only thing you can really do is reduce the amount that's in your table or print-screen your table and print it as an image so you can re-size it.

Window.print() scaling of page content?

Hey all I am running into an issue trying to print out an image on a page. I'm using the simple Window.print() method in javascript to get this done however in the print preview the image doesn't maintain its border. I can mess with the margin settings in the print dialog that shows up but I can't ever get the whole border to show up.
Does the method autoscale images or something? I'm not sure why it would change the border setting on that image.
The window.print() method doesn't autoscale or modify document in any way. Consider adding a Print CSS (try this tool) to get this right for the printed format without affecting what's already being displayed on the screen.

is it possible to print the contents of a div on an A4 using its whole width?

I want to print the contents of a div(a table containing info) using jquery. I was wondering if it's possible to resize the table in order to use the whole A4s width.
Thanks a lot
Do you mean you want to use a bleed to print right up to the edge of the page, or to simply have your navigation and other elements disappear so the width can take up the whole printing area (but still have page margins)?
I don't believe browsers support full bleed printing.
However, if you just want to use the full area with margins, most browsers should auto-size to the largest element on the page. So, use a print stylesheet.
For testing, Firebug can conveniently show the print view in the browser, or you can simply remove the media="print"
Hide other elements and make the div take up the full width of the viewport
Make sure to use width:auto; on that for best results. Since paper and screen are very different proportions, you don't want the browser mistakenly sizing-down your text because both are defined in pixels and it thinks you want it to preserve proportions.

Categories