Issues with Document Preview: S3 Presigned URLs in ngx-doc-viewer

Other Questions Google docs
1

Hey everyone, I’m stuck with a document preview problem. I’m using ngx-doc-viewer to show files from Amazon S3 with presigned URLs. But Google Docs Viewer and Office Online aren’t playing nice.

I’ve tried a few things:

  1. Made a presigned URL from S3 and checked it in my browser.
  2. Used this code for Google Docs Viewer:
let encoded = encodeURIComponent(myS3Url);
let viewerUrl = 'https://docs.google.com/viewer?url=' + encoded + '&embedded=true';

It just says “No Preview Available”.

  1. Tried Microsoft Office Online:
let viewerUrl = 'https://view.officeapps.live.com/op/view.aspx?src=' + encoded;

This one complains that the “File is not publicly accessible”.

  1. Even ngx-doc-viewer’s own URL viewer just downloads the file instead of showing it.

I’m scratching my head here. The file is definitely accessible, but these viewers can’t seem to handle it. Has anyone cracked this problem? Maybe there’s another viewer that works with private S3 URLs?

Any help would be awesome. Thanks!

2

I’ve grappled with this exact problem in a recent project. What worked for me was implementing a client-side solution using libraries like PDF.js for PDFs and XLSX.js for Excel files. These libraries can directly render the files in the browser without needing an external viewer.

For PDFs, you can use PDF.js like this:

pdfjsLib.getDocument(presignedUrl).promise.then(function(pdf) {
  // Render PDF pages here
});

For Excel files, XLSX.js can parse the file:

fetch(presignedUrl)
  .then(res => res.arrayBuffer())
  .then(data => {
    let workbook = XLSX.read(data, {type: 'array'});
    // Process workbook data
  });

This approach bypasses the need for external viewers altogether and gives you more control over the rendering process. It’s been far more reliable with S3 presigned URLs in my experience.

3

I’ve encountered similar issues with S3 presigned URLs and document viewers. The problem likely stems from the temporary nature of presigned URLs. Most online viewers expect a stable, public URL.

A workaround I’ve used is to create a small server-side proxy. It fetches the document from S3 using the presigned URL and serves it to the viewer. This way, you can provide a stable URL to the viewer while keeping your S3 bucket private.

Alternatively, consider using a different viewer library that supports direct file rendering without relying on external services. PDF.js for PDFs or SheetJS for spreadsheets might be worth exploring.

Remember to handle expiration of presigned URLs gracefully. You may need to regenerate them if the user’s session lasts longer than the URL’s validity period.

4

hey mikechen, ran into this too. the viewers dont work well with s3 presigned urls. maybe try a proxy to serve a stable url? pdf.js and sheetjs might be alternatives. good luck!