PhantomJS - Rendering nicht funktioniert, um alle Bilder anzeigen

Ich habe eine phantomjs script, das ist ein Schritt durch die Seiten meiner Website.

Für jede Seite, die ich verwenden page = new WebPage() und dann page.close() nach Abschluss der mit der Seite. (Dies ist eine vereinfachte Beschreibung des Prozesses, und ich bin mit PhantomJS version 1.9.7.)

Während auf jeder Seite, die ich verwenden page.renderBase64('PNG') ein-oder mehrmals, und fügen Sie die Ergebnisse in ein array.

Wenn ich alle fertig, ich Baue eine neue Seite und das array Durchlaufen von Bildern, das hinzufügen jeder an die Seite, mit <img src="data:image/png;base64,.......image.data.......">.

Wenn Sie fertig sind, ich benutze page.render(...) um eine PDF-Datei.

Ist dies alles funktioniert Super... außer, dass die Bilder nicht mehr angezeigt in der PDF-Datei nach über 20 Bild - der rest einfach nur zeigen, wie 4x4-pixel schwarze Punkte

Für die Behandlung dieses...

  • Ich habe mich verändert die render Ausgabe ein PNG-Datei, und haben die gleichen
    problem nach dem 19ten oder 20ten Bild.
  • Habe ich ausgegeben, die den raw-HTML. Ich
    öffnen können, die in Chrome, und alle Bilder sichtbar sind.

Irgendwelche Ideen, warum das Rendern würde scheitern?

  • Habe die Versionen begradigt. Gleiche problem mit der version 1.9.7.
  • Ich würde gerne wissen wie du es gemacht hast für das erste Bild. Dieses kleine script nicht einmal die Ausgabe eines Bildes in der gerenderten pdf-oder png-Format.
  • Siehe mein Beispiel in der Antwort. Ich würde empfehlen, dass Sie zuweisen content eher als document.write mit einem 2. PhantomJS Seite für die Herstellung der PDF-Datei.
  • Es funktioniert gut, wenn ich ein wenig warten. Ich wusste nicht, dass onLoadFinished wird ausgelöst, wenn page.content geändert wird. Schön!
InformationsquelleAutor Glen Little | 2014-07-08
  1. 5

    Löste das Problem. Stellt sich heraus, dass PhantomJS war noch die Vorbereitung der Bilder, wenn die render ausgeführt wurde. Verschieben der render in die onLoadFinished handler, wie unten dargestellt, das Problem gelöst. Vor, die page.render wurde sofort aufgerufen, nachdem die page.content = Zuordnung.

    Für Interessierte, die etwas ähnliches macht, hier ist der Kern des Prozesses, den wir tun:

    var htmlForAllPages = [];

    dann, da laden wir jede Seite in PhantomJS:

    var img = page.renderBase64('PNG');
...
htmlForAllPages.push('<img src="data:image/png;base64,' + img + '">');
...

    Wenn Sie fertig sind, wird die fertige PDF-Datei wird erstellt... Wir haben ein template-Datei bereit, mit allen erforderlichen HTML-und CSS-etc. und legen Sie einfach unsere generierten HTML-Code in es:

    var fs = require('fs');
var template = fs.read('DocumentationTemplate.html');
var finalHtml = template.replace('INSERTBODYHERE', htmlForAllPages.join('\n'));

var pdfPage = new WebPage();
pdfPage.onLoadFinished = function() {
    pdfPage.render('Final.pdf');
    pdfPage.close();
};
pdfPage.content = finalHtml;
    • Ja, danke. Ich zog diese aus dem eigentlichen code, die ist über 1000 Zeilen javascript, das tun viele andere Dinge auch!
    InformationsquelleAutor Glen Little
Schreibe einen Kommentar