欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

HTML里显示pdf、word、xls、ppt

程序员文章站 2022-10-28 16:18:58
1、PDF文件在线预览 1.HTML5新标签定义和用法 标签定义嵌入的内容，这个标签是自闭合的的，也就是说如果浏览器不支持PDF的嵌入，那么这个标签的内容什么都看不到。 实例

1、pdf文件在线预览

1.html5新标签<embed>定义和用法

<embed> 标签定义嵌入的内容，这个标签是自闭合的的，也就是说如果浏览器不支持pdf的嵌入，那么这个标签的内容什么都看不到。

实例

<embed src="/file/操作手册.pdf" type="application/pdf" width="100%" height="100%" />

2.<iframe>

<iframe>方法是嵌入pdf的最简单方法之一。但是，如果<iframe>浏览器不支持pdf呈现，则可能无法提供足够的后备内容。

实例

<iframe src="您的pdf地址" width="100%" height="100%">
　　该浏览器无法支持pdf，请点击查看：
　　<a href="pdf地址">下载 pdf</a>
</iframe>

3.<object>

与<embed>不同，<object>如果浏览器不支持pdf嵌入，则该元素可提示内容。所有浏览器都支持<object>元素，但是，每个浏览器中的实现方式通常存在差异。如果您使用该<object>元素，请务必在浏览器和操作系统中彻底测试您的页面。

实例

<object data="/file/操作手册.pdf" type="application/pdf" width="100%" height="100%">
     该浏览器不支持pdf.请点击查看:
     <a href="/file/操作手册.pdf">download pdf</a>.</p>
</object>

2、word、xls、ppt在线预览

word、ppt、xls文件实现在线预览的方式比较简单可以直接通过调用微软的在线预览功能实现 (预览前提：资源必须是公共可访问的)

<iframe src='https://view.officeapps.live.com/op/view.aspx?src=http://storage.xuetangx.com/public_assets/xuetangx/pdf/1.xls' width='100%' height='100%' frameborder='1'>
</iframe>

src就是要实现预览的文件地址 

补充：google的文档在线预览实现同微软（资源必须是公共可访问的），但是需要*

<iframe src="https://docs.google.com/viewer?url=fileurl"></iframe>

3、xdoc在线预览

xdoc可以实现预览以datauri表示的doc文档，此外xdoc还可以实现文本、带参数文本、html文本、json文本、公文等在线预览，具体实现方法请看官方文档

下面这种方式可以实现快速预览word但是对文件使用的编辑器可能会有一些限制

<a href="http://www.xdocin.com/xdoc?_func=to&amp;_format=html&amp;_cache=1&amp;_xdoc=http://www.xdocin.com/demo/demo.docx" target="_blank" rel="nofollow">xdoc</a>

 

上一篇： 不知羞耻

下一篇： 个头大了，但等着吃的德行一点都没变

推荐阅读