Issue Embedding S3 Presigned URL in ngx-doc-viewer

I'm trying to preview documents (.docx, .xlsx, .pdf) in my Angular application using ngx-doc-viewer. The documents are stored in Amazon S3, so I generate a presigned S3 URL and pass it to the viewer.

Here's how I'm using ngx-doc-viewer:

<ngx-doc-viewer
="googleDocsUrl" viewer="google" ...s3-private-documents-and-presigned-urls']blog post that faced the same issue. It suggested that the problem occurs because the presigned S3 URL contains query parameters (?, &, =), which interfere with the Google Docs Viewer. Based on that, I tried the following solutions:

1. Encoding the URL with encodeURIComponent

const encodedUrl = encodeURIComponent(amazonPresignedUrl);
this.googleDocsUrl = `https://docs.google.com/viewer?url=${encodedUrl}&embedded=true`;


No luck, still getting "No Preview Available".

1. Using encodeURI instead of encodeURIComponent

const encodedUrl = encodeURI(amazonPresignedUrl);
this.googleDocsUrl = `https://docs.google.com/viewer?url=${encodedUrl}&embedded=true`;


Did not work either.

1. Testing Direct Access

The presigned S3 URL works fine when opened directly in a new tab, so it's not an S3 permission issue.

Questions:

• Has anyone successfully used ngx-doc-viewer with S3 presigned URLs?

It looks like Google Docs Viewer might not support presigned URLs due to their query parameters. Has anyone found a working solution?

Continue reading...