How to embed PDF viewer in your web application in Chrome and FireFox Browser.

This blog is my coding log to leave message to myself in the future and those who may be wasting time for the same challenge I just resolved a minute ago.

The Challenge:

1. I have a PDF file in my AWS S3 Bucket.
2. I successfully fetch a presigned url for the PDF file.
3. My goal is to load the PDF file in my web application, using only html tags such as <iframe src = "https://xxxxx"/> or <embed src=“https://xxxxx"/> without 3rd-party modules such as PDF.js.
4. It works seamlessly on Firefox (version 83), but it does not work on Chrome(version 87), showing messages as follows.

5. Why does this happen?

The Resolution:

It seems that the built-in PDF viewer in Chrome requires “Content-Type: application/pdf” in the Response-Headers when the PDF file is fetched whereas FireFox does not.

Then How do we include Content-Type in the Response Headers? When you request s3.getPreSignedUrlPromise “getObject”, you have to pass parameters including “ResponseContentType” as follows.

let params = {
    Bucket: bucketName,
    Key: request.body.key,
    Expires:request.body.expires,
    ResponseContentType:'application/pdf'
};
let getSignedUrlPromise = s3.getSignedUrlPromise('getObject', params);
getSignedUrlPromise.then((url:string)=>{
    response.status(200).json({url:url})
})

OK. This is it. I hope this helped you.