在日常的生活或者工作中,我们都会用到office文档,但是在大多数人们阅读文档的时候,并不想将网站上的office文档下载到本地,这时候就需要文档在线预览的功能。
一些博主知道的实现文档在线预览的方式
1、转换为PDF
2、转换为HTML
3、在服务器上自己部署服务
4、开源项目提供的功能
5、使用第三方提供的付费接口
2021-05-27更新,最近在逛gitee的时候,发现了这个开源的,完全符合我需求的项目,泪目了,家人们
话不多说,先挂链接 kkFileView
该项目是使用spring boot打造文件文档在线预览项目解决方案,支持doc、docx、ppt、pptx、xls、xlsx、zip、rar、mp4、mp3以及众多类文本如txt、html、xml、java、properties、sql、js、md、json、conf、ini、vue、php、py、bat、gitignore等文件在线预览。
感谢作者及贡献者们的开源
这个项目搭建及使用都非常简单,将作者发布的最新源码使用maven构建打包,在生成包目录kekingcn-file-online-preview-v3.5.1\file-online-preview\server\target\kkFileView-3.5.1\bin下,双击运行startup.bat即可运行服务(需要Java环境的支持)
1、使用apache openoffice,下载地址:Apache OpenOffice - 下载
Java实现参考:web使用openoffice实现在线预览office文档_open office预览-CSDN博客
2、使用Asponse组件进行转换(优点:无需安装任何软件,直接引用即可使用,缺点:正式版收费,不过有试用版,除此之外,部分文档转换出来后样式错乱)
下载地址:ASPOSE —正版控件、控件购买、控件下载、控件价格、控件销售、控件代理、控件授权、控件技术支持尽在控件中国网
以转换word文件为PDF文件为例的c#实现代码
//文件位置
string FilePath="D://FilePath//test.doc"
//指定转换后的pdf文件存储路径
string savepath=System.Web.Hosting.HostingEnvironment.MapPath("/myPath/"+DateTime.Now.ToString("yyMMddHHmmssff")+".pdf");
//使用Asponse.word的方法进行转换
Document doc = new Document(path);
doc.Save(savepath,Asponse.Words.SaveFormat.Pdf);
转换为pdf之后,可以直接使用c#文件读取流将文件以pdf流的形式在浏览器中预览
//直接读取文件流到浏览器展示
FileStream fs = new FileStream(path,FileMode.Open);
byte[] buffer = new byte[fs.Length];
fs.Seek(0,SeekOrigin.Begin);
fs.Read(buffer,0,buffer.Length);
fs.Flush();
fs.Close();
context.Response.ContenType="application/PDF";
context.Response.BinaryWrite(buffer);
context.Response.Flush();
context.Response.End();
也可使用pdf插件进行预览,例如PDF.js
pdf.js下载地址:PDF.js
PDF.js支持
指定文件地址的预览方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文件预览</title>
<script src="../javascript/jquery-2.2.4.js"></script>
<script type="text/javascript">
$(function () {
var url = getPdfPreviewUrl(); //获取pdf预览地址
$("#pdfContainer").attr("src", "../static/pdfjs/web/viewer.html?file="+url+"#page=1");
});
</script>
</head>
<body>
<div id="showPdf">
<iframe id="pdfContainer" src="" width="100%" frameborder="0"></iframe>
</div>
</body>
</html>
以文件流的形式展示
1、打开viewer.js,搜索defaultUrl,修改为如下形式
defaultUrl
{
value:DEFAULT_URL;
kind:OptionKind.VIEWER
}
2、在viewer.html中,新增<Script></Script>,注意要在Viewer.js的引用之前
<Script>
var DEFAULT_URL="";
VAR CMAPS_URL="../../pdfjs_es5/web/cmaps";//这句代码引用的cmaps包是为了解决部分类型的pdf文件显示不全的问题,例如发票的pdf图片
var PDFData = "";
$.ajax({
type:"post",
async:false,
mimeType:'text/plain;chartset=x-user-defined',
url:"自己的后台请求路径",
success:function(data){
PDFData = data;
}
})
var rawLength = PDFData.length;
//将数据流转换为pdf.js能解析的unit8Array类型
var array = new Unit8Array(new ArrayBuffer(rawLength));
for(let i=0;i<rawLength;i++){
array[i] = PDFData.charCodeAt(i) & 0xff;
}
DEFAULT_URL=array;
</Script>
1、博主看过的一篇参考文章:c#实现参考:https://www.cnblogs.com/wangxlei/p/9396196.html
2、配合上文提到过的openoffice,也可实现这样的效果,在下文中,有一个开源项目就是使用该方式实现。
1、office online 2016,优点:免费,可在内网部署;缺点:比较复杂与麻烦,不适合个人使用
由于博主没有自己搭建过,所以也没有相关的经验,给大家分享我看过的几篇文章
搭建教程:
1、https://www.cnblogs.com/lhxsoft/p/12071215.html
2、微软 Office Online Server 2016 服务安装部署 + wopi代码实现_office online server 免费吗-CSDN博客
文档:
1、OfficeOnlineServer Netnr Doc
2、Collabora online
参考:Nextcloud文档在线协作collabora online 服务的部署 - 简书
给大家推荐几个博主搭建过或尝试过的优秀开源项目
1、配合openoffice实现文档的在线预览,实现本地文档添加,文档转换为html,文档HTML方式预览,可以实现预览的文档:doc、docx、ppt、pptx、xls、xlsx、zip、rar
码云仓库地址:WDA文件在线预览: 配合openoffice实现文档的在线预览,实现本地文档添加,文档转换为html,文档HTML方式预览,可以实现预览的文档:doc、docx、ppt、pptx、xls、xlsx、zip、rar
2、使用spring boot打造文件文档在线预览项目解决方案,支持doc、docx、ppt、pptx、xls、xlsx、zip、rar、mp4、mp3以及众多类文本如txt、html、xml、java、properties、sql、 js、md、json、conf、ini、vue、php、py、bat、gitignore等文件在线预览
码云仓库地址:kkFileView: 使用spring boot打造文件文档在线预览项目解决方案,支持doc、docx、ppt、pptx、wps、xls、xlsx、zip、rar、ofd、xmind、bpmn 、eml 、epub、3ds、dwg、psd 、mp4、mp3以及众多类文本类型文件在线预览
3、文档在线预览编辑,文档水印 / Office files preview or edit online, doc/docx convert to html, watermark
GitHub仓库地址:GitHub - ekoz/kbase-doc: 文档在线预览编辑,文档水印 / Office files preview or edit online, doc/docx convert to html, watermark
4、onlyoffice 毕升解决方案。毕升文档在线文件服务部分的Office在线编辑预览使用优秀的开源项目onlyOffice,根据开源协议我们将毕升修改过的sdkjs进行开源。另外毕升文档重新 设计only Office UI交互以及彻底重写服务器。
GitHub仓库地址:GitHub - ibisheng/onlyoffice-ibisheng: onlyoffice 毕升解决方案。毕升文档在线文件服务部分的Office在线编辑预览使用优秀的开源项目onlyOffice,根据开源协议我们将毕升修改过的sdkjs进行开源。另外毕升文档重新设计only Office UI交互以及彻底重写服务器。
这类服务有很多,大家可以结合自己的实际需求选择,我给大家例举几个常见的
1、百度智能云文档服务:文档服务_文档服务管理_文档转换-百度智能云
2、腾讯在线文档:腾讯文档-官方网站-支持多人在线编辑Word、Excel和PPT文档