前端实现在线预览文件

一、实现word、xls、ppt文件的在线预览功能

1、通过调用微软的在线预览功能,

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

javascript 复制代码
<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>

2、XDOC实现 word、xls、ppt文件在线预览功能

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

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

javascript 复制代码
<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>
相关推荐
上单带刀不带妹13 小时前
Web Worker:解锁浏览器多线程,提升前端性能与体验
前端·js·web worke
qq_三哥啊2 天前
【HTML】<script>元素中的 defer 和 async 属性详解
html·js
我命由我123459 天前
VSCode - VSCode 快速跳转标签页
开发语言·前端·ide·vscode·编辑器·html·js
结衣结衣.10 天前
Vue3入门-计算属性+监听器
前端·javascript·vue.js·vue·js
草履虫建模12 天前
前后端分离项目中的接口设计与调用流程——以高仙机器人集成为例
java·前端·spring boot·机器人·intellij-idea·ruoyi·js
年纪轻轻就扛不住17 天前
Express 入门指南(超详细教程)
前端·前端框架·node.js·express·js
伍哥的传说17 天前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
兴趣使然_17 天前
【笔记】使用 html 创建网址快捷方式
笔记·html·js
我命由我1234519 天前
Vue 开发问题:Missing required prop: “value“
开发语言·前端·javascript·vue.js·前端框架·ecmascript·js
我命由我1234519 天前
前端开发问题:SyntaxError: “undefined“ is not valid JSON
开发语言·前端·javascript·vue.js·json·ecmascript·js