I’m working on an Angular 10 project and need to add Google Docs features to let users view and modify documents. My files are currently saved on my own server but I can move them to cloud storage like AWS S3 if needed.
What I want to do:
Show document previews using Google Docs viewer
Allow users to edit these documents directly
Save the changes back to my server after editing
Users will sign in with their Google accounts and have proper permissions
I know about the basic viewer URL but that only works for reading files and has a 25MB limit. I need full editing capabilities.
I also want to do something similar with Microsoft Office 365 if possible. What’s the best way to make this work?
I built something like this last year and ran into a few roadblocks worth mentioning. Google Docs API won’t let you embed the full editing interface - you’re stuck with preview mode or making changes through their API. What I ended up doing was creating docs via the Google Drive API, then opening the actual Google Docs editor in a new tab for users to edit. You can set up webhooks to track changes and sync back to your server, but there’s definitely some lag. Office 365 is way more flexible here - you can actually embed Word/Excel editors right in your app with an iframe. The downside? Setup’s a pain and you need proper Microsoft 365 licensing. Worth looking into hybrid solutions too - something like OnlyOffice or Collabora Online for editing, with export options to Google Docs format if you need compatibility.
Been working on document integration for three years - learned this stuff the hard way. Google’s approach means thinking differently. Don’t try embedding their editor, work with their ecosystem instead. Upload docs to Google Drive programmatically, manage permissions through Drive API, then use postMessage when users edit in popups to detect when they’re finished. The real pain is handling document conversion while keeping your original file structure intact. For Office integration, Microsoft Graph API plus Office Online Server gives you way better control, but licensing costs add up fast. Something the other answers missed - use Google Workspace APIs for business accounts since they’ve got better integration than consumer Google accounts. Both solutions suck at real-time collaboration notifications back to your Angular app, so design your UX around that limitation.
google docs embedding is pretty limited honestly. better to use google picker api - let users select files, then redirect them to actual google docs for editing. changes sync automatically if you’ve got drive api set up right. for office 365, try the office online integration instead. way smoother than google’s solution.