CODEWITHSUNDEEP
htmlpdfamazon-s3embedpre-signed-url
SHIKHAR SINGH
SHIKHAR SINGH

Reputation: 439

Adding s3 signed url in embed for a pdf doesn't work

The url which looks like https://abc.s3.ap-south-1.amazonaws.com/1/2/4/2018/26/pdf.pdf_1537903203247/V0/output/pdf.pdf?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=Q434A%2F200926%2Fap-south-1%2Fs3%2Faws4_request&X-Amz-Date=20180926T053715Z&X-Amz-Expires=900&X-Amz-Signature=f3996e2401e95e7ebd071187fd55ead39c5296b1cf4d968&X-Amz-SignedHeaders=host

Isn't getting displayed , however the url gets downloaded separately.I have modified the url here.But the actual url works and downloads the pdf if opened in a different tab. Is there a workaround?

Upvotes: 4

Views: 5553

Answers (2)

Rohit Saxena
Rohit Saxena

Reputation: 42

If you want to open pdf file in iframe then you can written base64 string from backend and then convert base64 string to blob url in UI.

let base64strds = 'base64pdfstring';
// decode base64 string, remove space for IE compatibility
var binary = atob(base64strds.replace(/\s/g, ''));
var len = binary.length;
var buffer = new ArrayBuffer(len);
var viewers = new Uint8Array(buffer);
for (var i = 0; i < len; i++) {
    viewers[i] = binary.charCodeAt(i);
}

// create the blob object with content-type "application/pdf"               
var blob = new Blob( [viewers], { type: "application/pdf" });
var url = URL.createObjectURL(blob);

var objFra = document.createElement('iframe');   // Create an IFrame.
        objFra.style.visibility = "hidden";    // Hide the frame.
        objFra.src = url;                      // Set source.
        document.body.appendChild(objFra);  // Add the frame to the web page.
        objFra.contentWindow.focus();       // Set focus.
        objFra.contentWindow.print();

Upvotes: 0

SHIKHAR SINGH
SHIKHAR SINGH

Reputation: 439

As @Michael-sqlbot correctly pointed out. The content-type had to be application/pdf. Javascript code for reference : 

var s3 = new AWS.S3({
            apiVersion: '2006-03-01',
            region: 'ap-abc-1',
            params: {
                Bucket: BucketName,
                ServerSideEncryption: "AES256",
                ContentType: 'application/pdf'
            }
        });

It makes sense that the browser to understand that the url is actually a pdf, it's necessary to add this content-type to it.However, I want to point out that for other file-types like mp3,mp4,jpg,png etc. this was not required in my particular case.Don't know if it is universally true.

Upvotes: 2

Related Questions