Ho bisogno di creare un report in formato HTML, che è formato A4, come posso farlo?

Ho bisogno di fare una relazione in HTML che dovrebbe essere esattamente la dimensione A4. Ha bisogno di intestazioni e piè di pagina. Sicuramente questo può essere fatto con css si?Ho bisogno di creare un report in formato HTML, che è formato A4, come posso farlo?

qualcuno ha qualche esempio o codice di esempio per questo?

ho cercato con Google e gli snippet di codice che ho ottenuto tutti parlano di media query e non funzionano ..

in modo sostanzialmente è per scopi di stampa, il codice HTML generato verrà convertito in un documento PDF. Sto usando MVC4 e ho trovato uno strumento che convertirà una vista in PDF. Una vista è solo HTML puro. Così ho pensato perché non lo stile HTML per rappresentare il rapporto di output, quindi PDF esso.

Quindi ho bisogno la possibilità di avere un colpo di testa, e un piè di pagina (in fondo alla pagina) e poi il contenuto al centro di entrambi

Ho provato ad utilizzare il seguente codice, ma non sembra per funzionare ..

<html> 
<head> 
    <style type="text/css" media="all"> 
     @page { 
      size: A4 portrait; /* can use also 'landscape' for orientation */ 
      margin: 1.0in; 
      border: thin solid black; 
      padding: 1em; 

      @bottom-center { 
       content: element(footer); 
      } 

      @top-center { 
       content: element(header); 
      } 
     } 

     #page-header { 
      display: block; 
      position: running(header); 
     } 

     #page-footer { 
      display: block; 
      position: running(footer); 
     } 

     .page-number:before { 
      content: counter(page); 
     } 

     .page-count:before { 
      content: counter(pages); 
     } 
    </style> 
</head> 

<body> 
    <div id="page-header"> 
     <p>Header text</p> 
    </div> 

    <div id="page-footer"> 
     <p>Footer text</p> 
     <p>Page <span class="page-number"/> of <span class="page-count"/></p> 
    </div> 

    <div id="page-content"> 
     <p>Page 1.</p> 

     <p style="page-break-after:always;"/> 

     <p>Page 2.</p> 
    </div> 
</body> 
</html>

fonte

2013-12-10 user2206329

Onestamente credo media query sono la strada da percorrere. Non è esattamente quello per cui sono progettati? '@media print' consente di definire esattamente come deve apparire la pagina una volta stampata. Ma ... Non ho mai provato qualcosa del genere, quindi è solo un tipo di "primo pensiero" ... – Charlie74

qualche esempio? Ho provato a utilizzare http://www.fanuriotimetracking.com/files/releases/2.7/help/html/template-guide-html.html andare alla pagina di esempio .. non funziona – user2206329

'# a4 {width: 8.27in; altezza: 11,69 pollici; } ' – mdesdev

CSS può essere utilizzato per impostare larghezza/altezza in una dimensione del mondo reale; per esempio nel tuo file print.css:

div.A4 { 
    width: 21 cm; 
    height: 29.7 cm; 
    margin: 0; 
}

Tuttavia, HTML/CSS non è pensato per questo scopo; le domande dei media sono davvero il modo migliore per gestirle. Ti consiglierei davvero di dedicare un po 'più di tempo a cercare di farli funzionare; vale la pena se pensi di utilizzare questo sito più di una volta.

fonte

2013-12-10 02:45:30 AaronB

@ user2206329 se ne hai bisogno per la stampa Raccomando caldamente di non codificare le dimensioni del formato carta usando css perché l'utente può cambiare il formato della carta o anche l'orientamento (orizzontale, verticale) usa le query multimediali invece – Leo

Molto concordato , ma poiché OP non desiderava specificamente le query sui media, ho pensato di offrire un altro modo per farlo. Ma sì, le domande dei media sono molto, molto preferibili. – AaronB

Non ho mai detto che non volevo le query sui media .. Ho detto che le query multimediali che ho usato non funzionavano. Se qualcuno ha delle query multimediali che funzionano .. più che felici di usarle – user2206329

Perché la dimensione A4? Per scopi di stampa? Se per motivi di stampa non ci si deve nemmeno preoccupare. Usa CSS per questo scopo. Se l'elemento html viene visualizzato come elemento di blocco (predefinito) e non si specifica alcuna larghezza o altezza, il documento html verrà ridimensionato al documento delle impostazioni della stampante quando si tenta di stampare. Se è necessario regolare le impostazioni css per la stampa, utilizzare css media queries

Ignorare questa risposta se non è correlata alla stampa, ma fornire maggiori dettagli nel post in modo da poter fornire la soluzione corretta.

Speranza ha senso

Leo

fonte

2013-12-10 02:45:40 Leo

domanda aggiornata – user2206329

Questo strumento di conversione PDF è in grado di gestire formati di stampa e carta? Che strumento è? Ho usato altri convertitori PDF per MVC e ASP.NEt e di solito gestiscono questa roba in una bella modalità OO – Leo

sto usando https://github.com/webgio/Rotativa – user2206329

Ho bisogno di creare un report in formato HTML, che è formato A4, come posso farlo?

risposta

Problemi correlati