Hey everyone, I’m stuck trying to show some docs from S3 using ngx-doc-viewer. I’m using presigned URLs, but Google Docs Viewer and Office Online aren’t playing nice.
I’ve tried a few things:
- Made a presigned URL from S3 and checked it in my browser. It works fine there.
- Used the URL with Google Docs Viewer like this:
let encodedUrl = encodeURIComponent(presignedUrl);
let viewerUrl = `https://docs.google.com/viewer?url=${encodedUrl}&embedded=true`;
But I just get a ‘No Preview Available’ message.
- Tried Microsoft Office Online:
let viewerUrl = `https://view.officeapps.live.com/op/view.aspx?src=${encodedUrl}`;
This time, it says ‘File is not publicly accessible’.
- Even tried ngx-doc-viewer’s own URL viewer, but it just downloads the file instead of showing it.
I’m pretty sure the file is accessible because it downloads, but these viewers aren’t working. I saw a blog post about this exact problem, but their fix (using encodeURIComponent()) didn’t help me.
Any ideas why this isn’t working? Has anyone got S3 presigned URLs working with ngx-doc-viewer and these services? Or maybe there’s a different viewer that works better with private S3 URLs? Help!
yo, have u tried using a different viewer library? maybe somethin like PDF.js for PDFs or mammoth for word docs? they might handle those S3 urls better
also, double-check ur CORS settings in S3. sometimes that messes things up. and make sure ur presigned URLs ain’t expiring too quick
if all else fails, u could try settin up a simple proxy on ur server to fetch the file and serve it up. that usually fixes these headaches
I’ve encountered similar challenges with S3 presigned URLs and document viewers. One solution that worked for me was implementing a server-side proxy. This approach involves creating an API endpoint on your server that retrieves the file from S3 and serves it to the client. By doing this, you bypass the limitations of presigned URLs and provide a consistent, accessible URL for the document viewers.
For implementation, you could use a backend framework like Express.js or Django to create a route that handles the file retrieval and streaming. This method also gives you more control over access permissions and caching strategies.
Additionally, ensure your S3 bucket’s CORS settings are properly configured to allow requests from your application’s domain. This step is crucial for enabling client-side access to your S3 resources.
If server-side proxying isn’t feasible, consider alternative document viewing libraries that better support private S3 URLs, such as PDF.js for PDF files or a commercial solution like Mammoth for Word documents.
I’ve faced similar issues with S3 presigned URLs and document viewers. Here’s what worked for me:
For Google Docs Viewer, try setting a longer expiration time on your presigned URL. I found that short-lived URLs often resulted in the ‘No Preview Available’ error.
With Office Online, the ‘File is not publicly accessible’ message usually means the viewer can’t fetch the file. Try generating a presigned URL with GET object permissions explicitly set.
Another approach that solved my problems was using a server-side proxy. I set up a simple Express.js endpoint that fetches the S3 file and streams it to the client. This way, the document viewers see a public URL and can access the content without issues.
If all else fails, consider using PDF.js for PDFs or integrating a commercial solution like PSPDFKit. They handle various file types and work well with private S3 URLs in my experience.
Remember to check your CORS settings in S3 as well. Incorrect CORS configuration can cause unexpected behavior with these viewers.