Providing the Object tag with data directly

I know this is a bit old, but I wanted to expand on the selected answer with how to generate the data url using FileReader.readAsDataURL.

Here's an example wrapped in a Promise.

export function blobAsDataUrl (blob) {
  return new Promise((resolve, reject) => {
    let reader = new FileReader();

    reader.onload = (event) => {
      resolve(event.target.result);
    };
    reader.onerror = (error) => {
      reader.abort();
      reject(error);
    };

    reader.readAsDataURL(blob);
  });
}

// Handle the promise however you like
// This is in the format: data:application/pdf;base64,BASE64DATA
let data_url_for_object = await blobAsDataUrl(<Blob or File>);

https://developer.mozilla.org/en-US/docs/Web/API/FileReader


You don't actually need a URL. You can convert the PDF to base64 and set the data attribute to the data itself. You just need to prefix the base64 with "data:" then the mime type, a semi-colon, "base64," and then the base64 encoded string that represents the PDF.

<object data="data:application/pdf;base64,YOURBASE64DATA" type="application/pdf"></object>