javascript 浏览器中的文档预览
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7290043/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Document Previews in Browser
提问by Endophage
Is there some way to preview documents 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.
有没有办法在浏览器中预览文档？特别是在页面中的 iframe，而不是在新选项卡中打开文档？我有一个任何类型的文件列表，当用户单击一个文件时，希望以只读格式打开它。如果该文件是视频或音频文件，那很容易，但我希望也能做 pdf、word 文档，也许是 excel。最好是采用跨浏览器友好的方式，但如果我需要检测插件（我已经看过 Google Docs Viewer for FF），我可以接受。
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.
ShaneC 的回答很好，一般来说效果很好。我看到的一个问题是对于 html5 设备（想想 ipad），我需要将文档转换为一系列图像。有什么办法可以让我以自动化的方式做到这一点吗？我需要能够在上传新文档时自动执行此操作。
采纳答案by ShaneC
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.
您需要集成一个跨浏览器的跨类型文档查看器。谷歌会给你一些好的网站，我个人对Flex Paper有很好的经验。
For demos, see here: http://flexpaper.devaldi.com/demo/
有关演示，请参见此处：http: //flexpaper.devaldi.com/demo/
回答by Rui Marques
回答by Sania Khushbakht Jamil
There is another approach that can be used to view images/pdf/xlsx/docx etc.
还有另一种方法可用于查看图像/pdf/xlsx/docx 等。
You can use iframe and google's gview in the following way:
您可以通过以下方式使用 iframe 和 google 的 gview：
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`}
/>