Generieren einer einzelnen Seite .pdf mit PhantomJS

Question

Ich exportiere eine Webseite mit variabler Höhe in PDF mit PhantomJS. Da PDF-Dateien jede Seitengröße haben können (eher wie Verhältnis, da es vektoriell ist), möchte ich es so exportieren, dass eine einzelne Seite in der PDF erstellt wird, in die die gesamte Webseite passt.

Zum Glück mit dem evaluate PhantomJS Methode kann ich die Seitenhöhe

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

jedoch leicht erkennen, ich bin mir nicht sicher, wie ich das zu meinem Vorteil nutzen können. viewportSize scheint dies in keiner Weise zu beeinflussen, da ich nicht das Ansichtsfenster, sondern das gesamte Dokument rendere. Ich setze es auf eine feste {width: 800, height: 800}

So kann ich nicht meinen Kopf um die paperSize Größen wickeln. Wenn ich die Höhe auf die zurückgegebene pageHeight setze, werden 1,5x Seiten gerendert, also habe ich versucht, die Breite zu optimieren, aber es ergibt nicht wirklich eine Formel, die ich verstehen kann.

Irgendwelche Ideen, wie dies zu erreichen, oder haben Sie weitere Einblicke in die Korrelation zwischen dem paperSize Eigenschaft und den pixelgroße Grenzen gemacht von der Seite

Answer 1

Viewport simuliert die Größe des Fensters, wie in einem traditionellen haben Browser. Es wirkt sich auf das Rendern der Seite aufgrund des HTML-Layouts aus, nicht jedoch direkt auf das PDF-Rendering.

Verwenden Sie page.papersize, um die Größe der Webseite beim Rendern als PDF zu definieren. Mit ein bisschen JQuery, ist es einfach, die Web-Seite in einem einzigen Dokument zu machen, wie folgt aus:

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

Erweiterung Cybermaxs' Antwort, fügte ich

• eine feste Breite eingestellt (36cm entsprach gut mit mein Ansicht Port) und
• eine Einheit zur Höhenberechnung
• setzen Sie den Rand auf 0px.

Ich kann keine gute Erklärung geben, aber es funktioniert für mich.

Das vollständige Skript:

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); 
     } 
    }); 
}