Printing pages on different Browsers - javascript

I'm encountering a lot of problems with printing on a rather huge website we are working on.
The problem is there are issues in FF, IE etc... that appear only when printing.
The workflow is like this: I click a print button on the page, a popup opens with different template and styles and the window.print command is triggered.
MY POSSIBLE SOLUTION:
When the popup opens, I will render the entire DOM in a canvas element and then put it back in page as a png file, and then trigger the print action.
Is this a feasible solution?

You can approach this in two ways:
Browser extension
Writing an extension for the browser(s) (at least Chrome and FireFox) will allow you to grab the current content as a bitmap you can use with canvas.
This is probably the fastest option as the screen snapshot is created internally. Though, I am not sure if the browser snapshots client window or the full document so this need to be determined.
Simulate the DOM tree
There are libraries such as html2canvas and canvas2image that simulates the DOM tree and tries to render an approximate representation of the web page.
There a couple of things to notice with this:
It's relatively slow
You may run into cross-origin restrictions in relation to images (work around is to use an image proxy)
You cannot get content of "foreign objects" (Flash, Java etc.)
It is not 100% accurate (if this matters)
When you have a snapshot one way or the other the other things should be straight forward. Just remember that users have different printers, drivers and resolutions and you may not be able to produce identical results cross-over as you are also dependent on the browser's own print implementation.

provide special css for print view:
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
in which for everything you dont want to print use something like:
#qqq, .#aaa, #header, ...., ...., .banner{
display: none;
height: 0;
width: 0;
}
so you leave only content you want to see printed. In this case visitor or you dont need to use special print popup version. Just click print.
example: http://viliusle.github.io/miniPaint/ - only canvas will be printed.

Related

Remove "connecting to..." messages from browser/firefox

My website project uses html, PHP, javascript, css and mysql. My page is always fullscreen. (so no browser bars etc) Everything that is being displayed, is controled by my code. However...
My page reloads a php page in an iframe every 0.5 seconds. (and more might be added) When the page is loading, I get a "connecting with 192.168.XXX.XXX", or something scimilar, in the left bottom of my full screen. How do I disable these kinds of messages?
Most of my buttons are already javascript functions, since they have to do multiple things, but with a href=, I also get that same display in the bottom of my browser. This really screws up my full-screen layout.
Things I've tryed: google, and changing z-index of my images, in the hopes it would cover up this "connecting with" info box.
I would like to get a CSS/javascript solution for this problem. If I need to change browser settings with the "about:config" page in firefox, that is also fine.
*PS: English isn't my native language, and my browser is also in another language then english. Tryed to find a solution on google, but could not get any relevant info, not even the name of that bar.
As far as I know, it isn't possible to fix this problem using any code on my web page. It is browser related.
Finding some help at the mozillazine.org forums, got me to some good search queries.
If you want to remove the status bar (that's what it's called), you can use the plugin "Status-4-evar". It gets you the ability to turn back time, and get some lost functionality back into firefox. It also allows you to disable the status bar. However... When in full-screen, firefox (version 43.something) then puts back the unwanted status bar, even if the plugin/add-on should have blocked it.
Second solution should be to create a userChrome.css file, and put it in some directory in your firefox profile. Finding this directory using the mozilla KB was really frustrating, since it isn't correct/out of date.
Correct location for your userChrome.css file should be:
C:\Users\XXXX\AppData\Roaming\Mozilla\Firefox\Profiles*random string*.default\chrome\
c:\users\XXXXX\ could be different on other windows versions. The chrome folder might not excist, so just create it.
Then create the userChrome.css file, if it does not excist already, and add the following tekst:
#namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */
.statuspanel-label {background:#FF9!important;color:black!important;font-family:"DejaVu Sans Mono"}
statuspanel {display:none!important}
statuspanel {max-width:90%!important}
statuspanel[type="overLink"] .statuspanel-label
statuspanel[type="status"] .statuspanel-label[value^="Looking"]
statuspanel[type="status"] .statuspanel-label[value^="Connect"]
statuspanel[type="status"] .statuspanel-label[value^="Waiting"]
statuspanel[type="status"] .statuspanel-label[value^="Transfer"]
After having done that, restart your firefox, and all status bar messages will be removed, even in full-screen.

window.print() displays my content differently in 3 different browsers

I'm trying to adjust a set of divs to fit the "Avery" business-card printer paper. What this thing does it allows the user to print out the content of a dynamic number of divs (as business-card shaped) unto a specific type of paper to easily separate the pieces post-printing.
My problem is that every browser displays the "window.print()" content differently. If I try to set up the divs to fit the printer-paper under Chrome (for example) it won't work well if the user prints the same document from Opera or Firefox.
I tried three browsers so far (Opera, Firefox and Chrome), and each one of them displays the content slightly differently. The problem with this is that I can't control which browser the end-users will utilize when printing.
Is there a way to create a file that is read equally from any browser? I know the pdf is suppose to do that, but is there a way to dynamically generate a pdf in js or jquery?
Thanks much in advance.
You can use jsPDF
http://jquer.in/random-jquery-plugins-for-superior-websites/jspdf/
See live example:
http://parall.ax/products/jspdf

How do I make a html page printable without reloading/refreshing the data?

I have a small html/css site powered by jQuery, generated with PHP, you can see it in action here.
All the idea about the site is that once loaded, it works without the internet connection, if the browser supports javascript, that is.
You can see it has a PRINT button ready, but it doesn't work yet. I want to make it work, but I'm not sure what is the best approach, or any approach, thereof.
I need to print the content area only, that means the header (song title) and the paragraph (song lyrics). Probably add a header/footer to the paper, so that the site name is printed too.
On other sites it usually works in the way that the PRINT button opens up a new window, which loads for example /print.php?id=40, but I don't really want to do that here, as it requires an active internet connection.
In case the print feature cannot be done without an internet connection, an answer which at least describes on how to best approach this with reloading the site will still be acceptable.
Use a print stylesheet to specify element visibility for printing.
<link rel="stylesheet" type="text/css" href="styles/print.css" media="print">
... and in print.css
#hideThisElementInPrint,
.andThisOneToo {
display: none;
}

How can I disable print-screen functionality for a webpage in all browsers?

Using the following we can disable print-screens or screenshots in Internet Explorer:
<body onload=setInterval("window.clipboardData.setData('text','')",2)
oncontextmenu="return false" onselectstart="return false">
But these don't work in Mozilla, Chrome and other browsers.
Is there a better way to disable print-screens/screenshots?
What makes you think it's your decision if people should be able to take screenshots or not?
Luckily no browser but IE allows you to access the clipboard via JavaScript so you are out of luck :)
By the way, if I visited your site and it messed up my clipboard (it overwrites anything in there, even if it's unrelated to your site) - I might have stored something in it that I've just cut from some file and I was going to paste in a different file and thanks to your site it would now be lost.
So, the conclusion is: Stop doing crap like that.
It's an O.S. function, as well as a page function, and a print function so there are a few things you need to do - The steps below are specific for windows, however can be implemented in any O.S. with the same concept -
Disable the print screen at an O.S. Level
Here are the steps of disable Print Screen key:
1.Copy the following registry to notepad and saved as a .reg file.
Windows Registry Editor Version 5.00
[HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\Keyboard Layout]
"Scancode Map"=hex:00,00,00,00,00,00,00,00,04,00,00,00,00,00,2a,e0,00,00,37,e0,\
00,00,54,00,00,00,00,00
2.Apply the registry
3.Sign out and sign in again.
Then you need to block the browsers capability of capturing screens in the cases where chrome or edge or firefox have extensions that enhance print screens -
And for extra measure, disable right click (I put it on document but you can put it per DOM
document.addEventListener('contextmenu',
event => event.preventDefault());
window.addEventListener("keyup",kPress,false);
function kPress(e)
{
var c=e.keyCode||e.charCode;
if (c==44) event.preventDefault();
}
Then as an extra, to disable printing and items, you need to mark the print media as display none
#media print {
.noprint {
visibility: hidden;
}
}
And if you want to be POPIA/GDPR compliant, you have to disable things like pdf download, object references and things so as a bonus item, Use PDF.js to render the pdf as html with full control over the rendering of the PDF, download and printing using the above
This reference allows password entries and successfully gave us full control over all features for capturing or saving information from protected sites
https://usefulangle.com/post/22/pdfjs-tutorial-2-viewing-a-password-protected-pdf
window.addEventListener("keyup",kPress,false);
function kPress(e)
{
var c=e.keyCode||e.charCode;
if (c==44) alert("print screen");
}

How to detect whether UA is capable of displaying content inline

Browsers can display certain media inline, and will provided they are sent with content-disposition: inline. What's the best way to detect whether the browser is capable of doing so with a particular type of media?
I am running into the question lately with PDFs and Mac/FF, which seems to refuse to display PDFs inline (actually, in iFrame), instead prompting a download. I don't mind the forced download; I'd just like to be able to anticipate it so that I can give the end user a nice "download" link rather than an iFrame that fails at displaying inline content. My current solution is just browser detection (sample code below), but surely there must be a better mode.
var isMacFF = window.navigator.userAgent.search(/Mozilla.*Mac/i) != -1
This doesn't directly answer the question, but something you need to be aware when analyzing any answer you get - you can NOT reliably 100% determine that due to assorted browser plug-ins.
Specifically, in case of FireFox, look at PDF Downloader as an example - it basically allows the user 100% full control over how PDF gets displayed.

Categories