PDFKit - Пользовательские шрифты - fs.readFileSync не является функцией

Question

Я использую PDFKit для приложения. Я просто использую его в браузере в HTML-файле с Javascript (без Node.js).

Я скачал PDFKit из GitHub: https://github.com/devongovett/pdfkit/releases

, а также Blob Поток: https://github.com/devongovett/blob-stream

Я пытаюсь включить пользовательский шрифт в соответствии с документацией, как так:

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

Но я всегда получайте эту ошибку:

fs.readFileSync is not a function 

Это имеет смысл, потому что fs.readFileSync является частью node.js, и я не использую это. Однако пример в документах говорит, что это можно использовать в браузере.

Я знаю, что есть также вариант Browserify, но я не уверен, как или, если это поможет в этой ситуации

Answer 1

Кажется, вы должны использовать Browserify для этой функции, и используя скомпилированный PDFKit.js не будет сокращать его для любой из функций Node.js.

Answer 2

Вы должны использовать 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

Я побежал в эту проблему и ответ Андреа является лишь частью решения. Вам действительно нужно настроить файл pdfkit.js. Но сначала вы должны сделать то, что сделал Андреа:

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

Как я уже говорил вам нужно настроить файл pdfkit.js. Примерно по строке 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; 
      } 
     } 
    } 

Убедитесь, что вы также включили blob-stream.js. Я добавил дополнительный параметр после // START NEW, который заботится о буферах массивов, которые поступают из XMLHttpRequests.

Я не знаю, является ли это лучшим решением, но оно работает.