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

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

前端实现文档在线预览功能 最直接的就是使用XDOC 文档云服务 XDOC可以实现预览以DataURI表示的DOC文档,此外XDOC还可以实现文本、带参数文本、html文本、json文本、公文等在线预览,...具体实现方法请看官方文档下面这种方式可以实现快速预览word但是对文件使用的编辑器可能会有一些限制 XDOC文档预览服务接口简单,只需要传入文档地址 XDOC文档预览云服务:https://view.xdocin.com...在仅仅是预览pdf文件且UI要求不高的情况下可以直接通过a标签href属性实现预览 二、通过jquery插件jquery.media.js实现 这个插件可以实现pdf...2、word、xls、ppt文件在线预览功能 word、ppt、xls文件实现在线预览的方式比较简单可以直接通过调用微软的在线预览功能实现 (预览前提:资源必须是公共可访问的) 3、excel文件 目前excel文件已经有了类似pdf.js那样的解析sheet.js 总结 1、免费纯前端方式实现在线预览word、excel、ppt

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

使用PageOffice实现文档(word,excel,pdf)在线预览编辑

最近发现一款不错的插件的PageOffice,地址是:http://www.zhuozhengsoft.com/Technical/ 他可以实现word,excel、pdf在线预览以及在线编辑。...虽然商用的话需要收费,但是有免费的试用版,在实现自己毕业设计或是做样品的时候 是一个不错的选择。他同时支持java\c#\php.一旦有了正真的项目花钱再买也可以。同时自己也可以熟悉如何使用。...接着下面实现在线预览。 首先自己需要安装PageOffice控件 目前最新版本是4.2 。...3、预览后台代码: public String openbar(HttpServletRequest request, HttpServletResponse response, @PathVariable..."; } 5、在线编辑需要保存,所以有在线保存: /** * 保存 * * @param request * @param response * @param flag

5.7K10

java实现在线预览–poi实现word、excel、ppt转html

java实现在线预览 – -之poi实现word、excel、ppt转html ###简介 java实现在线预览功能是一个大家在工作中也许会遇到的需求,如果公司有钱,直接使用付费的第三方软件或者云在线预览服务就可以了...,例如永中office、office web 365(http://www.officeweb365.com/)他们都有云在线预览服务,就是要钱0.0 如果想要免费的,可以用openoffice,还需要借助其他的工具...: 1.通过第三方工具openoffice,将word、excel、ppt、txt等文件转换为pdf文件; 2.通过swfTools将pdf文件转换成swf格式的文件; 3.通过FlexPaper...我这里介绍通过poi实现word、excel、ppt转html,这样就可以放在页面上了。...要实现在线预览,只需把转换得到的html在新标签页打开或者镶嵌到某块区域就可以展现了。

1.8K20

Java实现word、excel、ppt、txt等办公文件在线预览功能

来源 | blog.csdn.net/weixin_40986713 Java实现办公文件在线预览功能是一个大家在工作中也许会遇到的需求,网上些公司专门提供这样的服务,不过需要收费。...如果想要免费的,可以用openoffice,实现原理就是:通过第三方工具openoffice,将word、excel、ppt、txt等文件转换为pdf文件流; 当然如果装了Adobe Reader XI...我这里介绍通过poi实现word、excel、ppt转pdf流,这样就可以在浏览器上实现预览了。...//convert("c:/Users/admin/Desktop/2.pdf", "c:/Users/admin/Desktop/3.pdf"); } } 4.service层在线预览方法代码.../** * @Description:系统文件在线预览接口 * @Author: tarzan */ public void onlinePreview(String url, HttpServletResponse

2.5K20

SpringBoot实现文件在线预览

背景 最近公司内部oa系统升级,需要增加文件在线预览服务,最常见的文件就是office文档,一开始构思几个方案,比如office软件自带的文件转换,openoffice转换,offce365服务,aspose...组件转换,最终采用了aspose转换,原因是组件功能完善,不依赖其它软件安装环境 系统设计 文件类型及方案 文件类型 预览方案 word aspsoe-word转换图片预览(版本21.1) ppt aspose-slides...转化你图片预览(版本20.4) excel aspose-cell转换html预览(版本20.4) pdf pdfbox缓缓图片预览(版本2.0.15) png,jpg,gif 整合viewer.js预览...(版本1.5.0) mp4 整合vedio.js预览js版本7.10.2) txt 读取文件内容预览 注:aspose因版权问题,工程示例代码中全部使用试用版,转换图片会出现水印 流程设计 系统实现...file=(文件地址) 文件地址支持文件访问路径与流输出 项目源码地址 https://gitee.com/code2roc/fast-preview 预览界面 word excel ppt pdf

46820

文档在线预览实现

这种需求只需要建立一个Windows共享文件夹或者架一个Samba服务器即可实现,无法做复杂的权限管理,统计等。另一种方案就是架一个Web应用,比如SharePoint,就可以实现。...另外一个解决方案是在线文档预览,用户在网页中查看文档内容,用户无需拿到原始文档,如果有权限的话,可以允许用户下载文档。这就就是百度文库,豆丁之类的网站的功能。下面来说说怎么实现。...      catch (Exception ex)      {          error = ex.StackTrace;          return false;      }  } 2.在线预览...pdf文档 前面已经统一转换为pdf文档,接下来就是对pdf的在线预览。...pdf.js网站已经提供了库和示例,浏览页面是http://mozilla.github.io/pdf.js/web/viewer.html,我们要打开我们转换的文件,只需要在URL中添加参数即可: /

3.5K10

Vue实现在线文档预览

src= 后面拼上你的服务器word文件地址 使用第三方的服务当然效果很好,但是成本更高,实现起来也没有那么灵活。...本次实现的文档预览的类型有:docx, xlsx, pptx, pdf,以及纯文本、代码文件和各种图片、视频格式的在线预览 在线预览 纯web端文档预览项目在线地址:http://file-viewer.qkongtao.cn.../ Office文档文件在线预览 Office文档文件包括常见的docx、excel、pdf三种文件的预览,当然还有PPT文件预览,但是ppt使用纯前端实现预览效果不是很好,正确的做法一般会讲ppt文件在服务端转换成...: Word文档预览 使用vue-office组件库的docx组件 安装 vue-office 插件:npm install @vue-office/docx 实现代码如下: <template...在线文档预览项目(整合) 上述的组件是本项目主要实现的功能,最后我将组件进行了整合一下,封装成一个文件上传、下载、预览的demo。

1.8K21

如何实现Office文档在线预览

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

4.9K122

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

针对android系统不支持pdf文档在线预览,可通过引入pdf.js插件实现,其具体实现步骤如下 一、引入插件 方式一:npm install –save pdfjs-dist,安装完成后在vue项目的...node_modules出现如下依赖 方式二:只引入pdf.js的核心文件pdf.js和pdf.work.js,其他无关的文件全部删除 方式三:将插件直接放在static文件夹下 二、前端页面代码 方式一和方式二...= document.getElementById(‘iframe’) element.style.height = window.screen.height + ‘px’ } } } 三、后台代码实现...inputStream), outputStream); } catch (Exception e) { e.printStackTrace(); } return null; } } 具体采用哪种方式实现...pdf文档的在线预览,可根据项目实际情况选择,如业务简单建议使用方式一和方式二(精简),如业务复杂建议使用方式三(功能强大) 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家

3.1K10

Word,Excel,PPT等Office文件Web浏览器在线预览

前两天接到一个需求:需要在线预览用户上传的Word,Excel,PPT文档 前端同事一听到这个需求,心里就开始骂了,什么鬼需求啊,浏览器怎么打开Word,Excel吗?...会后一顿搜,还真被我找到了,看来前人已经做过了这样的需求 使用以下链接即可进行预览一个word文档. http://view.officeapps.live.com/op/view.aspx?...src=http://mczaiyun.top/ht/3.docx 点击这里在线查看word文档 此链接分为两部分,一是 http://view.officeapps.live.com/op/view.aspx...这个链接是微软的Office Online团队的一个服务 src=http://mczaiyun.top/ht/3.docx 这个链接是我们要解析的office文档地址 为此我写了一个demo可以供各位网友预览...demo点击体验 pdf不能使用此种方式打开,毕竟pdf不属于Office文件嘛,需要使用另一种方式打开 大家可以使用pdf.js来操作pdf,在线预览,编辑PDF 注意:无法打开文档?

5.1K10

SpringBoot实现万能文件在线预览

推荐一个用 Spring Boot 搭建的文档在线预览解决方案:kkFileView,一款成熟且开源的文件文档在线预览项目解决方案,对标业内付费产品有永中office、office365、idocv等,...支持 txt/java/php/py/md/js/css 等所有纯文本 3. 支持 zip/rar/jar/tar/gzip 等压缩包 4....支持 jpg/jpeg/png/gif 等图片预览(翻转,缩放,镜像) 5....抽象预览服务接口,方便二次开发,非常方便添加其他类型文件预览支持 支持doc/docx文档预览word预览有两种模式:一种是每页word转为图片预览,另一种是整个word文档转成pdf,再预览pdf...可点击压缩包中的文件名,直接预览文件,预览效果如下: 理论上支持所有的视频、音频文件,由于无法枚举所有文件格式,默认开启的类型如下:mp3/wav/mp4/flv 当然,以上展示的只是部分格式文件的预览效果

83820

如何实现高性能的在线 PDF 预览

目前常见的在线 PDF 查看方案: 使用 iframe、embed、object 标签直接加载 采用此方案,只需要直接将 PDF 的在线地址设置为标签的 src 属性 使用第三方库 PDF.js 加载...这个方案麻烦一点,我们需要在项目中引入 PDF.js 这个库,然后再使用 iframe 来加载指定的 HTML 文件(下文代码中的 viewer.html ),并且将需要访问的 PDF 的在线地址作为参数传递进去...api.js#L431)。...实现细节 下载 PDF 分片 首先我们使用 PDF.js 提供的接口获取第一个分片的 url,然后再下载该分片的 PDF 文件。...本文介绍的问题便是将大的 PDF 文件拆分,然后根据用户的交互行为按需加载,从而达到提升用户在线阅读体验的目的。

6.2K53

SpringBoot实现万能文件在线预览

推荐一个用Spring Boot搭建的文档在线预览解决方案: kkFileView,一款成熟且开源的文件文档在线预览项目解决方案,对标业内付费产品有【永中office】【office365】【idocv...项目特性 支持 office, pdf, cad 等办公文档 支持 txt, xml(渲染), md(渲染), java, php, py, js, css 等所有纯文本 支持 zip, rar, jar...图片预览 支持jpg,jpeg,png,gif等图片预览(翻转,缩放,镜像),预览效果如下: 3. word文档预览 支持doc,docx文档预览word预览有两种模式:一种是每页word转为图片预览...,另一种是整个word文档转成pdf,再预览pdf。...,pptx文档预览,和word文档一样,有两种预览模式 图片预览模式预览效果如下: pdf预览模式预览效果如下: 5. pdf文档预览 支持pdf文档预览,和word文档一样,有两种预览模式 图片预览模式预览效果如下

1.3K20

SpringBoot 实现万能文件在线预览

推荐一个用 Spring Boot 搭建的文档在线预览解决方案:kkFileView,一款成熟且开源的文件文档在线预览项目解决方案,对标业内付费产品有永中office、office365、idocv等,...支持 txt/java/php/py/md/js/css 等所有纯文本 3. 支持 zip/rar/jar/tar/gzip 等压缩包 4....支持 jpg/jpeg/png/gif 等图片预览(翻转,缩放,镜像) 5....抽象预览服务接口,方便二次开发,非常方便添加其他类型文件预览支持 支持doc/docx文档预览word预览有两种模式:一种是每页word转为图片预览,另一种是整个word文档转成pdf,再预览pdf...可点击压缩包中的文件名,直接预览文件,预览效果如下: 理论上支持所有的视频、音频文件,由于无法枚举所有文件格式,默认开启的类型如下:mp3/wav/mp4/flv 当然,以上展示的只是部分格式文件的预览效果

91350
领券