Impresión de calendario completo en iPad

I have been working on this task off and on for awhile trying to find an optimal solution (other than telling users to disable popup blocking) and am stumped.

Essentially how it works is this (I omit code because there is a lot of it and propriety info):

I have an angular app implemented in an angular and utilizes fullcalendar.js who's content I want to print. Inside my angular controller I have the jQuery that manages the calendar itself (don't hit my fingers with a ruler please :) )

I want a specific set of styles when I want to print the calendar, so I have a directive that prepares all the content to be ported, and then use a uniform angular factory that is used for all printing activities. This uniform factory opens a new window that contains all the new styles I want and, via a callback, "cleans up" the HTML, which in my case I use for porting the HTML content of the calendar over to the new window.

So the flow basically is this: User clicks print button -> click event in calendar print directive is invoked, the directive calls the factory. -> Factory opens a new window and ports the content via the callback from the directive and then calls JavaScript's print() to print the window.

The problem I am encountering is this: The print works fine on PC and Mac, but on iOS safari, the window does not pop up. I found that the issue was because iOS Safari requires all new window popups to be inside a click event.

To get around this, I thought I would add some modification to the uniform factory to suit my case: I would open a new window in the directive's click event, then pass a reference of that window into the factory, which can then use the reference to add the html content to its body. This introduced another issue with iOS Safari in that it stalls javascript execution of parent windows if a child window is open, so once the new window is open, the generation of the HTML and the calling of the factory is stalled until the user switches back to the parent tab. This is the point where I got stumped. Any suggested way to get around these issues? Or would I be stuck telling the user to disable popup blocking?

preguntado el 02 de diciembre de 13 a las 18:12

Are you sure you need a new window? -

Inside the parent page there is a navbar and other buttons/options that I don't want to be included in the printed page. I also need a separate set of styles to be applied to the print. For example, in the the calendar events have a full color background, but in the print stylesheets its just a color outline to reduce print ink usage. I also used another window to act as a "preview" of sorts, which is why I did not take an approach such as a hidden container div or something. -

What about disabling the print option on iOS? Not many users will use it anyways. I still have to see people using their iOS devices to print anything. I know it might sound like a silly suggestion, but as engineers I don't think think we should go crazy for the 0.05% of users. -

You shouldn't need a new window. I did something similar on a recent project. @media print mezclado con display: none; on anything you don't want to display when printing should be enough. -

2 Respuestas

once the new window is open, the generation of the HTML and the calling of the factory is stalled...

Can you change so the generation of HTML and factory call is made before opening the new window? Otherwise it sounds like you need to avoid the popup.

If you want to display another view in the same window, use ngIncluir. You can choose to switch the path of the ngInclude to swap the HTML or combine with ngMostrar to show and hide the correct parts when the user clicks.

It sounds like you use a factory as a parent scope and if so it should be converted to a controller that acts as a global scope above the different views.

If this is on the right track I could make a plunkr out of it.

Además, la salida fullcalendar-ui for a premade directive if you want to go towards best practice.

¡Buena suerte!

Respondido el 02 de diciembre de 13 a las 20:12

I just figured out my particular problem, but I will definitely look into fullcalendar-ui to "angularize" it more. Upvoting your answer for a good suggestion. - ryanlutgen

After ~3 times coming and going from this over the course of a month, I finally figured it out.

Inside my directive that prepares the content to be printed, I generate a new calendar, then call the rest of the code (including the factory that opens a new window) inside a document.ready. Having the code inside the ready check seems to cause iOS Safari to think it is no longer directly inside a click event, so it would sometimes block the new window popup. Removing the document.ready check seems to have made it work, and has no ill effect on the other browsers.

I decided to create a function inside the directive for the factory call and call inside a document.ready if not iOS, otherwise just call it, to preserve functionality for desktop browsers.

Respondido el 03 de diciembre de 13 a las 16:12

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.