1

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.

floriank
  • 25,546
  • 9
  • 42
  • 66
WpDoe
  • 476
  • 1
  • 7
  • 22

1 Answers1

2

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 do I render a Word document (.doc, .docx) in the browser using JavaScript?

Community
  • 1
  • 1
Gabriel Godoy
  • 232
  • 2
  • 6
  • Thanks a lot. But this only helps for `pdf` and `png` files. What about the other file types? Yes, I have control over the server side. – WpDoe Jun 01 '16 at 14:55
  • This answer maybe can help you http://stackoverflow.com/questions/27957766/how-to-render-word-documentdoc-docx-in-browser-using-javascript – Gabriel Godoy Jun 01 '16 at 14:59
  • Thanks a lot, that was all I needed :) – WpDoe Jun 01 '16 at 15:02