I have a dynamically generated div with certain class. I used .print() to get generated tables and lists inside that div to show nicely for printing on windows. However, this doesn't work on ipad nor on android.
Is there a better way to export generated div content onto pdf or some other way that will be displayed on windows and mobile?
_printThis: function (){
var text = $(".divClass")[0].outerHTML;
var popup = window.open("", "popup");
popup.document.body.innerHTML = text;
popup.focus(); //required for IE
if($(".divClass")){
$(".divClass").remove();
}
popup.print();
popup.close();
}
i looked at jsPDF but it cuts off my content and doesn't support CSS :(
Related
I would like to print a PDF in the browser, which was generated by my ASP.NET Core application. I have already tested countless articles and recommendations, but unfortunately there is no universal solution for all browsers.
Solutions like printing from an iframe doesn't work on iPadOS/iOS - for a document with multiple pages it prints only the first page (and the page is scaled incorrectly). The embed is not working anymore.
Print.js looks like that it is not maintained anymore and the owner has no activity on his account in the last year. Based on the issues on project, there are lot of bugs for mobile devices, which were not fixed anymore.
PDF.js from mozilla is also not working with the legacy version on iPadOS/iOS. Testing with the demo page has shown, that the printing often gets stuck. As mentioned in this ticket, the primary target is Firefox - they will not care much about issues on safari).
The only solution I can think of would be to print on desktop devices using an iframe and display the PDF on mobile devices, leaving it to the user to print it themselves. However, on iPadOS in particular, the default setting is "Request Desktop website" and Safari shows as macOS. So it is not possible to determine from the user agent whether it is an iPadOS.
Has anyone a solution for this?
<html>
<head>
<title>Print PDF using Dynamic iFrame</title>
</head>
<body>
<input type="button" id="bt"
onclick="print('../sample.pdf')"
value="Print PDF" />
</body>
<script>
let print = (doc) => {
let objFra = document.createElement('iframe'); // Create an IFrame.
objFra.style.visibility = 'hidden'; // Hide the frame.
objFra.src = doc; // Set source.
document.body.appendChild(objFra); // Add the frame to the web page.
objFra.contentWindow.focus(); // Set focus.
objFra.contentWindow.print(); // Print it.
}
// Using regular js features.
// function print(doc) {
// var objFra = document.createElement('iframe');
// objFra.style.visibility = 'hidden';
// objFra.src = doc;
// document.body.appendChild(objFra);
// objFra.contentWindow.focus();
// objFra.contentWindow.print();
// }
</script>
</html>
so i wanted to make my website load differently on desktop and mobile. The code below detects whether its loading on mobile or desktop. Is there any way i can replace the you are using moblie text to a whole new html code so that when the website loads on mobile instead of showing you are using mobile it load a new html website meant for mobile?
<script type="text/javascript">
var isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
var element = document.getElementById('html');
if (isMobile) {
element.innerHTML = "You are using Mobile";
} else {
element.innerHTML = "You are using Desktop";
}
</script>
to redirect to another html page just use window.location='https://yourmobileurl.com' in your if statement or window.location='https://yourdesktopurl.com' in the else
HOWEVER, a better way to design this is to use media queries
I'm using multiple CKeditors (latest version, 4.5.7) inside Bootstrap tabs. I want to add autogrow to the editors, so they always fit the content. I have the plugin installed and have this in my config:
config.autoGrow_minHeight = 500;
config.autoGrow_onStartup = true;
It works fine for the first (visible) editor, but when I click a tab the other editors are MASSIVE - thousands of pixels tall. As soon as I click in the editor it resizes to the correct size.
Here's a full demo: http://85.159.215.184/cke-grow/ - click Tab 2 to see the problem.
This may be a bug in CKeditor, but since their bug reporting site isn't working I'm asking here in case there is a simple fix or workaround. Any help?
I figured out a solution: automatically focusing the editor when the tab is switched.
// hook into Bootstrap's tab JS
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
// get the ID of the textarea (I have IDs based on the tab pane ID)
var paneId = $(this).attr('href').replace('#', '');
var textareaId = 'content-'+paneId;
// get the CKEditor instance and focus it
CKEDITOR.instances[textareaId].focus();
});
I have am using html2canvas to enable screenshots of divs within my web application. It's working well enough in Chrome (including Android), Safari (including iOS) and FireFox. In IE 11, however the image won't save.
Code looks like this:
function displayModalWithImage(canvas, filename) {
var modalcontainer = $('#snapshot');
var modalcontainer_body = modalcontainer.children().find('.snap_shot_container');
var modalcontainer_save = modalcontainer.children().find('.save_snapshot');
var image = new Image();
var data = canvas.toDataURL("image/png");
image.src = data;
modalcontainer_save.attr('download', filename +".png");
modalcontainer_save.attr('href',
data.replace(/^data[:]image\/png[;]/i, "data:application/octet-stream;"));
$(modalcontainer_body).html('');
$(image).appendTo(modalcontainer_body);
$(modalcontainer_save).on('click', function() {
modalcontainer.modal('hide');
});
modalcontainer.modal();
}
Browser behavior varies:
Chrome: displays modal and then saves the file when "Save" is clicked. (acceptable)
Firefox: displays modal and then displays a separate dialog when "Save" is clicked (acceptable)
Safari: display modal and then loads image in a separate tab when "Save" is clicked (acceptable... maybe)
IE 11: displays modal, but does nothing but hide the dialog when "Save" is clicked (unacceptable)
The data.replace was suggested by another SO answer, but it did not appear to have any effect on the behavior of any of the browsers. Previously the href attribute was simply set to data.
So, anyway, at this point replacing the modal dialog with a simple window.location = data is a viable alternative. But, since Chrome works well and Safari and FF work well enough, i'd like to simply do a feature detection that would window.location for IE but show the modal for the other browsers. But, I don't know what "feature" is missing in IE to check for.
tl;dr
is there simply a change or bug in my javascript that would enable IE to work (save the image encoded as data to a file).
if not, which feature in IE should I detect for that would enable me to customize the behavior for IE
if that's not an option; what's the current best practices for old-fashioned browser detection?
<html>
<head>
<script type="text/javascript">
var URL = "http://localhost:8000/foobar/";
var W = window.open(URL); **Note1**
W.window.print();
</script>
</head>
<p> Print ME...............</p>
</html>
I am using this script to print a webpage.
My views render this page and The JS take care all other things.
But I dont want to open new window for that. So, What should I use instead of window.open(URL) so no new window opens. Similarly, I don't want to open new window for print function.So, Whenever I render this page it do all stuff on the same page. No new window, No new tab. How can I achieve this. I google but nothing seems working.
You can do this using a hidden iFrame (I'm using jquery for the example):
function loadOtherPage() {
$("<iframe>") // create a new iframe element
.hide() // make it invisible
.attr("src", "/url/to/page/to/print") // point the iframe to the page you want to print
.appendTo("body"); // add iframe to the DOM to cause it to load the page
}
This will load the page you want to print. To print, you can add javascript code to the print page so that it gets printed after loading:
$(document).ready(function () {
window.print();
});
This will print the page without showing a new window. I've tested this in IE8,9 and Google Chrome, so I'm not sure if this works for Safari or Firefox, though.
There's a nice example on MDN how to do that with a hidden iframe https://developer.mozilla.org/en-US/docs/Printing#Print_an_external_page_without_opening_it
In reference to #andragon's answer. updated on top of it.
You can do this using an iFrame(Not hidden because hidden iFrame prints the blank page in latest versions of browsers. You can hide after the print is triggered)
function loadOtherPage(link) {
$("<iframe class='printpage'>") // create a new iframe element
.attr("src", link) // point the iframe to the page link you want to print
.appendTo("body");
}
This will load the page link you want to print.
On loading the print page link you can call javascript.
$(document).ready(function () {
window.print();
});
window.onafterprint = function () {
$('.printpage', window.parent.document).hide();
}
This will print the page from the same window and onafterprint Event is triggered when a page has started printing, or if the print dialog box has been closed
window.parent.document is to hide the iFrame block on the parent page.
I'm using Asp .net core with razor html as view, in this case I have used window.print() to print the page then used window.onafterprint to back to the page where used want to be redirected.
You can use ViewBag to replace the "/NewSales" URL.
NOTE: window.onafterprint will be called whenever user clicks Cancel/Submit/Print button in that pop-up.
$(document).ready(function () {
window.print();
window.onafterprint = function () {
window.location.href = "/NewSales";
}
});
function CallPrint() {
var prtContent = document.getElementById('main');
var WinPrint = window.open('', '', 'width=800,height=650,scrollbars=1,menuBar=1');
var str = prtContent.innerHTML;
WinPrint.document.write(str);
WinPrint.document.close();
WinPrint.focus();
}
Call this javascript function on Print button click."main" is the id of the div which we have to print without opening into new window.I want to notify that this will print the current page div.
Try and rever in case of any issue.
Thanks,
Gourav