Display .doc inside a div

Asked 4/8, 2012 at 16:54 Answered 4/8, 2012 at 17:37

It is possible to display a pdf inside a div using this:

<div>
    <object data="test.pdf" type="application/pdf" width="300" height="200">
    PDF : <a href="test.pdf">test.pdf</a>
    </object>
</div>

Is it possible to do something similar for a .doc or .docx? (without server side)

I am assuming the browser or the computer has a way of reading the data.

Menstruum answered 4/8, 2012 at 16:54 Comment(4)

yes, when a suitable browser-plugin is available – Burmese 4/8, 2012 at 16:57

look at this: github.com/mozilla/pdf.js and andreasgal.com/2011/06/15/pdf-js I never used it, so I don't know how mature this is – Jocelynjocelyne 4/8, 2012 at 16:58

Possible duplicate of word document viewer browser plugin – Dripping 4/8, 2012 at 16:59

You will probably need to convert the .doc. The only reason you can display pdfs in browser is because of the adobe reader plugin or chrome pdf viewer. To convert a .doc to html, take a look here: https://mcmap.net/q/1094245/-convert-doc-to-html-in-php-closed – Atony 4/8, 2012 at 17:9

Might I suggest Google Doc Viewer, it'll allow you up show several types of files inline where they would normally prompted for download:

https://docs.google.com/viewer/

You can also use this inline in your own website with the use of an iframe.

Here is a list of supported file-types:

Microsoft Word (.DOC and .DOCX)
Microsoft Excel (.XLS and .XLSX)
Microsoft PowerPoint (.PPT and .PPTX)
Adobe Portable Document Format (.PDF)
Apple Pages (.PAGES)
Adobe Illustrator (.AI)
Adobe Photoshop (.PSD)
Tagged Image File Format (.TIFF)
Autodesk AutoCad (.DXF)
Scalable Vector Graphics (.SVG)
PostScript (.EPS, .PS)
TrueType (.TTF)
XML Paper Specification (.XPS)
Archive file types (.ZIP and .RAR)

I messed around with this for mobile output of PDFs but the mobile version had an error that made it impossible to use. Not sure where the development on this product has landed but the desktop version always worked very well.

Idou answered 4/8, 2012 at 17:37 Comment(2)

A reason for the down-vote would be much appreciated. As far as I know this is the easiest way to display content inline that would otherwise need a plugin to view... – Idou 5/8, 2012 at 16:53

Thanks, sorry this fell through the cracks as not getting answered, but very helpful. – Menstruum 18/12, 2012 at 0:23

You can do this through an iframe inside the div by linking the source to the path of the file on your server.

<div>
<iframe src="mydoc.docx">myDocument</iframe>
</div>

<div>
<iframe src="mydoc.xslx">myDocument</iframe>
</div>

<div>
<iframe src="mydoc.pdf">myDocument</iframe>
</div>

Sweeting answered 4/8, 2012 at 16:59 Comment(3)

The user's browser will still have to have a plugin that knows what a .docx file is, otherwise it will just prompt the user to download the file. – Idou 4/8, 2012 at 17:33

This wants to download the content, and is not displaying it... any suggestions? – Menstruum 4/8, 2012 at 17:34

@chrisFrisina Unless the user has a plugin downloaded for their browser that allows them to view .doc files inline, they will be prompted to download the file. Google Doc Viewer is a way around this: docs.google.com/viewer/?pli=1 – Idou 4/8, 2012 at 17:36

Recommended topics

Hot tags