两个具有不同 css 样式的打印按钮

Question

I am developing an app in Django. I have an HTML page in which I need to print the receipt. There are 2 print buttons say print_btn and print_btn_new (for using 2 different styles). I have defined 2 stylesheets say, print.css and print_new.css .

In the head section

<link rel="stylesheet" href="{% static 'css/print.css' %}" id="printCss" media="print">

It works fine. But when the print_btn_new is clicked, the print comes like no CSS is applied to it.

For the print_btn_new

<button id="print_btn_new" onclick="printNewOnClicked();" name="button">Print New</button>

printNewOnClicked() function :

function printNewOnClicked(){
        document.getElementById('printCss').href = '{% static 'css/print_new.css' %}';
        alert(document.getElementById('printCss').href);
        window.print();
    }

The alert displays the valid URL to print_new.css. When I copy paste the URL form alert box to the address bar, it shows the correct file.

Answer 1

There is a problem with the js code you pasted, in second line you have to use escapes before quotation marks like this:

document.getElementById('printCss').href = '{% static \\'css/print_new.css\\' %}';

And also I don't think changing the href this way will actually change the css styles in your page without reloading.

Answer 2

If you set (a) class(es) on the HTML tag you can create separate CSS rules for any number of different rule sets. Writing these in plain CSS can become very tedious, LESS/SASS and similar can make this less redundant and laborious. In the following snippet the HTML tag is also capable of holding classes for other reasons, since this technique may be used by others too!

 var _global_printCSSnames = [ 'funky' ]; function printPage(mode){ let doc = document.querySelector('html'); //doc.className = mode !== null ? `${mode}-printstyle` : ''; // just for our print css switch _global_printCSSnames.forEach( pmode => { doc.classList.remove( `${pmode}-printstyle` ) } ); if(mode!==null) doc.classList.add( `${mode}-printstyle` ); // if other classes may be set on HTML tag window.print(); }

 html,body{ background-color: #444; color: #fff; } @media(min-width:50em){ html,body{ background-color: #aaa; color: #444; } } @media(min-width:80em){ html,body{ background-color: #444; color: #fff; } } @media print{ html,body{ background-color: #fff; color: #000; } html.funky-printstyle,html.funky-printstyle body{ background-color: #fff; color: #00f; } } .buttonBox{ display: flex; flex-direction: row; justify-content: space-around; } .buttonBox>*{ flex: 0 1 auto; width: 9em; height: 2em; margin: 4px 8px; } button{ background-color: #333; color: #0f8; border-radius: 4px; border: 2px solid #888; box-shadow: 4px 8px 4px rgba( 128, 128, 128, .5 ); transition: all ease-in-out .3s; } button:hover{ background-color: #555; color: #0ff; text-shadow: 1px 1px 0 1px #000, -1px -1px 0 1px #fff; cursor: pointer; }

 <h1>Lorem ipsum…</h1> <p>Zwei flinke Boxer jagen die quirlige Eva und ihren Mops durch Sylt. Franz jagt im komplett verwahrlosten Taxi quer durch Bayern. Zwölf Boxkämpfer jagen Viktor quer über den großen Sylter Deich. Vogel Quax zwickt Johnys Pferd Bim. Sylvia wagt quick den Jux bei Pforzheim. Polyfon zwitschernd aßen Mäxchens Vögel Rüben, Joghurt und Quark. "Fix, Schwyz!" quäkt Jürgen blöd vom Paß. Victor jagt zwölf Boxkämpfer quer über den großen Sylter Deich. Falsches Üben von Xylophonmusik quält jeden größeren Zwerg. </p> <p>Heizölrückstoßabdämpfung. Zwei flinke Boxer jagen die quirlige Eva und ihren Mops durch Sylt. Franz jagt im komplett verwahrlosten Taxi quer durch Bayern. Zwölf Boxkämpfer jagen Viktor quer über den großen Sylter Deich. Vogel Quax zwickt Johnys Pferd Bim. Sylvia wagt quick den Jux bei Pforzheim. Polyfon zwitschernd aßen Mäxchens Vögel Rüben, Joghurt und Quark. "Fix, Schwyz!" quäkt Jürgen blöd vom Paß. Victor jagt zwölf Boxkämpfer quer über den großen Sylter Deich. Falsches Üben von Xylophonmusik quält jeden größeren Zwerg. </p> <div class="buttonBox"> <button onclick="printPage(null)">print (regular)</button> <button onclick="printPage('funky')">print (funky)</button> </div>