Pourquoi le contenu du formulaire disparaît-il après avoir sélectionné une partie du contenu à imprimer en javascript ?

JavaScript Lors de la sélection d'une partie du contenu à imprimer, le contenu du formulaire disparaît parfois. En effet, le navigateur n'imprime par défaut que la partie visible de la page lors de l'impression, et la partie du formulaire est généralement masquée et non dans la zone visible de ​​la page. Donc ignoré par défaut. Cet article vous montrera comment résoudre ce problème.

Description du problème

Lorsque nous utilisons la méthode window.print() de JavaScript pour imprimer une page, nous constatons souvent qu'une partie du contenu du formulaire n'est pas imprimée, mais que seule la partie visible de la page est imprimée. En effet, le comportement par défaut du navigateur est d'imprimer uniquement la partie visible de la page, et la partie formulaire est généralement masquée et non dans la zone visible de la page, elle est donc ignorée par défaut.

Solution

Afin de résoudre ce problème, nous devons utiliser la requête média @media en CSS. @media media query est une technologie CSS qui peut fournir différentes feuilles de style pour les pages Web basées sur différents types de médias afin de s'adapter à différents terminaux. Nous pouvons utiliser les requêtes multimédias @media pour contrôler la façon dont le formulaire s'affiche une fois imprimé.

Les étapes spécifiques de mise en œuvre sont les suivantes :

1. Définissez une requête @media media dans la feuille de style CSS :

@media print {
    /* 这里写规则 */
}

2. Ecrivez les règles d'affichage du formulaire dans la requête @media media :

@media print {
    form {
        display: block;
        visibility: visible;
    }
}

Dans la ci-dessus, nous utilisons les deux attributs display et visibilité pour contrôler l'effet d'affichage du formulaire lors de l'impression. Définissez la propriété d'affichage sur block pour afficher le formulaire ; définissez la propriété de visibilité sur visible pour rendre le formulaire visible lors de l'impression.

3. Écrivez le style de la page lors de l'impression dans la requête @media media :

@media print {
    form {
        display: block;
        visibility: visible;
    }
    
    /* 这里写其他规则，如文字大小、背景图等 */
}

Dans le code ci-dessus, nous pouvons également ajouter d'autres règles, telles que la taille du texte, l'image d'arrière-plan, etc., pour obtenir de meilleurs effets d'impression .

4. Appelez la méthode window.print() dans le JavaScript de la page HTML

Enfin, appelez la méthode window.print() dans le JavaScript de la page HTML. À ce stade, la partie formulaire devrait déjà être incluse. dans le contenu de la fenêtre d'impression.

<button onclick="window.print()">打印</button>

Résumé

Cet article présente le problème de la disparition du contenu du formulaire lors de la sélection d'une partie du contenu à imprimer en JavaScript, et propose une méthode pour utiliser les requêtes multimédias @media pour résoudre ce problème. En définissant les règles dans la requête média @media, nous pouvons faire en sorte que le formulaire s'affiche correctement lors de l'impression, obtenant ainsi de meilleurs résultats d'impression.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!