CSS ne fonctionne pas en vérifiant l'aperçu

1) J'ai un formulaire et j'affiche un aperçu de ce formulaire dans l'onglet suivant. J'ai mis quelques CSS mais après avoir cliqué sur le bouton de prévisualisation, CSS ne réfléchit pas sur les champs.CSS ne fonctionne pas en vérifiant l'aperçu

2) Existe-t-il un autre moyen d'afficher l'onglet dans un nouvel onglet de la fenêtre d'ouverture?

/*form preview*/ 
 
function PrintPreview() { 
 
    var toPrint = document.getElementById('from_privew'); 
 
    var popupWin = window.open('', '_blank', 'width=1000,height=1000,location=no,left=200px'); 
 
    popupWin.document.open(); 
 
    popupWin.document.write('<html><title>::Print Preview::</title><link rel="stylesheet" type="text/css" href="Print.css" media="screen"/></head><body>') 
 
    popupWin.document.write(toPrint.innerHTML); 
 
    popupWin.document.write('</div></body></html>'); 
 
    popupWin.document.close(); 
 
}

@media print{ 
 
    input[type="text"], 
 
    input[type="email"] { 
 
     border: 1px solid #000; 
 
     padding: 05px; 
 
     border-radius: 05px; 
 
    } 
 

 
    input[type="submit"], 
 
    a { 
 
     background: #0088cc; 
 
     border: none; 
 
     border-radius: 05px; 
 
     padding: 08px 25px; 
 
     color: #fff; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 

 
<div id="from_privew"> 
 
    <form> 
 
    <input type="text" name="name"> 
 
    <input type="email" name="email"> 
 
    <input type="submit" name="submit"> 
 
    <a href="#" onclick="PrintPreview()">Preview</a> 
 
    </form> 
 
</div>

Source

2017-09-11 Anonymous

Au lieu d'une nouvelle fenêtre, vous pouvez utiliser un iframe. – xxxmatko

Vous utilisez '@media print' dans votre css, il sera visible/appliqué uniquement lors de l'impression ou de l'impression d'aperçu. L'ouverture d'une nouvelle fenêtre n'est pas un aperçu avant impression. Essayez d'ouvrir votre aperçu avant impression dans Chrom et appuyez sur Ctrl + P et vous verrez vos règles CSS. – xxxmatko

@xxxmatko, je veux juste afficher dans l'onglet suivant. Iframe affichera comme l'utilisateur veut imprimer un formulaire –

Mettez votre css dans le fichier séparé Print.css et retirer le @media print:

input[type="text"], 
input[type="email"] { 
    border: 1px solid #000; 
    padding: 05px; 
    border-radius: 05px; 
} 

input[type="submit"], 
a { 
    background: #0088cc; 
    border: none; 
    border-radius: 05px; 
    padding: 08px 25px; 
    color: #fff; 
}

Ensuite, modifiez votre javascript pour faire référence à ce fichier:

function PrintPreview() { 
    var toPrint = document.getElementById('from_privew'); 
    var popupWin = window.open('', '_blank', 'width=1000,height=1000,location=no,left=200px'); 
    popupWin.document.open(); 
    popupWin.document.write('\ 
     <html> \ 
      <head> \ 
       <title>::Print Preview::</title> \ 
       <link rel="stylesheet" type="text/css" href="Print.css" media="screen"/> \ 
       <link rel="stylesheet" type="text/css" href="style.css" media="screen"> \ 
      </head> \ 
      <body> \ 
       <div>') 
    popupWin.document.write(toPrint.innerHTML); 
    popupWin.document.write('\ 
       </div> \ 
      </body> \ 
     </html>'); 
    popupWin.document.close(); 
}

Pour la deuxième partie, si la page est ouverte dans une nouvelle fenêtre ou un nouvel onglet dépend du navigateur (ou des paramètres du navigateur). Donc, je pense que vous ne pouvez pas faire grand-chose à ce sujet.

Source

2017-09-11 07:18:17 xxxmatko

Ça marche très bien. Merci @xxxmatko –

Votre bienvenue, heureux d'aider. – xxxmatko

J'ai trouvé la deuxième résolution aussi, je dois supprimer dans le script var popupWin = window.open ('', '_blank', 'width = 1000, height = 1000, emplacement = non, left = 200px'); et ajouté var popupWin = window.open ('', '_blank'); –

CSS ne fonctionne pas en vérifiant l'aperçu

Répondre

Questions connexes