Supporto migliore per il controllo delle opzioni di stampa come intestazioni e piè di pagina da Javascript [chiuso]

Question

Supporto migliore per il controllo delle opzioni di stampa come intestazioni e piè di pagina da Javascript [chiuso]

#1 da (4 voti)

3

Perché i browser non forniscono un meccanismo per impostare le impostazioni di stampa relative a intestazioni e piè di pagina all'interno dell'app?

Le app Web sono app a pieno titolo al giorno d'oggi e i moderni browser sono in grado di inviare una pagina formattata molto bene a una stampante (o addirittura di scaricarla come PDF), ma le app web non possono fare affidamento su questo metodo perché i browser non consentono per controllare completamente i metadati.

Le attuali possibilità non consentono ai siti Web di memorizzare le impostazioni di stampa insieme al report o al file sul server.

Ogni browser fornisce il proprio modulo di dialogo obbligatorio per impostare le impostazioni di stampa che possono essere sostituite quando necessario da un'esperienza più conveniente: opzioni in-app, adattate al caso d'uso, persistenti nel cloud e coerenti su diversi browser.

Le opzioni attualmente disponibili sono:

Delega una parte del lavoro all'utente (ad esempio, cambiandogli le opzioni dei metadati e le dimensioni / orientamento della carta stessi).
Utilizzare altri metodi che possono diventare rapidamente troppo costosi e complicati, come la generazione di PDF sul server che l'utente può scaricare.

La scelta del numero 1 non è sempre una nostra decisione. Come sviluppatori web professionisti, gli utenti finali di solito non sono i nostri clienti diretti, ma il pubblico di destinazione del nostro cliente. Inoltre, dovremmo costringere l'utente finale a fare del lavoro extra. L'esperienza dice che non si farebbe e i report verranno stampati con le impostazioni predefinite del browser, di solito con intestazioni e piè di pagina che l'utente non vuole veramente (e la carta associata spreca se lui / lei decide di stamparla senza di loro).

Opzione 2 - Generare PDF lato server - sta diventando meno un'opzione ogni giorno. Le moderne app Web sono utenti esperti di javascript e i report beneficiano di eccellenti librerie di tracciamento realizzate con JS che possono generare grafici in elementi canvas HTML che potrebbero essere stampati immediatamente se non stessimo usando questo "rifare tutto sul server" approccio. I report risultanti non hanno mai lo stesso aspetto e i programmatori devono mantenere due versioni di ogni report.
Inoltre, la generazione di PDF sul server può essere molto lenta e richiede molte risorse.

Quindi, c'è un motivo convincente per cui i programmatori di browser hanno scelto di non supportare questo tipo di personalizzazione?

browser

posta Sebastián Grignoli 12.08.2014 - 15:02

fonte

1 risposta

Leggi altre domande sui tag browser

Come strutturare al meglio Git per il nostro team [chiuso] Passare notifiche tra programmi scritti in diversi linguaggi di programmazione

score 4 · Accepted Answer

C'è una tensione definita tra i modelli adatti per l'uso interattivo e quelli che sembrano buoni sulla pagina stampata. Tutte le funzioni interattive che si sono evolute in pagine / app HTML (ad esempio moduli, pulsanti, controlli di navigazione, carichi di dati dinamici AJAX e interattività) non si adattano bene a un pezzo di carta statico. Le stampe di molte pagine web urlano positivamente "Sono una pagina web stampata! Non ero progettato per essere stampato!"

Ma ciò non significa che non possa funzionare. La maggior parte dei siti che realmente si preoccupano dell'output stampato ha un'icona della stampante separata che genera una pagina "progettata per essere stampata". Ciò richiede una programmazione aggiuntiva, ma è generalmente gestibile con l'output basato su modelli.

I moderni CSS hanno un @media che indica a quale dominio di output viene applicata una regola CSS. È possibile importare fogli di stile CSS diversi per lo schermo e la stampa:

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

Oppure puoi designare le regole direttamente all'interno di un foglio di stile, in questo modo:

@media screen {
    body { 
        background-color: green; 
        margin: 20px;
    }
    p {
        font-family: verdana,sans-serif;
        font-size: 14px;
    }
}

@media print {

    @page {
        size: letter portrait;
        margin: 0mm;
    }
    body { 
        background-color: white; 
        margin: 1in;
    }
    p {
        font-family: sans-serif;
        font-size: 20px;
        color: black;
    }
}

Nota il selettore @page imposta dimensioni, orientamento e margini della pagina. Esistono meccanismi specifici per la gestione delle prime pagine, delle pagine di sinistra e delle pagine di destra; per gestire l'impaginazione (dove si verificano interruzioni di pagina, come vengono gestite le vedove e gli orfani, ecc.) Su alcuni browser (Chrome e Opera per esempio, ed eventualmente Firefox, l'impostazione del margine di pagina su 0 eliminerà le noiose intestazioni e i piè di pagina automaticamente forniti. Ma come tutto il Web, questo è specifico del browser: su alcuni browser (guardandoti, IE!), L'utente potrebbe dover disattivare questi abbellimenti durante la stampa. I prodotti Microsoft sembrano anche obbedire ad alcuni controlli della pagina specifici di Microsoft come mso-header-margin , mso-footer-margin e mso-paper-source che potrebbero aiutarti a eliminare gli extra indesiderati.

Quindi, per farla breve, un buon supporto del browser per la stampa è fattibile e disponibile. Le funzionalità di progettazione orientate alla pagina del CSS non hanno il 100% della precisione di un formato di elaborazione testi o di layout di pagina, ma sono piuttosto vicine. Dovrebbero essere più comunemente usati.

Questa è la specifica CSS3 pertinente , una buona panoramica della regola @page e un buon articolo su come impostare un foglio di stile di stampa .