Author: John Au-Yeung

Sometimes, we want to save base64 string as PDF at client side with JavaScript.

In this article, we’ll look at how to save base64 string as PDF at client side with JavaScript.

How to save base64 string as PDF at client side with JavaScript?

To save base64 string as PDF at client side with JavaScript, we create a link.

For instance, we write

const downloadPDF = (pdf) => {
  const linkSource = `data:application/pdf;base64,${pdf}`;
  const downloadLink = document.createElement("a");
  const fileName = "abc.pdf";
  downloadLink.href = linkSource;
  downloadLink.download = fileName;
  downloadLink.click();
};

to define the downloadPDF function.

In it, we create a link with createElement.

Then we set its href property to the path with the PDF.

Next, we set the download property to the name of the downloaded file.

Then we call click to download the file.

Conclusion

To save base64 string as PDF at client side with JavaScript, we create a link.

Sometimes, we want to disable a Link if it’s active with React Router.

In this article, we’ll look at how to disable a Link if it’s active with React Router.

How to disable a Link if it’s active with React Router?

To disable a Link if it’s active with React Router, we set the to prop.

For instance, we write

<Link to={isActive ? "/link-to-route" : "#"} />;

to set the to prop to "#" if isActive is true.

Otherwise, we set it to "/link-to-route".

Conclusion

To disable a Link if it’s active with React Router, we set the to prop.

Sometimes, we want to use ternary operator in JSX to include HTML with React.

In this article, we’ll look at how to use ternary operator in JSX to include HTML with React.

How to use ternary operator in JSX to include HTML with React?

To use ternary operator in JSX to include HTML with React, we use JSX code as expressions for the ternary operator’s operands.

For instance, we write

const Comp = () => {
  //...

  return (
    <div className="row">
      {message === "failed" ? (
        <div> Something went wrong </div>
      ) : (
        <div> Everything is fine </div>
      )}
    </div>
  );
};

to if message is 'failed'.

If it is, then we render <div> Something went wrong </div>.

Otherwise, we render <div> Everything is fine </div>.

Conclusion

To use ternary operator in JSX to include HTML with React, we use JSX code as expressions for the ternary operator’s operands.

Sometimes, we want to get the exact local time of client with JavaScript.

In this article, we’ll look at how to get the exact local time of client with JavaScript.

How to get the exact local time of client with JavaScript?

To get the exact local time of client with JavaScript, we use the Intl.DateTimeFormat constructor.

For instance, we write

const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;

to call resolvedOptions on the Intl.DateTimeFormat object to return an object with the client’s datetime options.

We get the time zone of the device with the timeZone property.

Conclusion

To get the exact local time of client with JavaScript, we use the Intl.DateTimeFormat constructor.