web-dev-qa-db-fra.com

Ouvrez une nouvelle fenêtre javascript (.open) avec son style CSS

J'essaie de faire fonctionner cette fonction sur le site Web d'un projet sur lequel je travaille. Le but de cette fonction est d'imprimer (physiquement) uniquement le contenu d'un div enfant qui est appelé par hasard sélecteur #contenu.

Voici le petit morceau que j'ai jusqu'à maintenant:

<script>
    function printContent() {
        window.open().document.write($("#content").html());
        window.print();
        window.close();
    }
</script>

La fonction est déclenchée lorsqu'une personne clique sur un lien hypertexte "imprimer". La nouvelle fenêtre chargera le contenu de la div #content qui est analysée à partir d'un autre document HTML:

<div id="content">
    <br/>
    <div id="Algemeen">
        <h3>Algemene informatie</h3>
        <fieldset id="profile">
            <img id="male" src="./images/Pixers/male_icon.jpg"></img>
            <img id="female" src="./images/Pixers/female_icon1.jpg"></img>
        </fieldset>
    </div>
    <div id ="leftbox">   
        <div id ="veldbox"><label>BSN:</label>$!person.bsn</div>
        <div id ="veldbox"><label>Voornaam: </label>$!person.first_name</div>
        <div id ="veldbox"><label>Achternaam:</label>$!person.name_prefix $!person.last_name</div>
        <div id ="veldbox"><label>Geslacht:</label>$!person.gender</div>  
        <div id ="veldbox"><label>Woonadres:</label>$!person.address</div>
        <div id ="veldbox"><label>Plaatsnaam:</label>$!person.location</div>
        <div id ="veldbox"><label>Provincie:</label>$!person.province</div>
        <div id ="veldbox"><label>Postcode:</label>$!person.zipcode</div>
        <div id ="veldbox"><label>Tel. nummer thuis:</label>$!person.h_number</div>
        <div id ="veldbox"><label>Mobiel nummer:</label>$!person.mobile_nr</div>
        <div id ="veldbox"><label>Burgerlijke Stand:</label>$!person.m_status</div>
        <div id ="veldbox"><label>land van herkomst:</label>$!person.Origin</div>
    </div>
    <div id="rightbox">
        <div id ="veldbox"><label>Naam instantie:</label></div>
        <div id ="veldbox"><label>Adres instantie:</label></div>
        <div id ="veldbox"><label>Postcode instantie:</label></div>
        <div id ="veldbox"><label>Tel. instantie:</label></div>
        <div id ="veldbox"><label>Fax instantie:</label></div>
        <div id ="veldbox"><label>E-mail instantie:</label></div>
        <div id ="veldbox"><label>Website instantie:</label></div>
        <div id ="veldbox"><label>-:</label></div>
        <div id ="veldbox"><label>-:</label></div>
        <div id ="veldbox"><label>-:</label></div>  
    </div>
</div>

Il ne chargera tout simplement pas le style avec lui. Tout le contenu sera simplement recadré dans le coin supérieur gauche. J'ai essayé de lier le CSS via JS ou simplement en le mettant en tête de page comme suggéré sur une autre page. Je pourrais faire ce mal, bien sûr. Je n'ai pas encore vraiment essayé de comprendre cela avec JQuery, donc si vous avez d'autres solutions qui pourraient m'aider avec mon problème, je suis heureux et ouvert à recevoir des conseils à leur sujet.

Merci d'avance!

javascriptjqueryhtmlcssprinting
23
Fariz Fakkel

Créez une page HTML complète dans la fenêtre ouverte et référencez-y votre fichier CSS:

var win = window.open('','printwindow');
win.document.write('<html><head><title>Print it!</title><link rel="stylesheet" type="text/css" href="styles.css"></head><body>');
win.document.write($("#content").html());
win.document.write('</body></html>');
win.print();
win.close();
35
Reeno

Je fais quelque chose de similaire à l'exemple ci-dessus, mais j'ai constaté que cela ne fonctionne pas dans tous les navigateurs. Ce qui suit a été testé avec tous les principaux navigateurs et fonctionne pour moi. (N'oubliez pas, certains styles peuvent dépendre des éléments parents, donc si votre div est imbriqué à l'intérieur de ces éléments, les styles peuvent ne pas être exactement les mêmes dans la fenêtre d'impression que sur votre page parent)

function printWithCss() {
        //Works with Chome, Firefox, IE, Safari
        //Get the HTML of div
        var title = document.title;
        var divElements = document.getElementById('printme').innerHTML;
        var printWindow = window.open("", "_blank", "");
        //open the window
        printWindow.document.open();
        //write the html to the new window, link to css file
        printWindow.document.write('<html><head><title>' + title + '</title><link rel="stylesheet" type="text/css" href="/Css/site-print.css"></head><body>');
        printWindow.document.write(divElements);
        printWindow.document.write('</body></html>');
        printWindow.document.close();
        printWindow.focus();
        //The Timeout is ONLY to make Safari work, but it still works with FF, IE & Chrome.
        setTimeout(function() {
            printWindow.print();
            printWindow.close();
        }, 100);
    }
11
cmartin

Je voulais avoir tous les styles de la page parent et print. Je voulais donc utiliser tous les liens css dans le [~ # ~] tête [~ # ~] .

Ma solution utilise jQuery .

(function print() {
    // getting the tag element I want to print
    // cloning the content so it doesn't get messed
    // remove all the possible scripts that could be embed
    var printContents = $('body').clone().find('script').remove().end().html();

    // get all <links> and remove all the <script>'s from the header that could run on the new window
    var allLinks = $('head').clone().find('script').remove().end().html();

    // open a new window
    var popupWin = window.open('', '_blank');
    // ready for writing
    popupWin.document.open();

    // -webkit-print-color-adjust to keep colors for the printing version
    var keepColors = '<style>body {-webkit-print-color-adjust: exact !important; }</style>';

    // writing
    // onload="window.print()" to print straigthaway
    popupWin.document.write('<html><head>' + keepColors + allLinks + '</head><body onload="window.print()">' + printContents + '</body></html>');

    // close for writing
    popupWin.document.close();
})();
8
Pere Pages

J'ai également eu le problème avec le chargement CSS après le rendu de la page, donc la solution était de lire le contenu du fichier CSS et de l'écrire dans le nouveau document:

    var w = window.open();
    jQuery.get('/styles.css', function (data) {
        w.document.write('<html><head><style>');
        w.document.write(data);
        w.document.write('</style></head><body>');
        w.document.write($('.print-content').html());
        w.document.write('</body></html>');
        w.print();
        w.close();
    });
5
Mirko

J'ai eu le même problème. Ce que je trouve, c'est qu'il s'imprime avant que le CSS n'ait le temps de s'afficher sur la page. Ce que j'ai fait pour trouver cela était de faire un setTimeout sur l'appel d'impression et tout le style apparaissait alors dans le document imprimé. Si je n'ai pas respecté le délai d'attente, j'ai constaté que le style n'était pas repris dans l'appel d'impression.

1
tbone78

Juste au cas où quelqu'un essaierait de faire cela avec Angular, veuillez mettre votre fichier CSS dans le dossier des ressources.

0
rgantla