6

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.
chris Frisina
  • 19,086
  • 22
  • 87
  • 167
  • yes, when a suitable browser-plugin is available – Dr.Molle Aug 04 '12 at 16:57
  • look at this: https://github.com/mozilla/pdf.js and http://andreasgal.com/2011/06/15/pdf-js/ I never used it, so I don't know how mature this is – lkurylo Aug 04 '12 at 16:58
  • Possible duplicate of [word document viewer browser plugin](http://stackoverflow.com/q/5001497/990877) – Peter-Paul van Gemerden Aug 04 '12 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: http://stackoverflow.com/questions/253834/convert-doc-to-html-in-php – starbeamrainbowlabs Aug 04 '12 at 17:09

2 Answers2

4

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.

Jasper
  • 75,717
  • 14
  • 151
  • 146
  • 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... – Jasper Aug 05 '12 at 16:53
  • Thanks, sorry this fell through the cracks as not getting answered, but very helpful. – chris Frisina Dec 18 '12 at 00:23
2

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>
chris Frisina
  • 19,086
  • 22
  • 87
  • 167
USTropics
  • 77
  • 12
  • 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. – Jasper Aug 04 '12 at 17:33
  • This wants to download the content, and is not displaying it... any suggestions? – chris Frisina Aug 04 '12 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: https://docs.google.com/viewer/?pli=1 – Jasper Aug 04 '12 at 17:36