Come ottenere WYSIWYP (stampare ciò che vedi) in un browser Web?

Quando stampo una pagina Web dal mio browser, mi aspetto di ottenere sulla carta esattamente il contenuto che vedo nel browser. Per essere precisi: mi aspetto che il browser visualizzi lo stesso contenuto di pagina allo stesso modo, tranne su una tela con altezza infinita, e quindi decida in modo specifico per la stampa come distribuire i risultati su pagine fisiche di carta.

Tuttavia, questo non è affatto ciò che sta accadendo su molti siti Web. Potrebbero stampare qualcosa di completamente diverso. Non ho mai chiesto ai browser di farlo e non voglio che accada.

C'è un modo per ottenere ciò che voglio (oltre a fare screenshot, tagliare e incollare scrupolosamente insieme e stampare le immagini risultanti)? Esiste un modo per dire a un browser Web che utilizzo (Firefox, Chrome, Safari, IE o Opera): "stampare questa pagina come si visualizzerebbe su una finestra del browser arbitrariamente alta"?

(PS: vedi anche: Stampa dal browser usando Screen CSS ?)

Chrome ha questa funzione integrata negli Strumenti per gli sviluppatori, ma in una posizione molto ovvia.

• Apri gli Strumenti di sviluppo (Windows: F12o Ctrl+ Shift+ I, Mac: Cmd+ Opt+ I)
• Fare clic sul pulsante di menu Personalizza e controlla hamburger DevTools e selezionare Altri strumenti> Impostazioni rendering (o Rendering nelle versioni più recenti).
• Selezionare la casella di controllo Emula supporti di stampa nella scheda Rendering e selezionare il tipo di supporto Schermo .

Citato principalmente da questa risposta . Vedi sotto per la differenza.

Ora quando stampi, la stampa sarà esattamente ciò che vedi. Assicurati di tenere aperti gli strumenti di sviluppo fino alla stampa. Dopo aver chiuso gli strumenti di sviluppo, l'impostazione di rendering verrà ripristinata alla normalità.

Nota: l'ispirazione per questa risposta proviene da https://superuser.com/a/568847/176146 . Ma il testo effettivo di questa risposta è da lmeurs ' risposta . È quasi esattamente lo stesso, ma stiamo cercando di fare l'esatto contrario della loro risposta, quindi invece di impostare l'override su Stampa è impostato su Schermo .

Perché le mie pagine Web non stampano ciò che vedo nel mio browser?

Il motivo per cui alcune pagine Web vengono stampate in modo diverso è perché dispongono di un foglio di stile di stampa .

Che cos'è un foglio di stile di stampa?

Un foglio di stile di stampa formatta una pagina Web, quindi una volta stampato, viene automaticamente stampato in un formato intuitivo. I fogli di stile di stampa sono in circolazione da diversi anni e sono stati scritti molto. Eppure così pochi siti Web li implementano, il che significa che restano pagine Web che frustratamente non vengono stampate correttamente sulla carta.

È notevole che così pochi siti Web utilizzino fogli di stile di stampa come:

• I fogli di stile di stampa migliorano enormemente l'usabilità, specialmente per le pagine con molti contenuti (come questo!)
• Sono straordinariamente veloci e facili da configurare

Alcuni siti Web offrono un collegamento a una versione stampabile della pagina, ma questo ovviamente deve essere impostato e gestito. Richiede inoltre che gli utenti notino questo collegamento sullo schermo e quindi lo utilizzino prima del normale modo in cui stampano le pagine (ad esempio selezionando il pulsante di stampa nella parte superiore dello schermo). Le versioni stampabili sono comunque utili quando si stampano più pagine Web contemporaneamente, ad esempio un articolo che si estende su più pagine Web.

Disabilita sorgente Stampa fogli di stile (CSS) durante la stampa di un sito Web

Come disabilitare un foglio di stile di stampa?

Di recente ho avuto bisogno di ottenere un'istantanea di un sito Web esattamente come è mostrato sul mio schermo. Cioè, volevo il colore di sfondo, volevo le pubblicità, volevo il layout completo.

Un'opzione è quella di acquisire schermate sequenziali mentre scorri verso il basso la pagina, quindi ricomporle in Photoshop. Questo richiede molto tempo e ti lascia con un'immagine a bassa risoluzione (72 dpi).

Un altro modo per farlo è stampare la pagina, quindi "salvare come" un PDF invece di stamparlo effettivamente. Questo funziona abbastanza bene per le pagine che non definiscono un layout diverso per la stampa di una pagina rispetto alla visualizzazione della pagina.

Sfortunatamente per me, è diventato sempre più popolare includere un foglio di stile "stampa" su un sito Web, che definisce nuovi stili di pagina quando un utente tenta di stampare il sito Web. Questo è definito nell'intestazione e assomiglia a questo:

Ho trovato solo un'opzione che risponde veramente alle mie esigenze: il componente aggiuntivo / estensione "Web Developer" sviluppato da Chris Pederick.

Con questo plugin puoi disabilitare facilmente TUTTI gli stili, gli stili predefiniti, gli stili incorporati, gli stili incorporati e, hai indovinato, gli stili di stampa!

Al momento è disponibile per Firefox e Chrome. Spero davvero che un giorno arrivi un'estensione Safari, poiché uso principalmente Safari. L'unica opzione che ho trovato per Safari è disabilitare TUTTI gli stili, una funzionalità che viene fornita di default con la versione più recente (5.0.3) del browser. Ciò è utile durante lo sviluppo per vedere come verrà visualizzato il tuo sito su un browser di solo testo, ma senza la possibilità di selezionare gli stili che stai disabilitando ha un'utilità limitata.

Ecco un esempio di disabilitazione degli stili di stampa con l'estensione sopra in Firefox:

Foglio di stile per la stampa di origine : la guida definitiva

Una soluzione senza plug-in per Firefox: Apri Strumenti per gli sviluppatori Web, in Strumenti per sviluppatori predefiniti (icona a forma di ingranaggio) seleziona "Fai uno screenshot dell'intera pagina". Hai solo bisogno di fare questa parte una volta.

Quindi in Strumenti per gli sviluppatori, fai clic sull'icona della fotocamera. L'intera pagina verrà salvata come .png. Da qui puoi stamparlo, convertirlo in pdf, ecc.

Sto usando l'estensione di Chrome: screenshot della pagina Web . Con due clic la pagina web completa viene convertita in jpg o pdf. Non è più necessario incollare gli screenshot da soli. Questa pagina è simile alla seguente:

Stavo anche affrontando il problema simile. Attualmente sto usando Print Friendly e PDF Extenstion per Chrome .

La migliore caratteristica è che posso eliminare manualmente gli elementi che non desidero in Stampa / PDF.

Eccone un altro chiamato OpenScreenShoot . Lo adoro perché è Open source, disponibile su GitHub, e ha funzionato per me per una pagina Web molto lunga in cui, altre alternative come WebpageScreenShot hanno fallito.

(A rischio di trasformare questo in una serie di risposte di raccomandazioni software , ma finora, installare e utilizzare l'estensione del browser X sembra essere l'unico tipo di risposta che funziona davvero :)

Ultimamente sto usando l' estensione Open Screenshot di Chrome per questo scopo, e ne sono molto contento. Non ha avuto problemi con una lunga pagina Quora .

Aggiornamento (novembre 2017): questa non è più l'opzione migliore: Firefox e Chrome ora supportano l'acquisizione di schermate a pagina intera nei loro Strumenti per gli sviluppatori .

Oggi, questo può essere fatto in Firefox (sto usando 65.0.2 in questo momento) come segue:

1. Premi F12. Verrà visualizzato il riquadro Strumenti per sviluppatori.
2. Vicino all'angolo in alto a destra, c'è un'icona della fotocamera. Per fare uno screenshot dell'intera pagina, fai clic su di esso.

In Impostazioni (per accedervi, fai clic sui tre punti a destra dell'icona della fotocamera), puoi personalizzarne leggermente il comportamento; per impostazione predefinita, salverà lo screenshot nella cartella dei download di Firefox.

Se l'icona della fotocamera è mancante, devi prima abilitarla in Impostazioni .