背景 系统需要预览在线word、excel、pdf等文件 ,pdf还好,word和excel就不太友好了,需要下载下来,文件少还行,多了,用户就很烦,下载了还得人工删除 。 所以找了一个可以直接在线预览的文案。 -p 8012:8012 keking/kkfileview:4.1.0 浏览器访问容器8012端口 http://127.0.0.1:8012 即可看到项目演示用首页 项目接入使用 当您的项目内需要预览文件时 ,只需要调用浏览器打开本项目的预览接口,并传入须要预览文件的url,示例如下: 3.x.x 及以上版本 #[1] <script type="text/javascript" src="https:// cdn.jsdelivr.net/npm/js-base64@3.6.0/base64.min.js"></script> var url = 'http://127.0.0.1:8080/file/test.txt'; //要预览文件的访问地址
背景 最近公司内部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
---- Blog新添加书籍页面,方便在线阅读,使用了jquery.media.js -----------------来自小马哥的故事 ---- html 代码如下 <! }); </script> </head> <body> PDF File </body> </html> 查看预览 : ---- http://tiantianit.net/upload/books/AlbbJavaKfsc.pdf ---- 使用jquery.media.js就可以直接把一个连接到pdf文件的链接打开
在上一篇 文章中,我们使用MinIO实现了文件存储,用于存储各种格式的文件。有时候我们不仅需要文件存储,还需要文件的在线预览。 这里给大家推荐一个基于SpringBoot的文件预览神器kkFileView,基本支持主流文件的在线预览,使用也很简单,希望对大家有所帮助! kkFileView简介 kkFileView可以用来搭建文件在线预览服务,在Github上已有5.7k+Star。 Examples即可,注意修改下version为2012-10-17; 修改成功后就可以在线预览文件了,我们来看下在线预览文件的URL格式,只需传入url(需要预览的文件地址)即可,这里要注意的是这个 由于它是通过将word、ppt文档转化为pdf来实现预览的,如果你对Office文档预览没有特别高的要求,完全可以使用它搭建一个全能的文件在线预览服务!
在偶然的翻阅大佬博客的时候,发现一个挺有意思的项目:kkFileView,在线文件预览项目 1. kkFileView介绍 kkFileView是git的开源在线文件预览项目 支持格式:doc、docx 、js、md、json、conf、ini、vue、php、py、bat、gitignore 该项目使用流行的spring boot搭建,易上手和部署,可以进行二次开发和独立部署,是一个很方便易使用的文件预览项目 可以进入application.properties文件根据自己的需求修改配置,如端口、文件大小限制、添加水印、文件预览等相关配置 也可以根据自己的需求修改源码,对项目进行二次开发,比如加个授权什么的等等 : 默认的office文件预览是转成图片模式预览,点击右边的PDF图标,可以转成PDF进行预览(可以文字复制和下载等,也有很多小工具) 4.3、文件预览乱码问题 大部分Linux系统上并没有预装中文字体或字体不全 具体可参考官方文档:https://kkfileview.keking.cn/zh-cn/docs/faq.html 5. web中使用API 在前端页面中使用该文件预览API很简单,示例如下: <!
针对android系统不支持pdf文档在线预览,可通过引入pdf.js插件实现,其具体实现步骤如下 一、引入插件 方式一:npm install –save pdfjs-dist,安装完成后在vue项目的 node_modules出现如下依赖 方式二:只引入pdf.js的核心文件pdf.js和pdf.work.js,其他无关的文件全部删除 方式三:将插件直接放在static文件夹下 二、前端页面代码 方式一和方式二 let url = ‘/static/pdf/web/compressed.tracemonkey-pldi-09.pdf’ // 跨域请求文件,需要走后台代理,后台需要将文件流返回前端才可在页面显示 ,此种方式的filePath如为本地文件不进行编码也可发送请求,如为跨域文件不进行编码无法发送请求,因此建议统一进行编码。 ), outputStream); } catch (Exception e) { e.printStackTrace(); } return null; } } 具体采用哪种方式实现pdf文档的在线预览
前端实现文档在线预览功能 最直接的就是使用XDOC 文档云服务 XDOC可以实现预览以DataURI表示的DOC文档,此外XDOC还可以实现文本、带参数文本、html文本、json文本、公文等在线预览, 预览功能(包括其他各种媒体文件)但是对word等类型的文件无能为力。 2、word、xls、ppt文件在线预览功能 word、ppt、xls文件实现在线预览的方式比较简单可以直接通过调用微软的在线预览功能实现 (预览前提:资源必须是公共可访问的) <iframe src= url="fileurl"></iframe> 3、excel文件 目前excel文件已经有了类似pdf.js那样的解析sheet.js 总结 1、免费纯前端方式实现在线预览word、excel、ppt 最优选择微软在线预览(不可编辑) 2、利用后端将文件转为图片,前端以图片形式预览(可行方案) 3、购买在线预览服务例如百度DOC文档服务、永中、I DOC VIEW等
在office官方自带的链接后添加自己的文档链接,浏览器就可以自动解析预览 支持 word 、ppt、excel,不支持pdf格式文件 "https://view.officeapps.live.com src=" + http://word; 我们引入vue-pdf来在线预览pdf文件 文档地址 npm install --save vue-pdf <template> <div class=" vue-pdf"; export default { components: { pdf }, data() { return { pdf: "", //浏览的pdf文件 important; } </style> 打包上线的时候会生成个worker文件,将一起部署到服务器 ? 还会生成个.map文件去src/config/index.js修改 productionSourceMap:false
推荐一个用Spring Boot搭建的文档在线预览解决方案: kkFileView,一款成熟且开源的文件文档在线预览项目解决方案,对标业内付费产品有【永中office】【office365】【idocv 在线体验 请善待公共服务,会不定时停用 地址:https://file.keking.cn 项目文档 详细wiki文档:https://gitee.com/kekingcn/file-online-preview 两种模式的适用场景如下 图片预览:word文件大,前台加载整个pdf过慢 pdf预览:内网访问,加载pdf快 图片预览模式预览效果如下: pdf预览模式预览效果如下: 4. ppt文档预览 支持ppt 压缩文件预览 支持zip,rar,jar,tar,gzip等压缩包,预览效果如下: 可点击压缩包中的文件名,直接预览文件,预览效果如下: 8. 多媒体文件预览 理论上支持所有的视频、音频文件,由于无法枚举所有文件格式,默认开启的类型如下: mp3,wav,mp4,flv 视频预览效果如下: 音频预览效果如下: 9.
推荐一个用 Spring Boot 搭建的文档在线预览解决方案:kkFileView,一款成熟且开源的文件文档在线预览项目解决方案,对标业内付费产品有永中office、office365、idocv等, 支持 jpg/jpeg/png/gif 等图片预览(翻转,缩放,镜像) 5. 使用 Spring Boot 开发,预览服务搭建部署非常简便 6. rest 接口提供服务,跨平台特性 (java/php/python/go....) 都支持,应用接入简单方便 7. 抽象预览服务接口,方便二次开发,非常方便添加其他类型文件预览支持 支持doc/docx文档预览,word预览有两种模式:一种是每页word转为图片预览,另一种是整个word文档转成pdf,再预览pdf 可点击压缩包中的文件名,直接预览文件,预览效果如下: 理论上支持所有的视频、音频文件,由于无法枚举所有文件格式,默认开启的类型如下:mp3/wav/mp4/flv 当然,以上展示的只是部分格式文件的预览效果
推荐一个用 Spring Boot 搭建的文档在线预览解决方案:kkFileView,一款成熟且开源的文件文档在线预览项目解决方案,对标业内付费产品有永中office、office365、idocv等, 支持 jpg/jpeg/png/gif 等图片预览(翻转,缩放,镜像) 5. 使用 Spring Boot 开发,预览服务搭建部署非常简便 6. rest 接口提供服务,跨平台特性 (java/php/python/go....) 都支持,应用接入简单方便 7. 抽象预览服务接口,方便二次开发,非常方便添加其他类型文件预览支持 支持doc/docx文档预览,word预览有两种模式:一种是每页word转为图片预览,另一种是整个word文档转成pdf,再预览pdf 可点击压缩包中的文件名,直接预览文件,预览效果如下: 理论上支持所有的视频、音频文件,由于无法枚举所有文件格式,默认开启的类型如下:mp3/wav/mp4/flv 当然,以上展示的只是部分格式文件的预览效果
支持 20 多种主流格式的文件在线浏览,这个项目值得学习。 项目介绍 kkFileView,是一个基于 Java SpringBoot 框架的文件文档在线预览项目,支持在浏览器中在线浏览各种主流格式的文件或文档。 想要开发一个在线浏览文件的网站,非常不容易,每种格式都要做不同的处理,所以一般的项目能支持几种格式就不错了。但 kkFileView 项目,经支持多达几十种格式! 支持 jpg、jpeg、png、gif 等图片预览和操作 支持 mp3、mp4、flv 等多媒体文件预览 文件列表页: [image-20210513205831609.png] 文本浏览效果: [preview-text.png [在线浏览 PPT] 项目支持多种预览模式灵活切换,比如查看 word、ppt、pdf 文档时,可以用图片的方式浏览和复制,也可以用 PDF 文档的方式翻页浏览。
返回某个路径的文件格式 方案二 ASPOSE 文件在线预览模块(多格式转PDF文件) 说明:本项目是将一些常见的技术做了整合,帮助那些需要在线预览文件或正在寻找 office 转 pdf 文件预览的同学。 基于这个技术做的知识库管理系统:https://gitee.com/hcwdc/knowledgebase 已经实现功能如下: 多格式转换为 PDF 格式 OFFICE 转换为 PNG 格式 在线预览文件 手机预览查看文件 现已支持格式如下 图片预览:.gif、bmp、jpeg、jpg、png、ico、svg 文档预览:.doc、docx、xls、xlsx、ppt、pptx PDF 文件:pdf、PDF 工具 PDF 转换图片使用了PDFBox组件 感谢hutool组件 项目关联关键词 word 转 pdf、word 转图片、office 格式转换、在线文件预览 文档转换预览技术说明 同步转换 即用户上传文档提交接口瞬间
推荐一个用 Spring Boot 搭建的文档在线预览解决方案:kkFileView,一款成熟且开源的文件文档在线预览项目解决方案,对标业内付费产品有永中office、office365、idocv等, (翻转,缩放,镜像) 使用 Spring Boot 开发,预览服务搭建部署非常简便 rest 接口提供服务,跨平台特性 (java/php/python/go....) 都支持,应用接入简单方便 抽象预览服务接口,方便二次开发,非常方便添加其他类型文件预览支持 支持doc/docx文档预览,word预览有两种模式:一种是每页word转为图片预览,另一种是整个word 文档转成pdf,再预览pdf。 可点击压缩包中的文件名,直接预览文件,预览效果如下: 理论上支持所有的视频、音频文件,由于无法枚举所有文件格式,默认开启的类型如下:mp3/wav/mp4/flv 当然,以上展示的只是部分格式文件的预览效果
KKFileView结合vue多格式文件在线预览 通过Docker安装KKFileView 拉取镜像: # 网络环境方便访问docker中央仓库 docker pull keking/kkfileview
推荐一个用 Spring Boot 搭建的文档在线预览解决方案:kkFileView,一款成熟且开源的文件文档在线预览项目解决方案,对标业内付费产品有永中office、office365、idocv等, 支持 jpg/jpeg/png/gif 等图片预览(翻转,缩放,镜像) 5. 使用 Spring Boot 开发,预览服务搭建部署非常简便 6. rest 接口提供服务,跨平台特性 (java/php/python/go....) 都支持,应用接入简单方便 7. 抽象预览服务接口,方便二次开发,非常方便添加其他类型文件预览支持 支持doc/docx文档预览,word预览有两种模式:一种是每页word转为图片预览,另一种是整个word文档转成pdf,再预览pdf 可点击压缩包中的文件名,直接预览文件,预览效果如下: 理论上支持所有的视频、音频文件,由于无法枚举所有文件格式,默认开启的类型如下:mp3/wav/mp4/flv 当然,以上展示的只是部分格式文件的预览效果
前言 在大多数项目中都会遇到在线预览PDF文件,项目使用的是element ui,使用vue-pdf实现。 安装依赖 npm install --save vue-pdf 相关参数 参数介绍: url :pdf 文件的路径,可以是本地路径,也可以是在线路径。 实现 <template>
在现代Web应用开发中,文件预览功能已成为提升用户体验的关键要素。无论是企业级文档管理系统、在线教育平台,还是协作办公软件,都需要支持多种格式文件的在线预览能力。 项目概述 文件在线预览是一款基于Spring Boot构建的开源服务,提供RESTful API接口,支持跨语言、跨平台的文件预览功能。 精湛的技术实现 文件预览核心架构 文件在线预览采用"转换+渲染"的双层架构,实现高效、稳定的文件预览功能: 文件接收与识别:通过REST API接收文件URL,根据扩展名识别文件类型 智能转换处理: Office 云存储服务:增强文件管理功能 在线教育平台:支持课件、文档的即时预览 电子政务系统:提供安全、高效的文件查阅体验 协作办公软件:提升团队文档共享效率 结语 文件在线预览(File Online Preview 无论您是开发小型应用还是构建大型企业系统,文件在线预览都能为您提供稳定、高效、安全的文件预览能力。
在Vue项目中实现PDF文件流的预览,有多种可行的方案,以下为你详细介绍:方案一:利用浏览器原生支持如果后端返回的是PDF文件在服务器上的路径,直接访问该路径即可在浏览器中预览PDF文件。 上述设置是告诉浏览器,当前接口返回的文件流是PDF格式,且需要内嵌显示,即预览。 PDF.js提供的viewer.html文件来预览PDF文件。 假设后端返回的PDF文件地址为pdfFileUrl:<template>
最近客户有个需求,需要在线预览PPT、Excel、Word,开始打算用第三方组建去读取 office系列,然后生成html,这样的话样式相当于丢了,只剩下数据,而且第三方组件对office版本支持不够完善 最后决定,用户在上传的过程中调用office API里面的saveAs,自动生成了静态html,预览的时候就直接访问的该html页面。 ? word.GetType(); 8 9 Word.Documents docs = word.Documents; 10 11 // 打开文件