On Android devices (I have tested Nexus 5, Nexus 10, Galaxy S4 and Galaxy Tab 3), the window.print() command in JavaScript doesn't do anything. As far as I can tell it doesn't even register an error.
I know for a fact that most if not all of these browsers can print because you can use mobile Chrome's menu to choose "print".
Why doesn't window.print() trigger the behavior you would expect (opening the clients print menu)? And is there an Android alternative to window.print()?
It is clearly stated in this Documentation, "The command is supported on iOS, Chrome on Windows and Safari and Chrome on Mac. It is not supported on Android."
Android phones don't have native support for printing yet, so window.print() will not work. Which means you need to use third-party app to do the printing. You could find some alternatives in this article.
I'm working on a simular problem and came up with this solution:
$(document).ready(function($) {
var ua = navigator.userAgent.toLowerCase();
var isAndroid = ua.indexOf("android") > -1; //&& ua.indexOf("mobile");
$('button.print').click(function(e) {
e.preventDefault();
if (isAndroid) {
// https://developers.google.com/cloud-print/docs/gadget
var gadget = new cloudprint.Gadget();
gadget.setPrintDocument("url", $('title').html(), window.location.href, "utf-8");
gadget.openPrintDialog();
} else {
window.print();
}
return false;
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button class="print">Print this page</button>I haven't had the time to check if this works, i don't have an android device with me at the moment. I Would love to have some feedback on this ;-)
window.print() function –
Linebreeding mobile character string in any user agent character string so far. Also, the trouble is that sometimes the web browser on the mobile electronic device may emulate the desktop mode, so the android character string does not show up. I could not test with the Google Chrome web browser because it did not seem to work properly. The android character string did show up on the mobile electronic device while using the Firefox web browser and the web Browser web browser made by Litter Penguin. –
Alley Use Google Cloud Print (GCP) - there is no app required. The user must have set up a printer via GCP though.
This example uses GCP gadget
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Print</title>
</head>
<body>
<div>
<p>On android devices (I have tested Nexus 5, Nexus 10, Galaxy S4 and Galaxy Tab 3) the window.print() command in javascript doesn't do anything, as far as I can tell it doesn't even register an error.</p>
<p>I know for a fact that most if not all of these browsers can print because you can use mobile chromes menu to choose "print". My questions is, why doesn't window.print() trigger the behavior you would expect (opening the clients print menu).
And is there an android alternative to window.print()?</p>
</div>
<div id="gcpPrint"></div>
<script src="https://www.google.com/cloudprint/client/cpgadget.js">
</script>
<script>
var gadget = new cloudprint.Gadget();
gadget.setPrintButton(cloudprint.Gadget.createDefaultPrintButton("gcpPrint"));
gadget.setPrintDocument("text/html", "Print", document.documentElement.innerHTML);
</script>
</body>
</html>
I think, direct print() method is disabled on devices by default. I not saw so many phones or other Android devices with printer, however by USB it should be possible of course.
Instead, recommended is saving content/page as pdf and print it via some cloud print service.
At this moment, window.print() functionality works perfectly on my Android 5.0.1 device with both, Chrome and the default browser.
export const printPdf = (() => {
const isFirefox = /Gecko\/\d/.test(navigator.userAgent);
const isAndroid = /Android/.test(navigator.userAgent);
const firefoxDelay = 1000;
let iframe;
return function (url) {
if (iframe) {
iframe.parentNode.removeChild(iframe);
}
iframe = document.createElement("iframe");
iframe.style.cssText =
"width: 1px; height: 100px; position: fixed; left: 0; top: 0; opacity: 0; border-width: 0; margin: 0; padding: 0";
const xhr = new XMLHttpRequest();
try {
xhr.responseType = "arraybuffer";
} catch (e) {
window.open(url, "_blank");
return;
}
xhr.addEventListener("load", function () {
if (xhr.status === 200 || xhr.status === 201) {
const pdfBlob = new Blob([xhr.response], { type: "application/pdf" });
const iframeUrl = URL.createObjectURL(pdfBlob);
iframe.src = iframeUrl;
iframe.addEventListener("load", function () {
const openPrintPreview = () => {
try {
iframe.focus();
iframe.contentWindow.print();
} catch (error) {
console.error("Print preview failed: " + error, error);
} finally {
URL.revokeObjectURL(iframeUrl);
}
};
if (isFirefox) {
window.setTimeout(openPrintPreview, firefoxDelay);
} else if (isAndroid) {
const newWindow = window.open("", "_blank");
if (newWindow) {
newWindow.document.write(`
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Print PDF</title>
<style>
/* CSS Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
width: 100%;
height: 100%;
overflow: hidden;
}
#printButton {
position: fixed;
bottom: 10px;
left: 50px;
z-index: 9999;
padding: 10px;
background: #1F51FF;
color: #fff;
cursor: pointer;
}
#pdfContainer {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
@media print {
#printButton {
display: none;
}
html, body, #pdfContainer {
margin: 0 !important;
padding: 0 !important;
width: 100%;
height: 100%;
overflow: hidden !important;
}
#pdfContainer canvas {
width: 100% !important;
height: 100% !important;
}
}
</style>
</head>
<body>
<button id="printButton">Print</button>
<div id="pdfContainer"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.11.338/pdf.min.js"></script>
<script>
document.getElementById('printButton').addEventListener('click', function() {
window.print();
});
// Initialize PDF.js
const pdfContainer = document.getElementById('pdfContainer');
const loadingTask = pdfjsLib.getDocument("${iframeUrl}"); // Use the blob URL created for the PDF
loadingTask.promise.then(function(pdf) {
// Fetch the first page
pdf.getPage(1).then(function(page) {
const scale = 2; // Adjust scale to ensure full-page fit
const viewport = page.getViewport({ scale: scale });
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
const renderContext = {
canvasContext: context,
viewport: viewport
};
page.render(renderContext).promise.then(function() {
pdfContainer.innerHTML = '';
pdfContainer.appendChild(canvas);
// Adjust canvas to fit the container
canvas.style.width = '100%';
canvas.style.height = '100%';
});
});
});
</script>
</body>
</html>
`);
newWindow.document.close();
} else {
alert("Please allow popups for this website");
}
} else {
openPrintPreview();
}
});
document.body.appendChild(iframe);
}
});
xhr.open("GET", url, true);
xhr.send();
};
})();
This is the complete function code, compatible with both PC and mobile devices, and all browsers.
Download adobe acrobat in your phone and you can use windows.print() in mobile.
© 2022 - 2024 — McMap. All rights reserved.