3

Please look at the fiddle example. I am less knowledge on working with pdf fonts. I am using pdfkit to generate the pdf. I am trying to load the japanese fonts but no luck. I followed most of the articles from stackoverflow but i am not successful in writing japanese text to the pdf. 

 var doc = new PDFDocument();
        var stream = doc.pipe(blobStream());      
        // draw some text
        doc.fontSize(25)
           .text("hello world", 100, 80);

            var oReq = new XMLHttpRequest();
        oReq.open("GET", "//fonts.gstatic.com/ea/mplus1p/v1/Mplus1p-Thin.ttf", true);
        oReq.responseType = "arraybuffer";

        oReq.onload = function (oEvent) {
            var arrayBuffer = oReq.response; // Note: not oReq.responseText
            if (arrayBuffer) {
                doc.registerFont('OpenSans', arrayBuffer)
                doc.fontSize(25);
                doc.font('OpenSans').text('こんにちは世界')
            }
        };

        oReq.send(null);

        // end and display the document in the iframe to the right
        doc.end();
        stream.on('finish', function () {
           document.getElementById('myiframe').src = stream.toBlobURL('application/pdf');
            console.log(stream.toBlobURL('application/pdf'))
             document.getElementById('spnmessage').innerText = "can't load the pdf in iframe in the jsfiddle. You can open the pdf through console"
        });

Here is the fiddle

user3501278
  • 257
  • 1
  • 7
  • 21
  • A few things - your fiddle does not work in Chrome, you're loading a font Mplus1p but calling it "OpenSans", and your call to `registerFont` does not seem to follow what the pdfkit documentation says you should be passing as arguments. Finally, have you made sure the font you're loading actually passes proper font validation (using [TTX](https://github.com/fonttools/fonttools) or something) because you're NOT using it as a webfont, you're trying to use it as a full OpenType font in its own right for typesetting. – Mike 'Pomax' Kamermans Jan 15 '17 at 19:55
  • Did you guys found the issue ? I'am blocked at same point. https://stackoverflow.com/questions/50052154/pdfkit-not-displaying-pdf-in-jsfiddle – Hugo LOPEZ Apr 26 '18 at 21:38

2 Answers2

2

The solution mentioned here worked for me.

Basically, I downloaded Japanese fonts here. And then placed them inside my nodejs project (e.g., <project_root>/src/fonts), and inside my controller, I imported the file using the following: 

let fontpath = (__dirname+'/../fonts/TimesNewRoman.ttf');
doc.font(fontpath);

The key is using __dirname to locate the path.

Additional reference: node.jsで帳票を作成する -pdfkitで請求書作成-

eastmael
  • 371
  • 3
  • 7
0

You can find how to load custom unicode fonts in the link below:

https://stackoverflow.com/a/51026484/9598077

Hamed
  • 1,351
  • 9
  • 23