C3: PDF-Generierung durch wkhtmltopdf schlägt mit c3 0.3.0 . fehl

Erstellt am 10. Sept. 2014  ·  17Kommentare  ·  Quelle: c3js/c3

Wenn wkhtmltopdf zum Generieren von PDF-Dokumenten aus HTML mit c3-Charts verwendet wird, meldet die neueste Version von c3 (0.3.0) den Fehler "Warning: undefined:0 TypeError: 'undefined' is not a function". Das resultierende PDF zeigt Leerzeichen anstelle eines Diagramms.

Eine ältere Version von c3 hat das Diagramm schwimmend erstellt. Ich habe dies mit Kreis- und Balkendiagrammtypen reproduziert.

Vollständiges HTML-, CSS- und Javascript-Paket mit wkhtmltopdf ist unter
http://burgan.whitevector.com/images/bug_report.zip

Vollständige Ausgabe von wkhtmltopdf:
Shark@virshark :~/bug_report$ sh generate_pdf.sh
Seiten laden (1/6)
Warnung: undefined:0 TypeError: 'undefined' ist keine Funktion
Seiten zählen (2/6)
Links auflösen (4/6)
Kopf- und Fußzeilen laden (5/6)
Drucken von Seiten (6/6)
Fertig

Hilfreichster Kommentar

Ich vermute, dass dies daran liegt, dass wkhtmltopdf QtWebKit was Probleme mit Function.prototype.bind , einer Methode, die in der neuen Version von c3 verwendet wird. Ich musste mich selbst mit einem ähnlichen Problem auseinandersetzen, als ich einen phantomjs-Exporter schrieb. Die Lösung besteht darin, diesen kleinen Polyfill hinzuzufügen:

Function.prototype.bind = Function.prototype.bind || function (thisp) {
  var fn = this;
  return function () {
    return fn.apply(thisp, arguments);
  };
};

Ich bin mit wkhtmltopdf nicht vertraut, aber Sie müssen diesen Code im Kontext der gerenderten Seite ausführen (fügen Sie ihn einfach vor den c3-js-Dateien in die Seite ein und es funktioniert).

Alle 17 Kommentare

Ich vermute, dass dies daran liegt, dass wkhtmltopdf QtWebKit was Probleme mit Function.prototype.bind , einer Methode, die in der neuen Version von c3 verwendet wird. Ich musste mich selbst mit einem ähnlichen Problem auseinandersetzen, als ich einen phantomjs-Exporter schrieb. Die Lösung besteht darin, diesen kleinen Polyfill hinzuzufügen:

Function.prototype.bind = Function.prototype.bind || function (thisp) {
  var fn = this;
  return function () {
    return fn.apply(thisp, arguments);
  };
};

Ich bin mit wkhtmltopdf nicht vertraut, aber Sie müssen diesen Code im Kontext der gerenderten Seite ausführen (fügen Sie ihn einfach vor den c3-js-Dateien in die Seite ein und es funktioniert).

Danke schön! Das Einfügen dieser 6 Zeilen vor anderen Javascripts löste das Problem.

Danke! Dieses Problem scheint gelöst zu sein, also lassen Sie mich bitte schließen.

@yuvii
dwight-schrute-thank-you-cry-on-the-office

@yuvii du bist großartig!
slothsome

Ich bin auf das gleiche Problem gestoßen, aber mit vega / wkhtmltopdf . Die Lösung von @yuvii hat wunderbar funktioniert. Vielen Dank!

@yuvii du bist König!

@yuvii Danke!!!!!

Für Googler hat @yuvii mein Generationsproblem mit fullcalendar gelöst. Ich habe Stunden damit verbracht, nach einer Lösung zu suchen.
Danke schön.

Super @yuvii . Ich hatte das gleiche Problem, als sich die Google Maps-API änderte

Vielen Dank, dies hat mein Django-PDFkit-Problem vollständig gelöst!

Danke @yuvii . Ich habe Stunden damit verbracht, nach einer Lösung zu suchen:
Zeichnen auf Leinwand mit Fabric.js > Html > wkhtmltopdf > .pdf-Datei
HTML im Browser war korrekt, aber die ausgegebene .pdf-Datei hatte eine leere Leinwand.

Anscheinend hat Fabric.js das gleiche Problem

Ich vermute, dass dies daran liegt, dass wkhtmltopdf QtWebKit was Probleme mit Function.prototype.bind , einer Methode, die in der neuen Version von c3 verwendet wird. Ich musste mich selbst mit einem ähnlichen Problem auseinandersetzen, als ich einen phantomjs-Exporter schrieb. Die Lösung besteht darin, diesen kleinen Polyfill hinzuzufügen:

Function.prototype.bind = Function.prototype.bind || function (thisp) {
  var fn = this;
  return function () {
    return fn.apply(thisp, arguments);
  };
};

Ich bin mit wkhtmltopdf nicht vertraut, aber Sie müssen diesen Code im Kontext der gerenderten Seite ausführen (fügen Sie ihn einfach vor den c3-js-Dateien in die Seite ein und es funktioniert).

Vielen Dank, hat mir den Tag gerettet. Bei mir hat es mit C3js funktioniert. Es ist wichtig, die Breite des Diagrammcontainers festzulegen.

Diese Kommentare sind erstaunlich. Ich programmiere nicht mehr, ich habe diese Welt verlassen, aber hin und wieder besuche ich diese Seite und sehe voller Ehrfurcht zu, wie eine Lösung, die ich für ein Nischenproblem gefunden habe, _so vielen Menschen_ seit 5 Jahren geholfen hat. Es ist verrückt.

Ich vermute, dass dies daran liegt, dass wkhtmltopdf QtWebKit was Probleme mit Function.prototype.bind , einer Methode, die in der neuen Version von c3 verwendet wird. Ich musste mich selbst mit einem ähnlichen Problem auseinandersetzen, als ich einen phantomjs-Exporter schrieb. Die Lösung besteht darin, diesen kleinen Polyfill hinzuzufügen:

Function.prototype.bind = Function.prototype.bind || function (thisp) {
  var fn = this;
  return function () {
    return fn.apply(thisp, arguments);
  };
};

Ich bin mit wkhtmltopdf nicht vertraut, aber Sie müssen diesen Code im Kontext der gerenderten Seite ausführen (fügen Sie ihn einfach vor den c3-js-Dateien in die Seite ein und es funktioniert).

Holly Molly, du wirst für immer einen besonderen Platz in meinem Herzen haben. Highchart-Grafik funktionierte im Webbrowser ordnungsgemäß, wurde jedoch mit Wkhtmltopdf nicht richtig in PDF konvertiert. Wenn jemand das gleiche Problem hat, fügen Sie einfach diese Funktion hinzu, bevor Sie Ihr Highchart-Skript aufrufen. Endlich nach 4 Stunden eine Lösung gefunden. Um Ihr Problem mit Wkhtmltopdf und Highchart beheben zu können, vergessen Sie nicht, das Argument "wkhtmltopdf.exe --javascript-delay 10000 --no-stop-slow-scripts --enable-javascript --debug-javascript" hinzuzufügen.

Ich vermute, dass dies daran liegt, dass wkhtmltopdf QtWebKit was Probleme mit Function.prototype.bind , einer Methode, die in der neuen Version von c3 verwendet wird. Ich musste mich selbst mit einem ähnlichen Problem auseinandersetzen, als ich einen phantomjs-Exporter schrieb. Die Lösung besteht darin, diesen kleinen Polyfill hinzuzufügen:

Function.prototype.bind = Function.prototype.bind || function (thisp) {
  var fn = this;
  return function () {
    return fn.apply(thisp, arguments);
  };
};

Ich bin mit wkhtmltopdf nicht vertraut, aber Sie müssen diesen Code im Kontext der gerenderten Seite ausführen (fügen Sie ihn einfach vor den c3-js-Dateien in die Seite ein und es funktioniert).

Vielen Dank, ich habe gerade über 6 Zeilen eingesteckt und es funktioniert mit dem Höhendiagramm, es wurde fast 3 - 4 Stunden lang debuggt.

Ich vermute, dass dies daran liegt, dass wkhtmltopdf QtWebKit was Probleme mit Function.prototype.bind , einer Methode, die in der neuen Version von c3 verwendet wird. Ich musste mich selbst mit einem ähnlichen Problem auseinandersetzen, als ich einen phantomjs-Exporter schrieb. Die Lösung besteht darin, diesen kleinen Polyfill hinzuzufügen:

Function.prototype.bind = Function.prototype.bind || function (thisp) {
  var fn = this;
  return function () {
    return fn.apply(thisp, arguments);
  };
};

Ich bin mit wkhtmltopdf nicht vertraut, aber Sie müssen diesen Code im Kontext der gerenderten Seite ausführen (fügen Sie ihn einfach vor den c3-js-Dateien in die Seite ein und es funktioniert).

Hat meinen Tag gerettet. Hatte tagelang zusammen gekämpft :+1:

War diese Seite hilfreich?
0 / 5 - 0 Bewertungen

Verwandte Themen

Shugardude picture Shugardude  ·  4Kommentare

udhaya2kmrv picture udhaya2kmrv  ·  3Kommentare

ivarkallejarv picture ivarkallejarv  ·  3Kommentare

jstone-ponderosa picture jstone-ponderosa  ·  3Kommentare

DieterSpringer picture DieterSpringer  ·  4Kommentare