浏览器中的文档预览

时间:2011-09-02 23:07:37

标签: javascript html5 iframe preview

有没有办法在浏览器中预览文档?特别是在页面中使用iframe,而不是在新标签中打开文档?我有一个任何类型的文件列表,当用户点击一个文件时,想要以只读格式打开它。如果该文件是视频或音频文件,这很容易,但我希望能够做pdf,word docs,也许excel。最好是以浏览器友好的方式进行,但如果我需要对插件进行检测(我已经看过FF的Google Docs Viewer),我可以接受它。

更新

ShaneC的回答非常好,总的来说效果很好。我看到的一个问题是,对于html5设备(想想ipad),我需要将文档转换为一系列图像。我有什么方法可以自动化的方式来做这件事吗?我需要能够在上传新文档时自动执行此操作。

3 个答案:

答案 0 :(得分:5)

您需要集成跨浏览器的跨类型文档查看器。 Google将为您提供一些不错的网站,我个人对Flex Paper有很好的体验。

有关演示,请参阅此处:http://flexpaper.devaldi.com/demo/

答案 1 :(得分:2)

Javascript ViewerJs.一个开源工具,允许网站显示PDF和办公文档的开放标准。它将内联显示文档,无需浏览器插件。

答案 2 :(得分:1)

还有另一种方法可以用来查看图像/ pdf / xlsx / docx等。

您可以通过以下方式使用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`}
 />