Category: JavaScript Answers

Sometimes, we want to download file from bytes in JavaScript.

In this article, we’ll look at how to download file from bytes in JavaScript.

How to download file from bytes in JavaScript?

To download file from bytes in JavaScript, we can create an object URL from a blob and then download with the URL.

For instance, we write

const base64ToArrayBuffer = (base64) => {
  const binaryString = window.atob(base64);
  const binaryLen = binaryString.length;
  const bytes = new Uint8Array(binaryLen);
  for (let i = 0; i < binaryLen; i++) {
    const ascii = binaryString.charCodeAt(i);
    bytes[i] = ascii;
  }
  return bytes;
};

const saveByteArray = (fileName, byte) => {
  const blob = new Blob([byte], { type: "application/pdf" });
  const link = document.createElement("a");
  link.href = window.URL.createObjectURL(blob);
  link.download = fileName;
  link.click();
};

const sampleArr = base64ToArrayBuffer(data);
saveByteArray("Sample Report.pdf", sampleArr);

to define the base64ToArrayBuffer function.

In it, we take the base64 string and convert it to the bytes array.

We call window.atob to convert the base64 string to a byte string.

And then we create the bytes array from the binaryString by using a for loop to get the characters with charCodeAt.

Next, we define the saveByteArray function that takes the fileName and byte array object.

In it, we create a blob from byte with the Blob constructor.

We set the type property to the MIME type of the downloaded file.

Then we create an a element with createElement.

And then we call window.URL.createObjectURL with blob to create an object URL and set it as the value of href.

We set the download property to fileName.

Then we call click to start the download.

Conclusion

To download file from bytes in JavaScript, we can create an object URL from a blob and then download with the URL.

Sometimes, we want to get width height of remote image from URL with JavaScript.

In this article, we’ll look at how to get width height of remote image from URL with JavaScript.

How to get width height of remote image from URL with JavaScript?

To get width height of remote image from URL with JavaScript, we can use the naturalWidth and naturalHeight properties.

For instance, we write

const img = new Image();
img.addEventListener("load", () => {
  console.log(img.naturalWidth, img.naturalHeight);
});
img.src = url;

to create an img element with the Image constructor.

Then we add an event listener for the load event with addEventListener.

In it, we get the width and height of the image with naturalWidth and naturalHeight.

Then we set img.src to url to load the image and run the load event handler.

Conclusion

To get width height of remote image from URL with JavaScript, we can use the naturalWidth and naturalHeight properties.

Sometimes, we want to update all clients using Socket.io and JavaScript.

In this article, we’ll look at how to update all clients using Socket.io and JavaScript.

How to update all clients using Socket.io and JavaScript?

To update all clients using Socket.io and JavaScript, we can use the io.sockets.emit method.

For instance, we write

io.sockets.emit("users_count", clients);

to call io.sockets.emit to emit the 'users_count' event with clients as the payload.

We can also use socket.broadcast.emit to sends a message to everyone except the socket that starts it.

For instance, we write

socket.broadcast.emit("users_count", clients);

to call socket.broadcast.emit to emit the 'users_count' event with clients as the payload.

Conclusion

To update all clients using Socket.io and JavaScript, we can use the io.sockets.emit method.

Sometimes, we want to print specific part of webpage with JavaScript.

In this article, we’ll look at how to print specific part of webpage with JavaScript.

How to print specific part of webpage with JavaScript?

To print specific part of webpage with JavaScript, we can open a new window and print its contents.

For instance, we write

const printInfo = (ele) => {
  const openWindow = window.open("", "title", "attributes");
  openWindow.document.write(ele.previousSibling.innerHTML);
  openWindow.document.close();
  openWindow.focus();
  openWindow.print();
  openWindow.close();
};

to define the printInfo function that takes the ele element.

In it, we call window.open to open the window.

And then we call openWindow.document.write to write the ele‘s content with ele.previousSibling.innerHTML.

We call openWindow.focus to focus on the window.

Next, we call openWindow.print to print the window.

And then we call close to close the window.

Conclusion

To print specific part of webpage with JavaScript, we can open a new window and print its contents.

Sometimes, we want to set radio button status with JavaScript.

In this article, we’ll look at how to set radio button status with JavaScript.

How to set radio button status with JavaScript?

To set radio button status with JavaScript, we set the checked property of the radio button.

For instance, we write

const radioBtn = document.getElementById("theid");
radioBtn.checked = true;

to select the radio button with getElementById.

Then we set the radioBtn.checked property to true to select the radio button.

Conclusion

To set radio button status with JavaScript, we set the checked property of the radio button.