File preview seems to be a common thing, so many developers might think that asking Google How to preview Word document in browser? would be enough to find a perfect solution for their project, because how such a popular thing like file preview can be so hard to achieve?
Looking it up on Google will most likely lead you to use Google docs viewer or inline HTML file embedding eg. <iframe /> with no specific information about the problems that both of these solutions have.
What do I mean by file preview? I mean viewing a file on a website, the same way as on a desktop, within a dedicated app. If you want to preview your file, all you need is direct the URL to the file, but how can you know that you have a direct URL? For most cases, pasting it in your browser will automatically force a download process (except pdf’s, most likely they’ll open up in your browser window). Let’s see how this can be implemented.
Table of Contents
Preview files with HTML inline embedding
Inline embedders are: <iframe />, <embed /> and <object />, their way of working is pretty much the same, they’ve got slight differences which are not significant for us at this moment.
How to use it?
Add inline embedder element on your website and in src attribute pass it a direct URL to your file.
<iframe src="\\\\\\\[www.url_to_file.pdf\\\\\\\]" />
Pros:
- No file size limitations, even large files like 300MB pdf will show up, of course, it will take ages to load but still.
- It works on all popular desktop browsers: Chrome, Firefox, Safari, Opera, Edge, IE8+
- It’s a browser-native feature so it’s the fastest solution from all the methods mentioned in this article.
Cons:
- Works only with pdf file types
- It doesn’t work on mobile browsers:
- Safari browser shows a message about no inline pdf support and gives a download button
- Chrome on iOS is doing the same as above, but on Android, it gives an option to choose any installed app on the device to open that file
- Mozilla shows a message informing the user that a plugin is needed
Preview files with online docs viewers
In this section, I’ll give some information about free online doc previews, unfortunately, there are only two and none of them is perfect, but they greatly expand the possibilities. So here we have our money savers: Google Docs and Office Web Apps.
How to use them?
Just append your src attribute with an appropriate URL to a specific doc viewer, it will download your file from URL and then generate an HTML page from it, and then you direct your iframe to it and voila! Of course… there are some limitations to this but not as bad as you might think.
Preview files with Google Docs Viewer
This is not an official solution, I mean Google nowhere gives you documentation on how to properly use this, but developers somehow found it out anyway, despite that Google Docs Viewer isn’t supported anymore it still works!
Pros:
- Many supported file types, probably you’ll find every file type you would like to preview: images, videos, text, code, Microsoft Office file types, pdfs, Adobe file types, svgs, font file types, archive file types and more.
- 25MB file limit,
- works on every popular desktop and mobile browser which is very important if you want to make a preview on mobile devices
Cons:
- Along with the lack of support from Google it likes to throw random errors which will result in no preview at all, what’s more… there’s no way of checking if it failed or not, your inline embedder won’t give you any information about it (no browser event or anything). Okay... I found a way to check it, I’m not very proud of it but at least it works, I’ll share the idea in the Summary section.
- As you might know… Microsoft file types like .ppt, .doc, .xls, etc. are not Google file types so… It has some problems with displaying it, but don’t worry It’s not like they’ll not show up at all, just for example in .doc’s files, some images might jump into next line/page instead of showing in a row... You know... just Microsoft Word things.
Preview files with Office Web Apps
Microsoft also gives its solution to preview files on your website, surely it’s the best option for Office types files because it’s the best at parsing them into HTML.
Props:
- Faster loading than Google Docs,
- Always successfully displays the result - no random errors,
- Most accurate .docs and .ppts parser,
Cons:
- Supports only Microsoft Office file types: .ppt(x), .doc(x), xls(x),
- 10MB limit for docs/ppts, 5MB for xls,
- Low (or none) support for mobiles, throws errors, doesn't display anything and it's not responsive below ~700px width,
Now we got all the information, now we need to make the final decision, let’s get into it.
For desktops:
- PDF - use default browser support, it’s definitely the best option here, no doubt about it.
- Files other than PDF - Google Docs, the only bad thing is those random errors, but I’m actually used to it, on many web apps file preview basically likes to fail. Check how I’ve solved this problem.
- Optionally if you would like to distinguish file types, even more, you should use Office Apps for Office file types, but in my opinion, Google Docs is good enough.
For mobiles:
- For every file type, our only option is to use Google Docs Viewer, none of the other solutions works on mobile, I’ve got nothing more to say here.
Let’s deal with Google Docs random errors Firstly, I wanted to say that I know it’s not a very elegant solution but I believe it’s the only way to do it.
The important thing here is that HTML inline content embedders eg. <iframe /> does not allow you to interfere with its content when it’s completely loaded, so…
In JavaScript create an Interval which every few seconds will try to get into your iframe content, if it has thrown an error, that means the content is loaded properly and you can stop the interval, if no error has been thrown, you need to refresh your iframe by setting it’s src attribute again then repeat everything again until it’s properly loaded.
Other solutions to embed your files on your site If you would like to check out some ready to use packages that somehow relate to file embedding, here are some links that I found:
- https://pdfobject.com/
- https://viewerjs.org/
- https://mozilla.github.io/pdf.js/
- https://filepreviews.io/
Keep in mind, I haven’t used any of them, so I can’t recommend any in particular.
Summary
Tools for previewing files in a browser will differ depending on the type of file and device you’re using. Each one has its own pros and cons, so it’s generally up to personal preference which one you choose.
And if you need help with your React.js development, our team of expert developers will be happy to help!
