Comment imprimer l'une des deux sections d'une page en javascript

Question

J'ai deux sections sur ma page Web, SectionA et SectionB (2 tableaux HTML).

Je souhaite pouvoir imprimer toute la page, uniquement SectionA ou seulement SectionB. J'ai déjà un fichier CSS avec media="print" et j'utilise window.print()

Pour imprimer la page entière, utilisez le bouton d'impression/élément de menu de votre navigateur.

Pour imprimer uniquement SectionA:

function PrintSectionA() 
{ 
    $('#SectionA').removeClass('hideFromPrint'); 
    $('#SectionB').addClass('hideFromPrint'); 
    window.print(); 
} 

et le contraire pour PrintSectionB() Yeah! ça marche ... presque. Si j'essaie d'imprimer seulement SectionA, puis la page entière, je reçois seulement SectionA, parce que SectionB a toujours la classe hideFromPrint.

Ce que je veux est:

function PrintSectionA() 
{ 
    $('#SectionA').removeClass('hideFromPrint'); 
    $('#SectionB').addClass('hideFromPrint'); 
    window.print(); 
    $('#SectionB').removeClass('hideFromPrint'); 
} 

Mais window.print(); Rendements avant le document est envoyé à l'imprimante. Alors PrintSectionA() imprime en fait tout maintenant :(.

est-il un moyen de le faire fonctionner?

Je crois avoir vu quelque part que je peux forcer un saut de page en CSS, je pourrais demander à l'utilisateur d'imprimer l'ensemble la page mais seulement sélectionner la 1ère ou 2ème page ... pas aussi amusant!

Answer 1

Qu'en est-il définir trois fonctions (avec un être « Imprimer tous »)?

function PrintSectionA() 
{ 
    $('#SectionA').removeClass('hideFromPrint'); 
    $('#SectionB').addClass('hideFromPrint'); 
    window.print(); 
} 

function PrintSectionB() 
{ 
    $('#SectionB').removeClass('hideFromPrint'); 
    $('#SectionA').addClass('hideFromPrint'); 
    window.print(); 
} 

function PrintAll() 
{ 
    $('#SectionA').removeClass('hideFromPrint'); 
    $('#SectionB').removeClass('hideFromPrint'); 
    window.print(); 
}