How to display a word document using fancybox

Question

HTML code

     view

Answer 1

You can't. Browsers don't have any built-in way to view Word docs so unless the user has configured their browser to open it with some plugin (which 99% of the world hasn't done), the browser will prompt them to download the file.

Answer 2

UPDATE: Jan 29, 2017

Google Docs Viewer allows the Word document to be seen as a (read-only) document rather than an image (as it was previously working), so you can actually select and copy from the displayed document into another document.

Added a JSFIDDLE using Fancybox v2.1.5

---

The only possible way to do it without all the issues mentioned above is to use Google docs viewer to display the image of the file via iframe ...so this script:

$(document).ready(function() {
 $(".word").fancybox({
  'width': 600, // or whatever
  'height': 320,
  'type': 'iframe'
 });
}); //  ready 

with this html:

<a class="word" href="http://docs.google.com/gview?url=http://domain.com/path/docFile.doc&embedded=true">open a word document in fancybox</a>

... should do the trick.

Just notice that you are not actually opening a Word document but an image of it, which will work if what you want is to show the content of the document only.

BTW, I noticed that you must be using fancybox v2.x. In that case you don't need the .live() method at all since fancyBox v2 already uses "live" to handle clicks.

Answer 3

You can use this code, short and sweet (with Fancybox latest version) -

$.fancybox.open({
            padding: 0,
            href: $url,
            type: 'iframe',
        });

Where your $url can be something like -

https://docs.google.com/viewer?url=<url for your file>&embedded=true

Answer 4

As far as I know you will need some sort of plugin that will know how to handle that MIME type. Other than that it is not possible.

Same goes for any file type...