Understanding Uint8Array, TypedArray, Buffer, and Blob in JavaScript for PDF Rendering and Binary Data Handling

The author, a front‑end developer, needed to display PDF files on mobile and save them as images, which required converting PDFs to binary data. Mozilla's pdf.js library accepts either a URL or a Uint8Array as its source, prompting a deep dive into binary data handling in JavaScript.

Historically, JavaScript could not process binary streams; early solutions relied on Flash. Node.js introduced Buffer for server‑side binary handling, and ES2015 added TypedArray (e.g., Uint8Array ) for client‑side binary manipulation.

Buffer in Node provides APIs such as Buffer.from , Buffer.alloc , Buffer.concat , and Buffer.compare . A sample Node file‑transfer function demonstrates downloading a binary file with axios and sending it as a Buffer to the client.

async function nodeBuffer() {
  let query = ctx.request.query;
  let downloadPath = query.path;
  let instance = axios.create({
    headers: { 'content-type': 'application/octet-stream' }
  });
  delete query.path;
  await instance.get(downloadPath, query)
    .then(res => {
      ctx.attachment(query.name);
      ctx.set('Encoding', 'binary');
      ctx.set('Content-Type', 'application/octet-stream');
      ctx.set('content-disposition', `attachment;filename=${query.name}`);
      ctx.body = Buffer.from(res.data, 'binary');
      ctx.status = 200;
    })
    .catch(res => { console.log('catch:', res); });
}

TypedArray is a view over an ArrayBuffer . Creating a Uint8Array from a string and converting it back are shown in two helper functions:

function StringToTypedArray(str) {
  let len = str.length;
  let ab = new Uint8Array(len);
  for (let i = 0; i < len; i++) {
    ab[i] = str.charCodeAt(i);
  }
  return ab.buffer;
}

function TypedArrayToString(buffer) {
  let ab = Uint8Array.from(buffer);
  let res = '';
  for (let i = 0; i < ab.length; i++) {
    res += String.fromCharCode(ab[i]);
  }
  return res;
}

When using pdf.js , the getDocument method can receive either a URL or a Uint8Array . An example AJAX request with responseType: 'arraybuffer' shows how to fetch binary data and pass it directly to pdf.getDocument .

ajax.get({
  url: '/somepath/to/file',
  responseType: 'arraybuffer',
  success: (res) => {
    pdf.getDocument(res).then(...).catch(...);
  },
  error: (err) => { toast(err.error); }
});

Blob represents immutable raw binary data. It can be created with new Blob([array], {type, endings}) . Blob URLs are generated via URL.createObjectURL(blob) and revoked with URL.revokeObjectURL . Compared to Data URLs, Blob URLs are more memory‑efficient for large binary assets.

Example of converting a canvas to a Blob and downloading it:

canvas.toBlob((blob) => {
  let url = URL.createObjectURL(blob);
  let a = document.createElement('a');
  a.href = url;
  a.download = 'test.png';
  document.body.appendChild(a);
  a.click();
});

Reading a Blob with FileReader (e.g., readAsDataURL ) is also demonstrated.

The article concludes with reference links to MDN documentation for ArrayBuffer , TypedArray , Blob , and related APIs.