Document Previews in Browser

Is there some way to preview documents 开发者_JAVA技巧in browser? Specifically in say an iframe within a page, as opposed to opening the doc in a new tab? I have a list of files of any type and when a user clicks on one, want to open it in a readonly format. If that file is a video or audio file, that's easy enough, but I'd like to be able to also do pdfs, word docs, maybe excel. Preferably it would be in a cross browser friendly way but if I need to do detection for a plugin (I've seen Google Docs Viewer for FF) I can live with that.

UPDATE:

ShaneC's answer is great and will work well in general. The one hitch I see is that for html5 devices (think ipad), I need to convert the document into a series of images. Is there any way for me to do this in an automated fashion? I need to be able to do this automatically when a new document is uploaded.

You'll want to integrate a cross-browser cross-type document viewer. Google will give you some good sites, personally I've had good experiences with Flex Paper.

For demos, see here: http://flexpaper.devaldi.com/demo/

There is another approach that can be used to view images/pdf/xlsx/docx etc.

You can use iframe and google's gview in the following way:

 const YOUR_URL = https://calibre-ebook.com/downloads/demos/demo.docx;
 
 <iframe
   className="doc"
   src={`https://docs.google.com/gview?url=${YOUR_URL}&embedded=true`}
 />

There is the Javascript ViewerJs. An open source tool which allows a website to display PDF and open standard for office documents. It will display the documents inline and without browser plugins.