Come è possibile fare in modo che una pagina Web invii alla stampante qualcosa di diverso da quello presente nella finestra del browser?

StackOverflow https://stackoverflow.com/questions/85019

  •  01-07-2019
  •  | 
  •  

Domanda

Google Maps faceva questa parte in cui quando si premeva il collegamento "Stampa", ciò che veniva inviato alla stampante non era esattamente quello che avevi sullo schermo, ma piuttosto una versione formattata in modo diverso per lo più delle stesse informazioni.

Sembra che si siano in gran parte allontanati da questo concetto (immagino che la gente non lo abbia capito) e la maggior parte dei siti web ha una "versione stampata" di cose come articoli e così via.

Ma se volessi creare una pagina Web in modo tale che una versione "stampabile" della pagina sia ciò che viene inviata alla stampante senza dover creare una pagina separata, come faresti?

Seguito:puoi stampare cose che non sono renderizzate sulla pagina?(ovvero, nascosto dal rendering attualmente in corso)?

È stato utile?

Soluzione

Sì, puoi applicare un CSS della stampante.C'è un buon articolo a riguardo Qui.

Altri suggerimenti

Puoi ottenere questo effetto creando un foglio di stile CSS destinato direttamente alla stampa e un altro destinato direttamente allo schermo.

Utilizza il tag di collegamento:

<link rel="stylesheet" type="text/css" href="print.css" media="print, handheld" />
<link rel="stylesheet" type="text/css" href="screen.css" media="screen" />

per incorporare il tuo foglio di stile nel tuo documento.

Nasconderlo è semplice, basta impostare lo stile del blocco su nascosto in qualunque foglio di stile desideri e non verrà visualizzato.Per esempio:

.newStyle1 {
    display: none;
}

Quindi qualsiasi cosa impostata sullo stile di newStyle1 non verrà visualizzato.

Puoi farlo con il CSS quando specifichi il supporto come stampa.

IL @media regola nei CSS può essere utilizzata per definire regole alternative per la stampa. Viene spesso utilizzata per nascondere la navigazione e modificare lo stile per adattarlo meglio alla stampa:

@media print {
  .sidebar { display: none; }
}

Puoi anche collegare un foglio di stile separato per la stampa:

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

Un altro modo, se lo si desidera, è avere il pulsante "Stampa" sulla pagina Modificare la pagina in qualche modo che si decide, quindi eseguire una finestra'print (); " Per visualizzare la finestra di dialogo di stampa del browser.

Ci sono diverse opzioni a tua disposizione:

  • È possibile aprire una nuova finestra con dati leggermente diversi da stampare.
  • Esistono anche stili CSS che puoi utilizzare per modificare il layout della pagina.
  • Infine puoi specificare fogli di stile completamente diversi per schermo, supporto stampato, lettori Braille ecc.

per esempio. <link href="css/print.css" type="text/css" rel="stylesheet" media="print" />

Guarda anche Riferimento per la stampa CSS2

Usare un foglio di stile di stampa.

Modificare: Per quanto riguarda il follow-up, in generale non puoi aggiungere cose a una pagina con CSS.

Un'opzione è includere il contenuto di sola stampa nella pagina e nasconderlo per i fogli di stile dello schermo.Dovresti però assicurarti che la pagina abbia ancora senso senza CSS.

Un'altra opzione consiste nell'utilizzare il contenuto generato, ma ciò non è supportato da Internet Explorer 7 e versioni precedenti e può essere piuttosto limitato.

Se il contenuto di sola stampa è un'immagine, puoi sostituirla utilizzando una delle tecniche più diffuse di sostituzione delle immagini.

Il modo più semplice è utilizzare i tipi di media CSS.Per ogni file CSS che includi, puoi specificare dove deve essere utilizzato:sullo schermo, durante la stampa, per palmari, per lettori di schermo o varie combinazioni di questi.

Esempio: <link rel="stylesheet" type="text/css" media="print, handheld" href="foo.css">

Questo è uno standard sin dai CSS2 e ora la maggior parte dei browser lo supporta.Maggiori informazioni sono disponibili qui: http://www.w3.org/TR/CSS2/media.html

I CSS ti consentono di creare fogli di stile per particolari tipi di media, il che significa che puoi avere un foglio di stile che si applica solo quando stai stampando una pagina, permettendoti di formattarla in modo diverso.

Includi semplicemente un attributo media="print" sul link del tuo foglio di stile per quel foglio di stile.

Questo Un articolo di List Apart sembra essere abbastanza bravo sull'argomento.

Ho provato a utilizzare fogli di stile diversi in base ai media, ma ho avuto problemi a ottenere tutte le opzioni di cui avevo bisogno.Da allora di solito reindirizzo a un ingresso diverso del nostro framework (Fusebox) (ad es.print.php invece di index.php) che in sostanza è lo stesso file tranne che imposta un flag/costante aggiuntivo.

Nel file XSL associato alla pagina eseguo quindi un lavoro aggiuntivo basato su quel flag/costante come tralasciare il menu, le colonne di una tabella ecc.

cioè.(La pagina mostra un collegamento su cui l'utente deve fare clic per visualizzare la password sullo schermo.La versione stampata ha la password stampata.)

if (!BOOL_PRINT)
  echo "<TD class=\"tbl_teams_scroll_item\"><SPAN class=\"span_password_hidden\" id=\"span_password_{\$team_id}\" onClick=\"RevealPassword('{\$team_id}','{\$password}');\"><xsl:value-of select=\"/PAGE/TEXTS/HIDDEN\" /></SPAN></TD>\n";
else
  echo "TD class=\"tbl_teams_scroll_item\"><xsl:value-of select=\"PASSWORD\" /></TD>\n";

È possibile definire regole CSS specifiche per un tipo di media.Quello che segue è un esempio CSS (copiato da http://www.w3.org/TR/CSS2/media.html, sezione 7.2.1) che specifica diverse dimensioni dei caratteri cosa viene visualizzato su una pagina web e cosa viene stampato. 

 @media print {
    BODY { font-size: 10pt }
  }
  @media screen {
    BODY { font-size: 12pt }
  }
  @media screen, print {
    BODY { line-height: 1.2 }
  }

In alternativa, puoi specificare a quale supporto deve essere applicato un foglio di stile quando lo includi in una pagina:

 <link href="webstyles.css" type="text/css" rel="stylesheet" media="screen"/>
 <link href="printstyles.css" type="text/css" rel="stylesheet" media="print"/>
 <link href="commonstyles.css" type="text/css" rel="stylesheet" media="screen,print"/>

Ancora un'altra opzione è avere un IFRAME nascosto su cui chiamare iframe.contentWindow.print().Ciò ti consentirà di creare un layout invisibile che viene stampato esattamente come lo desideri.

Naturalmente, una soluzione ancora migliore è esportare il file in PDF e consentire all'utente di stamparlo in questo modo.I PDF producono output della massima qualità, punto.Tuttavia, si tratta di un ulteriore ostacolo da superare per l'utente, quindi la regola pratica è:

  • PDF per quando il layout di stampa è importante
  • HTML per quando il testo puro è più importante del layout

Tutto ciò che puoi fare con i CSS puoi farlo in un foglio di stile di stampa.Ciò significa che puoi nascondere il contenuto nella versione stampata che viene mostrato nella versione sullo schermo o nascondere il contenuto nella versione sullo schermo che desideri mostrare durante la stampa. Tutto ciò che fai è applicare display:none alle sezioni appropriate nel foglio di stile appropriato.

Inoltre è una buona idea dimensionare il testo in punti per la versione stampata (che è un file Cattivo idea per la versione su schermo - attenersi a pixel, em o percentuali qui).Esiste un accordo universale su quali siano le dimensioni dei punti stampati dove le mappature dei pixel sui punti varieranno con diversi dispositivi di risoluzione.

Ecco un altro collegamento da A List Apart riguardante la stampa di CSS chiamato Stampa di un libro con CSS:Boom! http://www.alistapart.com/articles/boom/

nsayer menziona il fatto che un pulsante di stampa modifica il layout dello schermo e quindi dà il via a window.print()

Questa è una soluzione che probabilmente sarà stata trascurata da molte persone e dovrebbe essere presa in considerazione quando pensi che i tuoi utenti vogliano qualcosa in più di un WYSIWYG.Probabilmente dovrebbe essere un collegamento "adatto alla stampante" che cambia il tipo di supporto dei fogli anziché "stampa questo".

Usando jquery, potresti fare qualcosa del genere (non selezionato):

$(document).ready(function(){
    $("#printFriendly").click(function(){
       $(link[rel=link][media=screen]).remove();
       $(link[rel=link][media=print]).attr("media","screen");
    });
});
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top