Comment fonctionne Google Agenda Print?

Question

Je construis un calendrier dans ASP.NET en utilisant Jquery, Et j'essaie d'implémenter Print. Je peux imprimer des images html ou des images simples sans aucun problème. Mais je n'arrive pas à comprendre comment créer une impression comme google calendar print.

Lorsque vous appuyez sur Imprimer dans « Calendrier Aperçu avant impression » la boîte de dialogue d'impression qui apparaît a plus d'options (navigateurs cross), Certains comment cette boîte de dialogue d'impression est différente d'une simple impression du navigateur, Et ils semblent avoir plus de contrôle comme la configuration de l'impression de paysage par exemple.

Quelqu'un sait comment implémenter cela?

Merci

Answer 1

Il est juste une fenêtre pop-up avec quelques options qui sont affichées à un script côté serveur qui génère un document .pdf.

Vous pouvez utiliser

<link media="print" rel="stylesheet" type="text/css" href="main.css" /> 

faire quelque chose de similaire sans utiliser script Serverside qui génère l'image/pdf.

Notez le media = "print", cela signifie que la feuille de style donnée sera utilisée lorsque vous imprimez la page. Vous pouvez spécifier des règles CSS personnalisées (comme masquer la navigation, rendre le calendrier agréable sur papier, etc.).

EDIT:

En réponse au commentaire. Si vous convertissez le fichier HTML en pdf, il sera exactement le même. Lorsque vous soumettez ce formulaire dans Google Agenda, ils prennent toutes ces options et générer des fichiers PDF à partir d'eux. Si vous choisissez l'option Paysage, ils vont faire pivoter la page et recalculer tout pour qu'elle corresponde à la page. Pour les simplifier, ils dessinent une image côté serveur en fonction des options que vous soumettez et la mettent en pdf.

Ce n'est pas si simple si vous ne l'avez pas déjà fait. Je voudrais jouer avec CSS et JavaScript sur cette page d'impression et voir si je peux imiter quelque chose comme ça en basculant entre paysage et portrait en utilisant les règles JS et CSS (faire 2 boutons - "paysage", "portrait", lorsque l'utilisateur clique dessus vous changez les règles de css pour votre calendrier de sorte qu'il adapte la taille donnée de papier). Encore une fois, si vous n'êtes pas familier avec css, ce sera difficile.

Il n'y a pas de réponse définitive, le chemin que google a pris est très sympa, mais ce n'est pas si simple à reproduire.

Plus d'infos dans les commentaires.