首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

前端【vue】实现文档在线预览功能,在线预览pdf、word、xls、ppt等office文件

前端实现文档在线预览功能 最直接的就是使用XDOC 文档云服务 XDOC可以实现预览以DataURI表示的DOC文档,此外XDOC还可以实现文本、带参数文本、html文本、json文本、公文等在线预览,...具体实现方法请看官方文档下面这种方式可以实现快速预览word但是对文件使用的编辑器可能会有一些限制 XDOC文档预览服务接口简单,只需要传入文档地址 XDOC文档预览云服务:https://view.xdocin.com...2、word、xls、ppt文件在线预览功能 word、ppt、xls文件实现在线预览的方式比较简单可以直接通过调用微软的在线预览功能实现 (预览前提:资源必须是公共可访问的) 3、excel文件 目前excel文件已经有了类似pdf.js那样的解析sheet.js 总结 1、免费纯前端方式实现在线预览word、excel、ppt...最优选择微软在线预览(不可编辑) 2、利用后端将文件转为图片,前端以图片形式预览(可行方案) 3、购买在线预览服务例如百度DOC文档服务、永中、I DOC VIEW等

21.2K20
您找到你想要的搜索结果了吗?
是的
没有找到

文档在线预览的实现

既然是WEB应用,进一步的需求是能够在线查看文档,根据用户需求可能不允许下载,不允许打印文档。...另外一个解决方案是在线文档预览,用户在网页中查看文档内容,用户无需拿到原始文档,如果有权限的话,可以允许用户下载文档。这就就是百度文库,豆丁之类的网站的功能。下面来说说怎么实现。...1.1 Office文档转换pdf 对于Office文档Word,Excel,PowerPoint),那么可以调用Office提供的COM接口,把文档另存为PDF。...      catch (Exception ex)      {          error = ex.StackTrace;          return false;      }  } 2.在线预览...pdf文档 前面已经统一转换为pdf文档,接下来就是对pdf的在线预览

3.5K10

如何实现Office文档在线预览

地址:https://usdoc.cn Office文件在线预览是目前移动化办公的一种新趋势。Office在线预览指的是Office系列的文件在线查看而不依附域客户端的存在。...在浏览器或者浏览器控件中可以预览查看Word、PDF、Excel、OFD、PPT等格式文档。...usdoc文档在线服务正是为了解决这一问题而做出了优化的访问,充分发挥了前后端结合的优势,提供更好的阅读体验特点 1、不依赖于客户端独立运用,只需要一个url文件地址就可以预览。...3、支持文件地址加密解密处理,保护文档隐私。 4、不用在服务器端部署、浏览者不用客户端下载,仅仅使用浏览器就可以实现。 5、支持跨域,支持所有设备以及浏览器。...支持Microsoft Office、WPS及Adobe PDF文档在线预览支持PC端、移动端、Mac电脑等文件地址可加密集成很简单,三行代码既可以搞定预览调用方法 https://vw.usdoc.cn

4.9K122

Vue实现在线文档预览

如果使用第三方服务,有以下的方案: XDOC文档预览服务:http://view.xdocin.com/ kkFileView在线文件预览:https://kkfileview.keking.cn/zh-cn...本次实现的文档预览的类型有:docx, xlsx, pptx, pdf,以及纯文本、代码文件和各种图片、视频格式的在线预览 在线预览 纯web端文档预览项目在线地址:http://file-viewer.qkongtao.cn.../ Office文档文件在线预览 Office文档文件包括常见的docx、excel、pdf三种文件的预览,当然还有PPT文件预览,但是ppt使用纯前端实现预览效果不是很好,正确的做法一般会讲ppt文件在服务端转换成...:http://file-viewer.qkongtao.cn/excel PPT文档预览 PPT文档预览纯前端实现起来比较困难,效果也不怎么好,建议可以先在服务端转换成PDF文档,使用PDF文档预览的效果比较好...在线文档预览项目(整合) 上述的组件是本项目主要实现的功能,最后我将组件进行了整合一下,封装成一个文件上传、下载、预览的demo。

1.8K21

OFFICE 文档转换为html在线预览

OFFICE 文档在线预览方案很多: 服务器先转换为PDF,再转换为SWF,最后通过网页加载Flash预览,比如flexpaper Office文档直接转换为SWF,通过网页加载Flash预览 微软的Office365...在浏览器中直接打开 转换为html 今天,我们要用的方案是转换为html来预览。...技术方案: office文档转换为pdf:使用libreoffice pdf转html,使用pdf2htmlex 测试环境: 操作系统:ubuntu 12.04 1. office文档转pdf 1.1...测试 3.1 word (doc.docx)测试 convert2html.sh imo云办公室-私有云用户使用手册V2.0.doc imo-doc.html 效果: 3.2 表格 (xls)测试 convert2html.sh...总结 本文介绍了一种在服务端将office文档转换为html以方便预览的方法。 实际使用时,可以将生成好的html放到网站路径下,通过拦截器,设置访问权限。

4.6K30

springboot实战之office文档在线预览

前言 文档在线预览在企业级应用开发也算是比较常遇见的需求了,通常处理这方面的需求大致有如下的方案, 1、购买成熟的第三方产品 比如永中DCS,其产品介绍可以查看如下链接 http://dcs.yozosoft.com...比如flash的flexpaper将文档转换为swf格式,然后使用flash在网页中浏览 在比如java可以使用jodConverter+openoffice/libreoffice 3、文档预览是选择成熟第三产品还是自研...如果公司成本预算充足,建议使用第三方成熟的产品,俗话说术业有专攻,正常专门做这方面的产品,不管是在技术上还是运维上都会比较成熟可靠,如果成本有限,还是自研吧,实现一个简单版本的文档预览服务器还是比较容易...这边的选择只是针对文档预览,而非所有技术、产品选择都按这样选择,毕竟很多时候的自研的成本远远大于购买第三方服务,要具体情况具体分析 下边以jodconverter+LibreOffice为例,来实现一个简单的文档预览...参考文档 https://www.libreofficechina.org/ 文档在线预览方案 https://blog.csdn.net/xiaqingxue930914/article/details

7.5K53

在线文档预览方案-office web apps

最近在做项目时,要在手机端实现在线文档预览的功能。于是百度了一下实现方案,大致是将文档转换成pdf,然后在通过插件实现预览。这些方案没有具体实现代码,也没有在线预览的地址,再加上项目时间紧迫。...目前使用该方案的有 明道 微软,我部署的服务地址:http://myscloud.vicp.cc/op/generate.aspx 下面是在线预览的效果图。   ...http://myscloud.vicp.cc/op/generate.aspx 回到顶部 使用示例     安装完成office web apps以后,你可以采用以下方式实现在线预览。...//在线预览服务地址 var strOfficeApps="https://docview.mingdao.com"; //文档地址,需要外网能访问 var strFileUrl="http://74881...目前该方案已经在购买服务器实施的过程中,有需要实现在线文档预览的可以考虑使用。

7.1K90

office文件 vue 预览_vue实现pdf文档在线预览功能

针对android系统不支持pdf文档在线预览,可通过引入pdf.js插件实现,其具体实现步骤如下 一、引入插件 方式一:npm install –save pdfjs-dist,安装完成后在vue项目的...node_modules出现如下依赖 方式二:只引入pdf.js的核心文件pdf.js和pdf.work.js,其他无关的文件全部删除 方式三:将插件直接放在static文件夹下 二、前端页面代码 方式一和方式二...pdfUrl=http://test.hccb.cc/corporBankWXTest/static/123.pdf’) // pdf文档展示的页面 this.url = ‘/static/pdf/web...file=’ + filePath }, // 定义模块测试方法 methods: { // 此方法用于动态确定元素iframe的高度,使展示的pdf文档占满整个屏幕 sureHeight: function...inputStream), outputStream); } catch (Exception e) { e.printStackTrace(); } return null; } } 具体采用哪种方式实现pdf文档在线预览

3.1K10

在线文档预览方案-office web apps续篇

上一篇在线文档预览方案-office web apps发布后收到很多网友的留言提问,所以准备再写一篇,一来介绍一下域控服务器安装,总结一下大家问的多的问题,二来宣传预览服务安装与技术支持的事情。...在加域时会要求输入域控服务器用户名密码 回到顶部 常见问题 1.如何禁用文档下载 ?...OfficeWebApps\Working\d" -LogLocation "D:\ProgramData\Microsoft\OfficeWebApps\Data\Logs\ULS" 3.限制只有指定域名的文档才能进行预览...回到顶部 技术支持服务 在写完前篇之后陆陆续续有几个网友找我帮忙在阿里云上部署一套预览服务,自认为安装经验很丰富了。...回到顶部 总结   安装预览服务容易出错,不易排查,所以建议安装到office web apps步骤时,用ghost工具备份一下系统,以免出错从头开始安装。

2.6K80

uni-app对接金山文档在线预览服务

最近公司项目中需要在uniapp接入金山文档预览服务,这里记录一下接入方法 需求是在移动端H5里可以进行团队协作,支持预览编辑office文件。...下面介绍一下接入过程: 准备工作 金山文档在线预览编辑服务,是以 H5 网页的形式提供,支持全平台接入。 在线服务完整的使用,需要对接方前端和服务端的参与。...前端:根据文件格式(Word、Excel、PPT 等)生成访问金山文档的 url,通过 js-sdk 接入,调用相关 API 来实现相关需求。...服务端:根据金山文档在线预览编辑服务提供的回调 API 实现接口,将数据存储到对接方的公网服务器中。 可以通过 4 个步骤,快速接入金山文档在线预览编辑服务。...{}, token: '', wpsUrl: '', // 在线文档预览地址 simpleMode: false } }, onLoad() { this.wps

2.7K40

Cordova插件使用——Office文档在线预览那些事

关于office文档在线预览,无外乎这几种方式: 1. 文档转成html或pdf格式,再使用WebView加载显示。 2. 运用WebView打开在线office文档地址。 3....使用能解释文档的插件打开。 4. 调用本地office程序打开。...第一种方式,有两种实现方法,一是使用在线的接口(如谷歌、微软……但前者被墙,后者付费使用,当然也可以自己部署个接口处理转换,不想特别折腾也可以用微软的office web apps),二是使用第三方的库...第二种方式,对于ios就很简单了,本来浏览器就支持预览office文档,所以只需调用 webView 加载网络文件路径即可,但可惜的是android的webview不支持,不知道将来会不会支持。...第四种方式,要求本地装有office文档解释程序,一般装个WPS即可,但要用户额外装个应用的用户体验稍显不足,但既然要看文档了,自然有本地打开的潜在需求,所以这不足就不算太大事了,而且据上面所述,这种方式性价比中最适用于

4.5K40
领券