PDFKit - Caratteri personalizzati - fs.readFileSync non è una funzione

Question

Sto utilizzando PDFKit per un'applicazione. Lo sto solo utilizzando nel browser in un file HTML, con Javascript (senza Node.js).

Ho scaricato PDFKit da GitHub: https://github.com/devongovett/pdfkit/releases

così come Blob Stream: https://github.com/devongovett/blob-stream

Sto cercando di includere un carattere personalizzato per la documentazione in questo modo:

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

Ma io ottieni sempre questo errore:

fs.readFileSync is not a function 

Questo ha senso perché fs.readFileSync fa parte di node.js e non lo sto usando. Tuttavia, l'esempio nei documenti dice che questo può essere usato nel browser.

So che c'è anche un'opzione Browserify, ma non sono sicuro di come o se che avrebbe aiutato in questa situazione

Answer 1

Sembra è necessario utilizzare Browserify per questa funzionalità e che l'utilizzo di un PDFKit.js precompilati non lo taglierà per nessuna delle funzionalità specifiche di Node.js.

Answer 2

si deve usare un ArrayBuffer:

 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

Ho anche eseguito in a questo problema e la risposta di Andrea è solo una parte della soluzione. In realtà devi modificare il file pdfkit.js. Ma prima devi fare quello che ha fatto Andrea:

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

Come ho detto, è necessario modificare il file pdfkit.js. Intorno alla riga 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; 
      } 
     } 
    } 

Assicurarsi di includere anche blob-stream.js. Ho aggiunto un'opzione extra dopo // START NEW che si occupa dei buffer di array che provengono da XMLHttpRequests.

Non so se questa è la soluzione migliore, ma funziona.