PDFKit - Benutzerdefinierte Schriftarten - fs.readFileSync ist keine Funktion

Question

Ich verwende PDFKit für eine Anwendung. Ich verwende es nur im Browser in einer HTML-Datei mit Javascript (keine Node.js).

ich heruntergeladen PDFKit von GitHub: https://github.com/devongovett/pdfkit/releases

sowie Blob Stream: https://github.com/devongovett/blob-stream

Ich versuche, wie so eine benutzerdefinierte Schriftart pro der Dokumentation enthalten:

doc.registerFont('Custom Font', 'fonts/GOODDP__.TTF'); 
doc.font('Custom Font').fontSize(fontSize).text($("#text1").val(), xPos, yPos, configObj); 

Aber ich erhalte immer diesen Fehler:

fs.readFileSync is not a function 

Das macht Sinn, weil fs.readFileSync Teil von node.js ist, und ich verwende das nicht. Das Beispiel in der Dokumentation besagt jedoch, dass dies im Browser verwendet werden kann.

Ich weiß, es gibt auch eine Browserify Option, aber ich bin nicht sicher, wie oder ob das in dieser Situation helfen würde

Answer 1

Es scheint, Sie Browserify für diese Funktionalität und dass die Verwendung eines vorkompilierte PDFKit.js verwenden müssen wird es für keine der Node.js-spezifischen Funktionen schneiden.

Answer 2

Sie haben eine Arraybuffer verwenden:

 var oReq = new XMLHttpRequest(); 
     oReq.open("GET", "css/fonts/Open_Sans/OpenSans-Regular.ttf", true); 
     oReq.responseType = "arraybuffer"; 

     oReq.onload = function(oEvent) { 
      var arrayBuffer = oReq.response; // Note: not oReq.responseText 

      if (arrayBuffer) { 
       PdfExporter.doc.registerFont('OpenSans', arrayBuffer) 
      } 
     }; 

     oReq.send(null); 

Answer 3

Ich lief auch in dieses Problems und Andrea Antwort ist nur ein Teil der Lösung. Sie müssen die pdfkit.js Datei wirklich optimieren. Aber zuerst müssen Sie tun, was Andrea tat

var myImage; 
var oReq = new XMLHttpRequest(); 
oReq.open("GET", "myimage.jpg", true); 
oReq.responseType = "arraybuffer"; 
oReq.onload = function(oEvent) 
{ 
    myImage = oReq.response; //image as an arraybuffer 
    makePDF(); 
}; 
oReq.send(null) 

//then use myImage like normal: 
doc.image(myImage); 

Wie gesagt Sie die pdfkit.js Datei optimieren müssen. Um ungefähr Linie 2888:

PDFImage.open = function(src, label) { 
    var data, match; 
    if (Buffer.isBuffer(src)) { 
     data = src; 
    } else { 
     //START NEW 
     if (src instanceof ArrayBuffer) { 
      data = new Buffer(new Uint8Array(src), 'object'); 
     } else 
     //END NEW 
     if (match = /^data:.+;base64,(.*)$/.exec(src)) { 
      data = new Buffer(match[1], 'base64'); 
     } else { 
      data = fs.readFileSync(src); 
      if (!data) { 
       return; 
      } 
     } 
    } 

Stellen Sie sicher, dass Sie auch blob-stream.js enthalten. Ich habe nach // START NEW eine zusätzliche Option hinzugefügt, die sich um Array-Puffer kümmert, die von XMLHttpRequests kommen.

Ich weiß nicht, ob das die beste Lösung ist, aber es funktioniert.