How to display a word document using fancybox

Question

HTML code

<div class='case'>
    <a href="http://localhost/DXXX/case/reqirement.doc" rel="case"> view</a>
</div>

Jquery code

$(".case").live('click', function(){
    $.fancybox({
        openEffect: 'elastic',
        closeEffect: 'elastic'
    });
});

it's displays the requested content cannot be loaded please try again later.... And I get a download of that document file... How can I display the document file using fancybox

Generally, Word files do not automatically display in a browser. It is not a supported web format. — Orbling, Feb 23 '12 at 18:21
Not possible to display in fancybox or in the browser in general. — j08691, Feb 23 '12 at 18:24
@Orbling is right, .doc is actually a collection structured XML documents which needs a proper document reader to open — supertopi, Feb 23 '12 at 18:24
If you can't open it by itself in a browser, then the plugin is not going to do any better. — Sparky, Feb 23 '12 at 18:27
Hmm so I should first display the contents in browser and later display them — dude, Feb 23 '12 at 18:29
@dude: Word documents and browsers do not mix, the only option open really is to offer such a file for download. IE in certain environments may offer to open such a file in the browser window, but only when Word is installed, and Word is running within IE in that case. Generally, it is not achievable. Supply PDFs instead where appropriate, which still requires a plug-in, but is a good deal more supported across platforms and browsers. — Orbling, Feb 23 '12 at 18:50

JFK · Answer 1 · 2017-01-29T19:42:09.383

32

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.

edited Jan 29 '17 at 19:42

answered Feb 23 '12 at 21:02

JFK

40,963
31
133
306

@Aamir it means that the path to (or the document name) the document is incorrect – JFK Jan 24 '16 at 21:52
By the way, if anyone is trying using .net and are trying to display a file from localhost (like I was) the above won't work unless you use a tool that publishes your localhost server as a public url. I used Finch and it worked like a charm. – Hugo Nava Kopp Jan 26 '17 at 10:43
1

@Aamir : added a jsfiddle to the answer for demo purposes – JFK Jan 29 '17 at 19:43
is it possible to open the file in the browser without deploying word file in the server? – vijaya kumar Jan 20 '18 at 21:51

score 8 · Accepted Answer · answered Feb 23 '12 at 18:24

8

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.

answered Feb 23 '12 at 18:24

j08691

204,283
31
260
272

score 1 · Answer 3 · answered Dec 23 '16 at 21:02

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

score 1 · Answer 4 · answered Feb 23 '12 at 18:22

1

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...

answered Feb 23 '12 at 18:22

Jovan Perovic

19,846
5
44
85

How to display a word document using fancybox

4 Answers4

Linked