PhantomJS: il CSS esterno viene ignorato in pdf renderizzato

Sto usando nodejs con modulo phantom per generare pdf da html.PhantomJS: il CSS esterno viene ignorato in pdf renderizzato

Prima di tutto, ho letto il modello html e lo popolo con i dati e poi lo renderizzo come pdf. Vorrei che il cst bootstrap fosse usato per modellare la pagina, tuttavia lo stile è inaridito di sorta nel file pdf risultante.

Ecco il mio codice javascript:

var phantom = require('phantom'); 

var htmlTemplate; 

fs = require('fs') 
fs.readFile('template.html', 'utf8', function (err,data) { 

    var htmlTemplate = populateTemplate(data, body) 

    phantom.create(function(ph){ 
     ph.createPage(function(page) { 

      page.set("paperSize", { 
      format: "A4", 
      orientation: 'portrait', 
      margin: '1cm' 
      }); 

      page.setContent(htmlTemplate, "", function(){ 
       page.render("../userdata/test.pdf", function(){ 
       console.log("page rendered"); 
       ph.exit(); 
       }); 
      }); 

     }) 
    }); 

});

e il template HTML (simplyfied) si presenta così:

<!DOCTYPE html> 
<html> 
    <head> 
     <link href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.5/paper/bootstrap.min.css", rel="stylesheet"> 
     <meta charset="utf-8"> 
    </head> 
    <body> 

     <div class="container"> 
      <h1>Title</h1> 
      <%NAME%> 
     </div> 
    </body> 
</html>

Tutto il markup è reso alla pagina, ma non lo stile. Anche se uso file CSS locale o includere stile <style> elemento nella testa, i risultati sono gli stessi

fonte

2015-12-09 Zbynek

Se in atto alcune degli stili di Bootstrap, ma non altri, si può supporre che si tratta di un conflitto con il Libreria e stampa CSS di bootstrap. Alcune classi, in particolare le classi di griglia come col-md-, non sempre vengono ridimensionate o visualizzate correttamente su una pagina stampata. Se hai problemi a stampare il layout di griglia corretto, puoi provare a correggere queste classi. Per esempio:

sostituire ogni col-md-6 per col-xs-6.

Thanks to user Sonam for pointing this out.

Consiglio anche di dare un'occhiata al resto di questa discussione su come create printable Twitter Bootstrap page.

Tuttavia, se vengono applicati stili di bootstrap, l'origine del problema è probabilmente da qualche parte tra il caricamento del contenuto della pagina e la conversione di tale pagina in un documento .pdf. Nella mia esperienza, è sempre un po 'complicato eseguire il debug delle librerie di rendering PDF, poiché è difficile vedere dove nel flusso il processo stia andando male. Ci sono alcune cose che potresti provare:

Potresti chiamare .render() prima che la pagina abbia caricato le risorse esterne (aka bootstrap). Dai un'occhiata a questa domanda simile sul rendering di PDF in Phantom. La soluzione potrebbe essere quella di aggiungere un timeout/delay per garantire che il CSS esterno della pagina sia stato caricato.

devo aggiungere - Ci sono alcuni altra ragione è che potrebbero causare i Phantom.js pagina visualizzata a non riuscire a caricare risorse esterne. Assicurati di aver impostato correttamente Phantom.js, in particolare la chiave localToRemoteUrlAccessEnabled. Vedere il seguito StackOverflow domanda per riferimento:

Phantom-node module unable to load external resources

fonte

2015-12-09 21:52:50

grazie, il problema sembra essere css bootstrap. Alcuni stili vengono stampati, ma alcuni vengono ignorati. – Zbynek

Puoi dire quali classi e stili sono stati applicati da Bootstrap? Questo mi direbbe un po 'di più su come risolvere il problema. So che Bootstrap non è sempre noto per essere adatto alla stampa.Ecco una sezione correlata sulla stampa da bootstrap: http://stackoverflow.com/questions/12302819/how-to-create-a-printable-twitter-bootstrap-page –

il sistema di griglia non viene applicato - 'row 'e' col-xx-y' – Zbynek

PhantomJS: il CSS esterno viene ignorato in pdf renderizzato

risposta

Problemi correlati