CODEWITHSUNDEEP
javascriptreactjsazure-blob-storage
Bijay Singh
Bijay Singh

Reputation: 849

Displaying PDF file from Azure Blob Storage container in new tab

Similar question has definitely been asked before and I tried the solutions provided there, still not able to figure it out.

I am fetching a PDF file stored in Azure blob storage container. Since azure gives me a direct link to access the file, I copied that link and pasted in my browser window and the file gets downloaded.

As per my requirement I need to display that file in browsers new tab, so I tried with following code inside one of the methods:

const config = {
 responseType: "blob"
};
try {
  const res = await axios.get(apiUrl, config);

  const file = new Blob([res.data], { type: "application/pdf" });

  const fileURL = URL.createObjectURL(file);

  window.open(fileURL, "_blank");
  } catch (e) {
   console.log(e);
  }

by doing this when this method is called, the new tab get opened and closed immediately. How can I keep the new tab opened until user closes it themselves??

Issue can be seen in attached GIF here

Upvotes: 5

Views: 7410

Answers (2)

danielv123
danielv123

Reputation: 308

The best solution for this issue is to set the content-type to application/pdf during the initial upload. It is possible to set the content-type of a PDF file (or any file) after uploading but it is optimal to pass the correct headers the first time.

How to set the content-type for an Azure blob storage upload with the Node.js SDK:

const exampleBuffer = data; // type: Buffer
const blobServiceClient = BlobServiceClient.fromConnectionString(
    yourAzureStorageConnectionStringHere,
);
const containerName = `example-container`; // container name here
const containerClient = blobServiceClient.getContainerClient(
    containerName,
);
const containerExists = await containerClient.exists(); // check if container exists
if (!containerExists) await containerClient.create(); // create container if it doesn't exist
const blobName = 'example name'; // blob file name here
const blockBlobClient = containerClient.getBlockBlobClient(blobName);
const blobOptions = { blobHTTPHeaders: { blobContentType: 'application/pdf' }}; // this is where you set all blob options, including the header and content-type
await blockBlobClient.upload(bufferData, bufferData.length, blobOptions); // upload the blob with the data and blob options

Upvotes: 3

Bijay Singh
Bijay Singh

Reputation: 849

As pointed out by @GeorgeChen above, I changed the CONTENT-TYPE to application/pdf and then I cleared my browser's cache and restarted my application, and my issue was fixed. 😎

Upvotes: 6

Related Questions