javascript - Google doc viewer doesn't work with Amazon s3 signed urls - Stack Overflow

admin管理员组

文章数量:1341431

I try to display a .doc file stored on a S3 bucket inside an iframe thanks to google doc viewer api.

I already did some research and found this, which i tried to apply here :

var encodedUrl = encodeURIComponent(".docx?X-Amz-Algorithm=AWS4-HMAC-SHA256%26X-Amz-Credential=GNRO0BLDYAJP1FU7ALIS%2F20170717%2Fus-east-1%2Fs3%2Faws4_request%26X-Amz-Date=20170717T145429Z%26X-Amz-Expires=600%26X-Amz-SignedHeaders=host%26X-Amz-Signature=ee556c5c92427bb38265507218a701660936bc2774ecc919648bb2d780a2619f");

$scope.selectedSource = $sce.trustAsResourceUrl(
   "=" + encodedUrl + "&embedded=true"
);

Iframe looks like :

<iframe ng-src="{{selectedSource}}" frameborder="no" style="width:100%;height:100%"></iframe>

But i still get a "No Preview Available" from the viewer inside the iframe , any idea why ?

I specify that the signed url (not encoded) works when I paste it in my browser, so I have all the rights needed.

I try to display a .doc file stored on a S3 bucket inside an iframe thanks to google doc viewer api.

I already did some research and found this, which i tried to apply here :

var encodedUrl = encodeURIComponent("http://myAPI./1d293950-67b2-11e7-8530-318c83fb9802/example.docx?X-Amz-Algorithm=AWS4-HMAC-SHA256%26X-Amz-Credential=GNRO0BLDYAJP1FU7ALIS%2F20170717%2Fus-east-1%2Fs3%2Faws4_request%26X-Amz-Date=20170717T145429Z%26X-Amz-Expires=600%26X-Amz-SignedHeaders=host%26X-Amz-Signature=ee556c5c92427bb38265507218a701660936bc2774ecc919648bb2d780a2619f");

$scope.selectedSource = $sce.trustAsResourceUrl(
   "http://docs.google./gview?url=" + encodedUrl + "&embedded=true"
);

Iframe looks like :

<iframe ng-src="{{selectedSource}}" frameborder="no" style="width:100%;height:100%"></iframe>

But i still get a "No Preview Available" from the viewer inside the iframe , any idea why ?

I specify that the signed url (not encoded) works when I paste it in my browser, so I have all the rights needed.

• javascript
• angularjs
• iframe
• amazon-s3
• google-api

Share Follow edited Jul 17, 2017 at 15:22 Gambo 1,57233 gold badges2626 silver badges5454 bronze badges asked Jul 17, 2017 at 15:03 NuzzobNuzzob 41111 gold badge66 silver badges2424 bronze badges 2

• This works for me using a pre-signed URL from S3, opening a new browser tab and going to a slightly different URL: https://docs.google./viewer?url= + the redundantly url-encoded (which is technically what you're doing, and seems correct) pre-signed S3 URL (Signature Version 4). The alternate Google URL was spotted here. You might want to test it in its own window before you try embedding it, to eliminate variables. – Michael - sqlbot Commented Jul 17, 2017 at 19:35
• Link is dead and not working – Jatin Dhoot Commented Jan 27, 2021 at 10:20

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 14

The Amazon S3 Presigned URL contains query string parameters, so it contains "?" and "&" which confuses the outer URL.

So you have to Encode the S3 Presigned URL before passing it to the Google Doc Viewer.

Like this:

var encodedUrl = encodeURIComponent(presigned_url);
var iFrameUrl = 'https://docs.google./gview?url=' + encodedUrl;

OR (using S3 .NET Core API)

using (AmazonS3Client S3Client = new AmazonS3Client(accKey, secKey, new AmazonS3Config() { ServiceURL = serviceUrl }))
{
      GetPreSignedUrlRequest getPreSignedUrl = new GetPreSignedUrlRequest
      {
             BucketName = s3BucketName,
             Key = fileName,
             Expires = DateTime.Now.AddMinutes(30)
      };
      encoded_SignedUrl = WebUtility.UrlEncode(S3Client.GetPreSignedURL(getPreSignedUrl));
 }

本文标签： javascriptGoogle doc viewer doesn39t work with Amazon s3 signed urlsStack Overflow