Come si stampa con il foglio di stile dello schermo?

Un certo numero di siti Web che utilizzo hanno fogli di stile davvero pessimi per i supporti di stampa, ma i loro fogli di stile dello schermo sono abbastanza buoni.

C'è un modo per dire al mio browser di ignorare il foglio di stile di stampa e semplicemente di stampare con il foglio di stile dello schermo?

Vorrei anche farlo quando voglio mostrare ai clienti la differenza tra i due.

L'uso di Chrome Developer Tools ( Ctrl+ Shift+ I) è l'unica cosa che ho scoperto che funziona.

1. Cerca tutte le istanze di media="screen"ed elimina quell'attributo.
2. Quindi cerca media="print"ed elimina l'intero link.
3. Quindi prova a stampare.

Questo in genere mi dà la pagina con lo stile dello schermo.

Se vuoi davvero disabilitare gli stili di stampa, puoi installare l'estensione Web Developer (penso che ci sia una versione per Firefox e Chrome). Ha un pulsante per disabilitare gli stili di stampa. Tuttavia, non estende lo stile "schermo" alla stampa, quindi la maggior parte delle volte non funziona come speri.

Seguendo l' idea di James ma usando jQuery:

$('*[media="screen"],*[media="print"]').attr('media', '')

Se la pagina non ha jQuery, iniettala:

var el = document.createElement('script'); el.type = "text/javascript"; el.src = "http://code.jquery.com/jquery-latest.pack.js"; document.body.appendChild(el);

Esiste un nuovo metodo per scegliere direttamente l'emulazione multimediale in Strumenti per gli sviluppatori, vedere https://stackoverflow.com/questions/9540990/using-chromes-element-inspector-in-print-preview-mode/

Ho trovato un modo semplice per farlo in Chrome .

Apri lo Strumento per gli sviluppatori> Rendering> Seleziona 'schermo' in Emulate CSS media.

Ora prova a stampare. Sceglierà lo schermo CSS anziché Print CSS.

Leo aveva una buona idea lì, ma non fa esattamente quello che James ha detto : dovrebbe essere

$('*[media="screen"]').attr('media', '');$('*[media="print"]').remove();

Suggerimento: salvare quanto segue come bookmarklet per un facile utilizzo:

javascript:var%20el=document.createElement('script');el.type="text/javascript";el.src="http://code.jquery.com/jquery-latest.pack.js";document.body.appendChild(el);setTimeout(function(){$('*[media="screen"]').attr('media','');$('*[media="print"]').remove();},%202000)

Questo precarica jQuery e attende 2 secondi affinché finisca, ma se questa attesa non è sufficiente, basta eseguirla di nuovo, nel frattempo jQuery avrebbe dovuto essere caricato.

1. Fai qualunque cosa James abbia detto ;)

   Puoi controllare l'output aprendo le impostazioni degli Strumenti di sviluppo di Chrome (angolo in basso a destra) e selezionare "Sostituisci" l'opzione "Emula stampa supporto CSS". Attivando questa opzione è possibile confrontare la stampa e la visualizzazione dello schermo. Divertiti!

2. Installa questo componente aggiuntivo: https://chrome.google.com/webstore/detail/print-background-colors/gjecpgdgnlanljjdacjdeadjkocnnamk

Ora vengono stampati anche immagini e colori di sfondo.

Bug: non funziona con gli sprite CSS.

EDIT: Chrome ha cambiato la visualizzazione di stampa nel 2014 penso quindi non è più necessario utilizzare il componente aggiuntivo collegato.

Ho appena riscontrato questo problema con un sito Web che utilizzava un singolo file CSS utilizzando @media printe @media screen, quindi la soluzione per disabilitare il file CSS di stampa separato non funzionava per me. Mentre potrei certamente modificare il CSS e commentare il blocco di stampa durante la visualizzazione della pagina, quelle modifiche non sono state riportate nell'anteprima di stampa.

La soluzione che ho trovato è stata l'estensione Print Edit per Firefox e Chrome . Ti consente di modificare la pagina immediatamente prima della stampa e include un semplice pulsante per utilizzare lo stile Web ( @media screen) per la pagina.

Ho dovuto cambiare leggermente la scala a cui stavo stampando, poiché la superficie di stampa è all'incirca un rapporto di 17:22 mentre il mio browser è all'incirca 16: 9, quindi alcune delle cose sulla pagina stavano diventando un po 'affollate orizzontalmente. Ho anche dovuto abilitare la stampa dei colori e delle immagini di sfondo separatamente

A volte i siti Web utilizzano CSS per specificare che stili diversi devono essere utilizzati sullo schermo e durante la stampa. Questo è spesso positivo, ma può anche essere confuso e problematico. Ispeziona il codice sorgente della pagina e cerca qualcosa come:

@media print {
  *:after {
    color: #000 !important;
    background: transparent !important;
  }

Uno dei motivi per cui questo problema è comune è che i siti Web che utilizzano il popolare framework Bootstrap usano il file onnipresente bootstrap.min.css , che contiene lo stile CSS sopra.

La cosa fondamentale da cercare è @media print. I siti Web hanno spesso strutture complesse e può aiutare a salvare la pagina localmente e ispezionarla con uno strumento di ricerca del testo ricorsivo.

Quando pensi di aver trovato il punto nel codice CSS, puoi modificare la pagina direttamente nel tuo browser usando le sue funzionalità di sviluppo. (In Chrome premi Ctrl+ Shift+ Iper avviarli.)

Cerca il codice CSS e rimuovi o invalida le righe che causano il problema. Verificare che l'operazione abbia funzionato utilizzando "Anteprima di stampa".

Installa il componente aggiuntivo Greasemonkey e usa lo script indicato di seguito.

Ho modificato uno script che ho trovato qui http://www.netsi.dk/wordpress/index.php/2011/07/07/printing-html-pages-make-screen-and-print-appear-the-same/

Alla fine ho cambiato "schermo" in "stampa" (non ho idea di jQuery, quindi non farmi domande) in modo che invii effettivamente la versione dello schermo alla stampante. Quando stampo in pdf, (usando le stampanti Foxit o Nitro Pdf), imposto il tipo di pagina su Tabloid Extra in modalità orizzontale in modo che le dimensioni del pdf corrispondano più o meno alle dimensioni dello schermo. Godere! Ricorda, non so nulla della programmazione, quindi il merito va all'autore originale.

// ==UserScript==
// @name         Show print version (A Cross Browser Example) (showPrintVersion.user.js)
// @namespace    netsi
// @match http://*/*
// @author       Sten Hougaard
// @description  Simply add #print to the URL. As descriped in my blog post (goo.gl/MEizV) this will activate any media=print stylesheets so that you can see the print version without printing
// ==/UserScript==

// a function that loads jQuery and calls a callback function when jQuery has finished loading
function addJQuery(callback) {
  var script = document.createElement("script");
  script.setAttribute("src", "http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js");
  script.addEventListener('load', function () {
    var script = document.createElement("script");
    script.textContent = "(" + callback.toString() + ")();";
    document.body.appendChild(script);
  }, false);
  document.body.appendChild(script);
}

// the guts of this userscript
function main() {
  var bPrint = (window.location.toString().indexOf('#print')!=-1);  
  if (bPrint) {
    // The user wants to print this page
    jQuery('link[media*="screen"]').attr('media', 'all'); // Enable the screen styling for all media types, including screen.
    jQuery('link[media*="print"]').remove(); // remove any styling related to print
  }
}

// load jQuery and execute the main function
addJQuery(main);

Prova ad abilitare l' "Print background (colors & images)"opzione in Page Setupe controlla come appare Print Preview(È per FF).

Simile a James: utilizza la scheda "Sorgenti" negli strumenti per sviluppatori di Chrome e sostituisci tutte le istanze di media printcon media speech. Pertanto, tutte le modifiche css per nascondere le barre di navigazione ecc. Non verranno applicate durante la stampa (ma verranno applicate quando si utilizza la sintesi vocale)

Questo può essere fattibile con JQuery come sopra.

Questo è utile perché sto usando il CDN di CSS, quindi la personalizzazione è subito

C'è un ottimo strumento per questo su Mac.

Installa Paparazzi => copia l'URL in Paparazzi => Salva immagine come => PDF

(nelle esportazioni PDF, anche il testo è selezionabile, non è solo una "immagine")

https://derailer.org/paparazzi/screenshots

godere :-)