兩個具有不同 css 樣式的打印按鈕

Question

我正在 Django 中開發一個應用程序。 我有一個 HTML 頁面，我需要在其中打印收據。 有 2 個打印按鈕，分別是print_btn和print_btn_new （用於使用 2 種不同的樣式）。 我已經定義了2個樣式表說，print.css和print_new.css。

在頭部部分

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

它工作正常。 但是當點擊 print_btn_new 時，打印出來的效果就像沒有應用 CSS 一樣。

對於print_btn_new

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

printNewOnClicked()函數：

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

警報顯示 print_new.css 的有效 URL。 當我將 URL 表單警告框復制粘貼到地址欄時，它顯示了正確的文件。

Answer 1

您粘貼的js代碼有問題，在第二行中您必須在引號前使用轉義符，如下所示：

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

而且我認為以這種方式更改 href 不會在不重新加載的情況下實際更改頁面中的 css 樣式。

Answer 2

如果您在 HTML 標簽上設置 (a) 個類，您可以為任意數量的不同規則集創建單獨的 CSS 規則。 用普通的 CSS 編寫這些會變得非常乏味，LESS/SASS 和類似的東西可以減少冗余和費力。 在下面的代碼片段中，HTML 標記也可以出於其他原因保留類，因為其他人也可以使用這種技術！

 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>