我需要一種表單，如果選中了表單中的復選框，然后將“提交”按鈕打印頁面，該表單會將一個類應用於div

Question

設置是當用戶到達頁面時，它將以先前的形式將其信息放在頁面上以供查看。 頁面上還將顯示一個表單，其中包含3個選項，每個選項列出了一個復選框，以及在表單底部顯示“打印”的按鈕。

用戶正在查看的頁面頂部的信息也將應用於包裹在div中且顯示隱藏的3個字母。 每個復選框代表一個隱藏的字母，例如letter1，letter2和letter3。

因此，我需要一個具有3個字母中的每個字母的復選框的表單，一個單擊時將打印整個頁面的提交按鈕，以及單擊該按鈕時該表單將一個類應用於所選字母的div的每個表單，因此print.css將僅打印對其應用了該類的div。 我希望所有這些都可以使用javascript或jquery完成，但實際上任何簡單的方法都可以使用。

感謝您提供的所有幫助！

<form action="" id="letterPrint">

<input type="checkbox" name="letter1" value="letter1" /> Letter 1

<input type="checkbox" name="letter2" value="letter2" /> Letter 2

<input type="checkbox" name="letter3" value="letter3" /> Letter 3

<input type="submit" value="print" />

</form>

到目前為止，這是我的表格。

Answer 1

首先，添加打印樣式表不需要特定div的類。 下面的代碼可以使您在打印頁面時使用打印CSS並將其應用到頁面上，然后再發送給打印。

<link rel="stylesheet" type="text/css" href="path/to/screen.css" media="screen" />

<link rel="stylesheet" type="text/css" href="path/to/print.css" media="print"/>

使它自動打印比看起來要復雜得多。 但是，您可以使用此代碼調出打印框

if (window.print) {
    window.print();
}

無法將頁面直接發送到要打印的打印機，因為將數據發送到打印機所需的打印信息位於操作系統上。 JavaScript僅與瀏覽器交互。

Answer 2

您在找這種東西嗎？