28172 sujets

CSS et mise en forme, CSS3

2 feuilles CSS pour media print

Bonjour,
Je voudrai imprimer ma page web de deux façon différentes.
2 boutons "imprimer" sur ma page "(Impression 1" et "Impression 2")
Avec "impression 1" j'aimerai imprimer une partie de ma page. Avec "Impression 2" une autre partie de ma page.
Comment lier à chaque bouton "Impression" une feuille de style media print différente?
Est ce possible ou existe 'il un autre procédé.
Merci de votre aide

FD
Moi je ferais un truc comme ceci : CodePen
<button id="button1">button 1</button>
<button id="button2">button 2</button>

cmdPrint1 = document.getElementById('button1');
cmdPrint1.addEventListener('click', addStyles1, false);
cmdPrint1.addEventListener('click', cmdPrint, false);

function addStyles1() {
    // On supprime la print styles précédent si besoin :
    var elem = document.getElementById('print2');
    if (elem) {
      elem.parentNode.removeChild(elem);
    }
    // On crée la nouvelle référence au print styles :
    var tagLink = document.createElement('link');
    tagLink.type = 'text/css';
    tagLink.rel = 'stylesheet';
    tagLink.href = 'print1.css';
    tagLink.media = 'print';
    tagLink.id = 'print1';
    document.getElementsByTagName('head')[0].appendChild(tagLink);
}

cmdPrint2 = document.getElementById('button2');
cmdPrint2.addEventListener('click', addStyles2, false);
cmdPrint2.addEventListener('click', cmdPrint, false);

function addStyles2() {
    // On supprime la print styles précédent si besoin :
    var elem = document.getElementById('print1');
    if (elem) {
      elem.parentNode.removeChild(elem);
    }
    // On crée la nouvelle référence au print styles :
    var tagLink = document.createElement('link');
    tagLink.type = 'text/css';
    tagLink.rel = 'stylesheet';
    tagLink.href = 'print2.css';
    tagLink.media = 'print';
    tagLink.id = 'print2';
    document.getElementsByTagName('head')[0].appendChild(tagLink);
}

function cmdPrint() {
		window.print();
		return false;
}

Bien sûr il faudrait factoriser tout ça pour éviter les redondances et aussi récupérer l'adresse des feuilles de styles via data-uri plutôt que par le javascript. Mais bon, voilà pour un premier jet...
Merci, c'est effectivement une bonne piste mais franchement je croyais qu'il y avait plus simple pour utiliser deux media print différents.
Merci beaucoup
Sujet clos
Aller à