Author: John Au-Yeung

Sometimes, we want to display PDF from an array buffer with JavaScript.

In this article, we’ll look at how to display PDF from an array buffer with JavaScript.

How to display PDF from an array buffer with JavaScript?

To display PDF from an array buffer with JavaScript, we can use the Fetch API.

For instance, we write:

<iframe id='pdfViewer'>

</iframe>

to add an iframe.

Then we write:

const pdfSrc = 'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/examples/learning/helloworld.pdf';

(async () => {
  const res = await fetch(pdfSrc)
  const data = await res.arrayBuffer()
  $("#pdfViewer").attr("src", URL.createObjectURL(new Blob([data], {
    type: "application/pdf"
  })))
})()

to call fetch with the pdfSrc to fetch the PDF binary.

Then we call res.arrayBuffer to assign the response to data.

Next, we call attr to set the src attribute to a URL that we create from the data PDF binary by converting that to a Blob instance.

If CORS is allowed, then the PDF should be displayed in the iframe.

Conclusion

To display PDF from an array buffer with JavaScript, we can use the Fetch API.

Sometimes, we want to add an embeddable WYSIWYG equation editor with JavaScript.

In this article, we’ll look at how to add an embeddable WYSIWYG equation editor with JavaScript.

How to add an embeddable WYSIWYG equation editor with JavaScript?

To add an embeddable WYSIWYG equation editor with JavaScript, we can use the MathQuill library.

For instance, we write:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/mathquill/0.10.1/mathquill.min.css">`

<script src="https://cdnjs.cloudflare.com/ajax/libs/mathquill/0.10.1/mathquill.min.js" type="text/javascript"></script>

<div>

</div>

to add the scripts and styles required for MathQuill.

We also add a div that’s used as the container for the editor.

Then we write:

const htmlElement = document.querySelector('div');
const config = {
  handlers: {
    edit() {}
  },
  restrictMismatchedBrackets: true
};
const MQ = MathQuill.getInterface(2);
const mathField = MQ.MathField(htmlElement, config);
mathField.latex('2^{\\frac{3}{2}}');

to select the div with document.querySelector.

And then we call MathQuill.getInterface to return a MathQuill instance.

And then we call MQ.MathField to add an equation input.

Next, we call latex with some Latex code to add some math expressions.

Conclusion

To add an embeddable WYSIWYG equation editor with JavaScript, we can use the MathQuill library.

Sometimes, we want to iterate over an object with JavaScript and Handlebars.js.

In this article, we’ll look at how to iterate over an object with JavaScript and Handlebars.js.

How to iterate over an object with JavaScript and Handlebars.js?

To iterate over an object with JavaScript and Handlebars.js, we can use the #each keyword.

For instance, we write:

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.7/handlebars.min.js"></script>

<script id="some-template" type="text/x-handlebars-template">
  <option value="none">select</option>
{{#each data}}
    <optgroup label="{{@key}}">
    {{#each this}}
        <option value="{{id}}">{{name}}</option>
    {{/each}}
    </optgroup>
{{/each}}
</script>

<select>

</select>

to add the Handlebars script and the template for looping through each entry in data.

We use #each this to loop through each array property.

@key returns the property name.

Then we write:

const source = $("#some-template").html();
const template = Handlebars.compile(source);
const data = {
  data: {
    fruit: [{
      id: 1,
      name: "banana"
    }, {
      id: 2,
      name: "apple"
    }],
    vegetables: [{
      id: 1,
      name: "broccoli"
    }]
  }
}

$('select').append(template(data));

to select the template script tag and return its HTML code with:

const source = $("#some-template").html();

Then we compile the template with:

const template = Handlebars.compile(source);

And finally, we render the template with the data with:

$('select').append(template(data));

Now we should see a drop down with the option groups rendered from the data object.

Conclusion

To iterate over an object with JavaScript and Handlebars.js, we can use the #each keyword.

Sometimes, we want to measure text width and height without rendering with JavaScript.

In this article, we’ll look at how to measure text width and height without rendering with JavaScript.

How to measure text width and height without rendering with JavaScript?

To measure text width and height without rendering with JavaScript, we can put the text in a canvas element and measure it there.

For instance, we write:

const getTextSize = (txt, font) => {
  const element = document.createElement('canvas');
  const context = element.getContext("2d");
  context.font = font;
  const tSize = {
    'width': context.measureText(txt).width,
    'height': parseInt(context.font)
  };
  return tSize;
}

const tSize = getTextSize("Hello World", "30px Arial");
console.log(tSize)

to define the getTextSize function that takes the txt text and font.

In it, we create the canvas element with document.createElement.

Then we call element.getContext to get the context.

Next, we set the font of the context.

And then we do the measure with the context.measureText method.

And we get the font height with context.font.

As a result, tSize should be {width: 154.4970703125, height: 30} according to the console log.

Conclusion

To measure text width and height without rendering with JavaScript, we can put the text in a canvas element and measure it there.

Sometimes, we want to read standard input with JavaScript.

In this article, we’ll look at how to read standard input with JavaScript.

How to read standard input with JavaScript?

To read standard input with JavaScript, we can use the readline module.

For instance, we write:

const readline = require('readline');

const rl = readline.createInterface({
  input: process.stdin,
  output: process.stdout

});

rl.question("> >What's your name?  ", (answer) => {
  console.log("Hello", answer);
  rl.close();
});

We call readline.createInteface with:

{
  input: process.stdin,
  output: process.stdout

}

to read standard input and output standard output.

Then we call rl.question to show a prompt for the user.

And the entered answer will be set as the value of the answer parameter.

Finally, we call rl.close to stop reading standard input.

Conclusion

To read standard input with JavaScript, we can use the readline module.