web-dev-qa-db-fra.com

Mettre à l'échelle HTML pour s'adapter à une page lors de l'impression

J'ai une page Web avec un diagramme destiné à être fixé en taille à width:1660px;height:480px; en utilisant CSS. La page (ai-je le droit de créer un lien vers elle?) S'affiche correctement dans le navigateur, mais lors de l'impression dans Google Chrome (je n'ai pas encore testé d'autres navigateurs), elle est trop grande horizontalement pour tenir sur une seule page. Comment puis-je mettre le HTML à l'échelle pour qu'il tienne sur une seule page imprimée?

Voici à quoi pourrait ressembler la sortie (Firefox 60):

enter image description here

J'ai essayé de déconner avec des requêtes médiatiques comme celle-ci:

@media print
{
    @page
    {
        size: 297mm 210mm; /* landscape */
        /* you can also specify margins here: */
        margin: 250mm;
        margin-right: 450mm; /* for compatibility with both A4 and Letter */
    }
}

Mais je ne remarque aucun effet dans l'aperçu avant impression.

[Éditer]

Internet Explorer 11 semble pouvoir redimensionner automatiquement la page dans la boîte de dialogue d'impression. Je ne sais pas pourquoi Google Chrome ne peut pas faire cela aussi bien.

[Éditer]

J'ai aussi essayé de transformer la page. Cependant, le résultat imprimé est très différent dans Chrome vs IE11.

@media print
{
    html
    {
        transform: scale(0.5);transform-Origin: 0 0;
    }
}

Ensuite, j'ai essayé de zoomer sur la page. Cela a plutôt bien fonctionné, mais je ne sais pas si cela affecte uniquement Chrome ou s'il affecte IE et Firefox également.

@media print
{
    html
    {
        zoom: 50%;
    }
}

Dans les deux cas, l'utilisateur n'a aucun moyen de désactiver l'effet lors de l'utilisation de CSS, sauf si vous créez également de nouveaux contrôles JavaScript.

htmlcssmedia-queries
7
posfan12

Il s'agit malheureusement d'un problème très courant . D'après mon expérience, il n'y a aucun moyen fiable de contrôler la mise en page d'impression dans les navigateurs, sauf pour créer un PDF. Il existe un certain nombre de packages "HTML vers PDF" disponibles, mais bien qu'ils fonctionnent généralement, ils ont des variations similaires selon le navigateur dans lequel ils sont exécutés. Il existe un certain nombre de problèmes matériels (par exemple, la taille de l'écran), les paramètres du navigateur (inhérents différences entre les navigateurs plus la taille de police par défaut définie localement et d'autres paramètres de configuration) et les paramètres utilisateur (par exemple, le zoom de page) qui rendent cela pratiquement impossible, à mon humble avis, sauf en générant un document côté serveur.

Je suis sûr que ce n'est pas ce que vous voulez entendre, mais la seule solution fiable pour vous assurer que l'utilisateur est capable d'imprimer une page Web comme vous (le développeur) l'imprimez est de générer un PDF complet sur le serveur . Cela peut être fait avec un certain nombre de packages différents selon la langue source (PHP, Python , etc.) C'est certainement plus de travail pour le développeur, mais vous pouvez contrôler la taille de l'image, la taille du texte, la police, etc. - toutes les choses que vous devriez pouvoir contrôler avec CSS et savoir que la page s'imprimera comme prévu . Au lieu que le bouton d'impression de votre page déclenche la fonction d'impression du navigateur, demandez-lui de télécharger un fichier de la page à partir du serveur, tout formaté et prêt à imprimer. Vous pouvez cibler la lettre (USA) ou A4 (la plupart des autres endroits dans le monde) et les deux tailles sont suffisamment proches pour que la plupart des gens puissent s’adapter à Adobe Reader ou à d’autres logiciels pour les adapter sans perdre de données ni avoir trop d’espace blanc.

Si votre document est vraiment "une seule image", c'est encore plus facile. Créez l'image côté serveur et intégrez-la dans un fichier PDF téléchargeable d'une seule page. Si vous ne pouvez pas facilement créer l'image côté serveur, vous pouvez utiliser un service tel que URLBOX (que j'utilise en tant qu'abonné payant mais je n'ai pas autre connexion) pour générer les images et les télécharger sur votre serveur pour les intégrer dans des fichiers PDF.

4
manassehkatz-Reinstate Monica