I need to provide a print link on my simple html page.
When the user clicks on that, I want a pop-up which displays a print preview and the system printer should come up. I guess something with window.print(); option, but this directly gives the window print option without the preview.
I want the page preview first and then call window.print(); An example html would help...
More over the example you provide can also have media type print in it. So that the normal html color looks red. But when the print link is selected we need to show print preview in blue color. I know this could be overridden methods using #media print in css file.
Any example please...Thanks
The print preview feature is client specific. The latest chrome displays a print preview but most other browsers just display the print dialog upon calling the print() method.
Concerning print styling you should read up on print stylesheets. The A-list-apart article by Eric Meyer from a few years back is a good start with some decent examples.
http://www.alistapart.com/articles/goingtoprint/
Suppose report.html is the page you want to print. Develop the page in such a way that it accepts a media argument as a GET paramater. i.e. something like yoursite.com/report.html?media=X - where X can be 'screen', 'print' etc. If X is empty, it can use the default value of 'screen'
Write 2 css files namely screen.css and print.css - Depending on this value of the media argument (X) import either screen.css or print.css into your page.
In screen.css, write your style defs inside a '#media screen' block like:
#media screen {
body {
... screen style here ...
}
}
In print.css, write your style defs inside a '#media screen, print' block like:
#media screen, print {
body {
... print style here ...
}
}
In your report.html, suppose you have a print button, in its onclick, call window.open('report.html?media=print', ...). Also do the same from a keydown handler attached to your document object on receiving a Ctrl+P.
Also, in your page's onload, check if the media argument is 'print' and if it is then call window.print() after a short delay (say 500ms), i.e. something like:
if(window.location.href.indexOf('media=print')!=-1) {
setTimeout(function() { window.print(); }, 500);
}
Related
In my ASP.NET MVC View I wrote the following code to print the content of my web page.
var newWindow = window.open();
newWindow.document.write()
newWindow.document.write(document.getElementById("sbmtform").innerHTML);
newWindow.print();
I have another div that i want to be printed on next page in the same document. Please guide how to add pages or how can i go the the next page and write my content.
You can add a CSS directive:
#media print {
.mynewpage {page-break-after: always;}
}
and in HTML
<br class="mynewpage">
See also https://www.w3schools.com/cssref/pr_print_pagebb.asp
If you don't have CSS, you can also do:
<br style="page-break-after: always;">
Not sure why you wish your end-users to print the entire web page with all UI controls. Consider using a specific reporting tool to generate and print data-based documents.
I am using the code below to save the webContents view into PDF file.
saveReport() {
const remote = require('electron').remote;
const webContents = remote.getCurrentWebContents();
webContents.printToPDF({
pageSize: 'A3',
landscape: false
}, (err, data) => {
remote.require('fs')
.writeFile(TEMP_URL, data);
});
},
The view is a report and have a really long content inside it (see below).
Instead of showing a full view, I see a partial view inside a single page with a scrollbar. Below is the screenshot for the generated PDF,
Expected behavior
Just like a real browser, the generated PDF should contain all the view if a single page does not provide enough space, multiple pages should be generated.
I am thinking probably something wrong with my css.
I had a similar requirement for my current project and i've noticed that when you use this api , you can customize how the pdf will be rendered by adding a css file to your main html with the media query set to print media="print".
this css stylesheet will be applied only if you print something or export it to pdf via the api method printToPdf().
if you are using some ui kit like photon or bootstrap , try to disable it and see if it helps.
last tip: try to use the css property page-break-before: always;
Hope this helps
I need to take a webpage and, when the user either clicks file > print or [cmd + p], duplicate an article (HTML) and place the new article adjacent to the original article. The idea is to show a list online, and then print from the webpage a 2-up paper version that can be cut in half: 2 identical lists, one sheet of paper. I'm using print style sheets for the custom paper layout, and I'm using jquery to duplicate the HTML.
The part that I'm stuck on is how to duplicate right before the user sees the print dialog box. I don't want there to be two identical articles on the webpage by default. I'd also want to remove the duplicate article after printing is done, but that's maybe not as important.
<script>
/* instead of window.onclick, is there an "on print" function? */
window.onclick = function() {
var $newArticle = $('article').clone();
$($newArticle).css({'margin-left':'1.3cm'});
$($newArticle).insertAfter("article");
}
</script>
thanks for any suggestions.
I don't want there to be two identical articles on the webpage by default.
No need for JavaScript! Have the article twice in the page and initially hide one with CSS:
article.copy {
display: none;
}
Then, with another CSS rule, show the article on the print page:
#media print {
article.copy {
display: block;
}
}
DEMO
Mode information on#media and a tutorial. Unfortunately #media doesn't seem to work in IE8 and below.
I'm trying to print (via a printer) two or more div's, each to its own page. I'm trying out different plugins, including printArea.
I've tried something along the lines of :
this.$el.find(".print").map(function () {
$(this).printArea();
});
in Chrome it brings up the print dialog twice, once for each div, but in Firefox, it just prints the last div. (Granted, I'm printing to a file instead of via a printer...)
Showing the dialog twice is acceptable, though it would be nice to break it into two pages beforehand. And also - how would I get this working in Firefox?
Thanks!
Instead of trying fancy plugins, why not use a page break?
#media print {
.print {
page-break-after: always;
}
}
I would like to have alternate behavior during a print stylesheet on a web page. Something along the lines of:
If this page is being printed, don't
bother calling SWFObject to summon an
.swf into existence. Just leave the
HTML that the Flash will replace.
I've tried things like setting a known element to a known style that exists for the screen but not for the print stylesheet. But getting a "style" via Javascript doesn't get a computed style.
Summary: In a cross-browser way, is it possible to tell which stylesheet is in effect?
It sounds like you're confused that print style-sheets are used when you view a printer-friendly page, but that is not the case. A print style sheet isn't applied until the user actually sends the page to the printer. At this point, any javascript that is going to run has already finished.
What you want to do is put your SWFObject inside a div container, and have the container styled as display:none; for the print media.
You could use JavaScript to access the stylesheets in the document and then check if the 'Print' stylesheet is active. Once you determined which CSS is active then you could manage your content.
The getActiveStyleSheet function would looks something like this:
function getActiveStyleSheet()
{
var i, a;
for (i = 0; (a = document.getElementsByTagName("link")[i]); i++)
{
if (a.getAttribute("rel").indexOf("style") != -1
&& a.getAttribute("title")
&& !a.disabled)
return a.getAttribute("title");
}
return null;
}
You can find the code here: http://www.alistapart.com/articles/alternate/.