WpDoe WpDoe - 7 months ago 30
HTML Question

Opening files of different files types in browser

In a single page we have multiple links to files of different file types. A single link looks like this:

<a href="/uploads/sandglass.pdf" download="sandglass.pdf"> download sandglass </a>

On click users simply get the file downloaded and can then open it in their devices.

The result that we want to achieve is to open the file inside the browser in a new tab.

Question is: how to achieve a similar result to how attachments are opened in gmail for example?

File types that need to be opened in a new tab are usually these:
pdf, doc, docx, xls, xlsx, ppt, pps, jpg, png

Any help or guidance is much appreciated.


Can you manipulate these a tags?

If yes, you can remove the download attribute, and add a target attribute with the value of _blank to open the file in another tab.

 <a href="/uploads/sandglass.pdf" target="_blank"> download sandglass </a>

But Chrome and other browsers can't open preview of some files that you listed here natively, doc, pps and xls for example.

A solution for these unsupported files would be to resave them to PDF so the user can preview them in browser. Maybe you can resave them server-side with services like http://www.aspose.com/products/words

Take a look at this answer, maybe can help you too: How to render word document(DOC,DOCX) in browser using Javascript