JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script src="https://github.com/devongovett/pdfkit/releases/download/v0.6.2/pdfkit.js"></script>
<script src="https://github.com/devongovett/blob-stream/releases/download/v0.1.2/blob-stream-v0.1.2.js"></script>
<iframe id="myiframe" width=400>

</iframe>
<p>

</p>
<span id="spnmessage"></span>

JavaScript

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