2014-11-28 12:39:53 +0000 2014-11-28 12:39:53 +0000
73
73

Come ottenere WYSIWYP (stampare ciò che si vede) in un browser web?

Quando stampo una pagina web dal mio browser, mi aspetto di ottenere su carta esattamente il contenuto che sto vedendo nel browser. Per essere precisi: Mi aspetto che il browser renda i contenuti della stessa pagina nello stesso modo, tranne che su una tela con altezza infinita, e poi decida in modo specifico per la stampa come distribuire i risultati sulle pagine fisiche di carta.

Tuttavia, questo non è affatto quello che succede su molti siti web. Possono stampare qualcosa di completamente diverso. Non ho mai chiesto che i browser facciano questo e non voglio che accada.

C'è un modo per ottenere ciò che voglio (a parte fare screenshot, tagliare e incollare faticosamente insieme e stampare le immagini risultanti)? C'è un modo per dire al browser web che uso (Firefox, Chrome, Safari, IE, o Opera): “stampa questa pagina come la renderesti su una finestra del browser arbitrariamente alta”?

(PS: vedi anche: Print From Browser Using Screen CSS ?)

Risposte (8)

42
42
42
2017-11-26 06:13:40 +0000

Chrome ha questa funzione incorporata negli Strumenti di sviluppo, ma in una posizione molto poco ovvia.

  • Apri gli Strumenti di sviluppo (Windows: F12 o Ctrl+Shift+I, Mac: Cmd+Opt+I)
  • Clicca sul pulsante del menu ad hamburger Personalizza e controlla DevTools e scegli Altri strumenti > Impostazioni di rendering (o Rendering nelle versioni più recenti).
  • Spunta la casella di controllo Emulate print media nella scheda Rendering e seleziona il tipo di supporto Screen.

Citato per lo più da questa risposta . Vedi sotto per la differenza.

Ora quando stampi, la stampa sarà esattamente quella che vedi. Assicurati di tenere aperti gli strumenti di sviluppo fino alla stampa. Una volta chiusi gli strumenti di sviluppo, l'impostazione del rendering verrà riportata alla normalità.

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

23
23
23
2014-11-28 12:59:05 +0000

Perché le mie pagine web non stampano quello che vedo nel mio browser?

La ragione per cui alcune delle tue pagine web stampano in modo diverso è perché hanno un foglio di stile di stampa.


Cos'è un foglio di stile di stampa?

Un foglio di stile di stampa formatta una pagina web in modo che, quando viene stampata, venga automaticamente stampata in un formato di facile utilizzo. I fogli di stile di stampa esistono da molti anni e se ne è scritto molto. Eppure così pochi siti web li implementano, il che significa che ci ritroviamo con pagine web che frustratamente non vengono stampate correttamente su carta.

È notevole che così pochi siti web usino fogli di stile per la stampa come:

  • I fogli di stile per la stampa migliorano enormemente l'usabilità, specialmente per le pagine con molto contenuto (come questa!)
  • Sono incredibilmente veloci e facili da impostare

Alcuni siti web offrono un link a una versione della pagina adatta alla stampa, ma questo naturalmente deve essere impostato e mantenuto. Richiede anche che gli utenti notino questo link sullo schermo, e poi lo usino prima del modo normale in cui stampano le pagine (per esempio selezionando il pulsante di stampa nella parte superiore dello schermo). Le versioni di stampa sono comunque utili quando si stampa un certo numero di pagine web allo stesso tempo, come un articolo che si estende su diverse pagine web.

Fonte Disabilitare i fogli di stile per la stampa (CSS) quando si stampa un sito web


Come faccio a disabilitare un foglio di stile per la stampa?

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

Un'opzione è quella di prendere screenshot sequenziali man mano che si scorre la pagina, poi rimetterli insieme in Photoshop. Questo richiede tempo e ti lascia un'immagine a bassa risoluzione (72dpi).

Un altro modo per farlo è stampare la pagina, poi “salvare come” PDF invece di stampare. 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 cerca di stampare il sito. Questo è definito nell'intestazione e assomiglia a questo:

Ho trovato solo un'opzione che soddisfa veramente i miei bisogni: L'add-on / estensione “Web Developer” sviluppato da Chris Pederick.

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

È attualmente disponibile per Firefox e Chrome. Spero davvero che un giorno arrivi un'estensione per Safari, dato che io uso principalmente Safari. L'unica opzione che ho trovato per Safari è quella di disabilitare TUTTI gli stili - una caratteristica che viene fornita di default con la versione più recente (5.0.3) del browser. Questo è utile durante lo sviluppo per vedere come il tuo sito sarà visto su un browser di solo testo, ma senza la possibilità di selezionare quali stili stai disabilitando ha un'utilità limitata.

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

Fonte Print stylesheet - the definitive guide

9
9
9
2017-05-09 13:01:26 +0000

Una soluzione senza plug-in per Firefox: Aprite Web Developer Tools, in Default Developer Tools (icona dell'ingranaggio) spuntate “Take a screenshot of the entire page”. Hai bisogno di fare questa parte solo una volta.

Poi in Developer Tools, clicca sull'icona della fotocamera. L'intera pagina sarà salvata come .png. Da qui potete stamparla, convertirla in pdf, ecc.

8
8
8
2014-12-02 07:29:40 +0000

Sto usando l'estensione Chrome: Schermata pagina web . Con due clic la pagina web completa viene convertita in jpg o pdf. Non c'è più bisogno di incollare gli screenshot da soli. Questa pagina si presenta così:

3
3
3
2016-10-12 11:47:35 +0000

Anche io stavo affrontando un problema simile. Attualmente sto usando Print Friendly and PDF Extenstion for Chrome .

La migliore caratteristica è che posso cancellare manualmente gli elementi che non voglio nella mia stampa/PDF.

1
1
1
2016-10-27 18:42:56 +0000

(A rischio di trasformarlo in un insieme di risposte Raccomandazioni software , ma finora, installare e usare l'estensione X del browser 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 soddisfatto. Non ha avuto problemi con una lunga pagina di Quora .

_Aggiornamento (novembre, 2017): questa non è più l'opzione migliore: Firefox e Chrome ora supportano l'acquisizione di screenshot a pagina intera nei loro Strumenti di sviluppo _.

1
1
1
2019-03-14 12:26:08 +0000

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

  1. Premere F12. Apparirà il pannello degli strumenti di sviluppo.
  2. Vicino all'angolo in alto a destra, c'è l'icona di una macchina fotografica. Per fare uno screenshot dell'intera pagina, cliccaci sopra.

Nelle Impostazioni (per accedervi, clicca sui tre puntini a destra dell'icona della macchina fotografica), puoi personalizzare leggermente il suo comportamento; di default, salverà lo screenshot nella cartella dei download di Firefox.

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

1
1
1
2017-06-22 16:06:45 +0000

Eccone un altro chiamato OpenScreenShoot . Mi piace perché è Open source, disponibile su GitHub, e ha funzionato per me per una pagina web molto lunga sulla quale, altre alternative come WebpageScreenShot hanno fallito.