Genera PDF a pagina singola con PhantomJS

Question

Esportare una pagina Web di altezza variabile in pdf utilizzando PhantomJS. Dal momento che i pdf possono avere qualsiasi dimensione di pagina (più come il rapporto però, dal momento che è vettoriale), vorrei esportarlo in un modo che crea una singola pagina nel pdf in cui adattarsi all'intera pagina web.

Fortunatamente, utilizzando il metodo evaluate PhantomJS posso facilmente rilevare l'altezza della pagina

page.includeJs('jquery.js', function() { 
    var pageHeight = page.evaluate(function() { 
    return $('#content').height(); 
    }); 
}); 

Tuttavia, non sono sicuro di come posso usare a mio vantaggio. viewportSize non sembra influenzare questo in alcun modo, dal momento che non sto visualizzando la finestra ma l'intero documento. L'ho impostato su un valore fisso {width: 800, height: 800}

Quindi non riesco a comprendere le dimensioni dello paperSize. Impostare l'altezza della pagina restituitaAltezza renderà le pagine 1,5x, quindi ho provato a modificare la larghezza, ma in realtà non aggiungo a nessuna formula che riesco a capire.

Tutte le idee di come raggiungere questo obiettivo, o avete ulteriori delucidazioni sul correlazione tra la proprietà paperSize ei limiti di pixel di dimensioni resi dalla pagina

Answer 1

ViewportSize simula le dimensioni della finestra come in un tradizionale browser. Influisce sul rendering della pagina a causa del layout HTML ma non direttamente sul rendering PDF.

Utilizzare page.papersize per definire la dimensione della pagina Web durante il rendering come PDF. Con un po 'di jQuery, è facile per rendere la pagina web in un unico documento, in questo modo:

var page = require('webpage').create(), 
    system = require('system'), 
    address, output; 

if (system.args.length != 3) { 
    console.log('Usage: spdf.js URL filename'); 
    phantom.exit(1); 
} else { 
    address = system.args[1]; 
    output = system.args[2]; 
    page.viewportSize = { width: 600, height: 600 }; 

    page.open(address, function (status) { 
     if (status !== 'success') { 
      console.log('Unable to load the address!'); 
      phantom.exit(); 
     } else { 
      var size = page.evaluate(function() { 
       return {width: width = $(document).width(), height : $(document).height() }; 
      }); 

      page.paperSize = size; 

      page.render(output); 
      phantom.exit(); 
     } 
    }); 
} 

Answer 2

Estendere risposta Cybermaxs', ho aggiunto

• impostare una larghezza fissa (36 centimetri corrispondeva bene con my view port) e
• un'unità al calcolo altezza
• impostare il margine su 0px.

Non riesco a dare una buona spiegazione, ma funziona per me.

Lo script completo:

var page = require('webpage').create(), 
system = require('system'), 
address, output, size; 

if (system.args.length < 3 || system.args.length > 5) { 
    console.log('Usage: screenshot.js <URL> <filename>'); 
    phantom.exit(1); 
} else { 
    address = system.args[1]; 
    output = system.args[2]; 
    page.viewportSize = { width: 1280, height: 900}; 
    page.open(address, function (status) { 
     if (status !== 'success') { 
      console.log('Unable to load the address!'); 
      phantom.exit(); 
     } else { 
      window.setTimeout(function() { 
       page.includeJs("//code.jquery.com/jquery-1.10.1.min.js", function() { 
        var size = page.evaluate(function() { 
         return {width: width = "36cm", height : $(document).height()*2+400 + "px", margin: '0px' }; 
        }); 
        page.paperSize = size;   
        page.render(output); 
        phantom.exit(); 
       }); 
      }, 400); 
     } 
    }); 
}