html 在线打开word文件,Html打开pdf、word、xls等文件

1、前端实现pdf文件在线预览功能

方式一、pdf文件理论上可以在浏览器直接打开预览但是需要打开新页面。在仅仅是预览pdf文件且UI要求不高的情况下可以直接通过a标签href属性实现预览

方式二、通过jquery插件jquery.media.js实现这个插件可以实现pdf预览功能(包括其他各种媒体文件)但是对word等类型的文件无能为力。实现方式： js代码：

html结构：

调用方式：

});

方式三、直接通过页面内嵌iframe$("").appendTo($(".video-handouts-preview"));

此外还可以在iframe标签之间提供一个提示类似这样This browser does not support PDFs. Please download the PDF to view it: Download PDF

方式四、通过标签嵌入内容

此标签h5特性中包含四个属性：高、宽、类型、预览文件src！与< iframe > < / iframe > 不同，这个标签是自闭合的的，也就是说如果浏览器不支持PDF的嵌入，那么这个标签的内容什么都看不到！

方式五、标签和iframe使用差别较小This browser does not support PDFs. Please download the PDF to view it: Download PDF

除方式二以外其他都是直接通过标签将内容引入页面实现预览

方式六、PDFObject

PDFObject实际上也是通过标签实现的直接上代码

Show PDF复制代码

还可以通过以下代码进行判断是否支持PDFObject预览if(PDFObject.supportsPDFs){

console.log("Yay, this browser supports inline PDFs.");

} else {

console.log("Boo, inline PDFs are not supported by this browser");

}

方式七、PDF.js

PDF.js可以实现在html下直接浏览pdf文档，是一款开源的pdf文档读取解析插件，非常强大，能将PDF文件渲染成Canvas。PDF.js主要包含两个库文件，一个pdf.js和一个pdf.worker.js，一个负责API解析，一个负责核心解析。

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

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

src就是要实现预览的文件地址具体文档看这微软接口文档

补充：google的文档在线预览实现同微软(资源必须是公共可访问的)

3、word文件

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

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

4、excel文件

目前excel文件已经有了类似pdf.js那样的解析sheet.js

总结：

1、免费纯前端方式实现在线预览word、excel、ppt最优选择微软在线预览(不可编辑)

2、利用后端将文件转为图片，前端以图片形式预览(可行方案)

html 在线打开word文件,Html打开pdf、word、xls等文件相关推荐

iOS 打开html、txt、PDF、PPT等文件
[iOS 打开html.txt.PDF.PPT等文件] 如果想打开一些常见文件,比如html.txt.PDF.PPT等,都可以使用UIWebView打开只需要告诉UIWebView文件的URL即可 ...
将Word文档转换为PDF时出现“PDFmaker文件遗失，要在修复模式下运行安装程序吗？”的提示
鼠标右击将Word文档转换为PDF时出现"PDFmaker文件遗失,要在修复模式下运行安装程序吗?"的提示,运行完安装程序以后,问题还是没有解决,依旧有提示,这是什么原因,我电脑装 ...
python word,ppt,excel转pdf(word转html),转图片
word,ppt,excel转pdf 装依赖 pip install comtypes==1.1.10 转换 import comtypes.client import osdef ppt_pdf(p ...
Android应用内展示word、excel、pdf、ppt等文件
笔者最近两个项目里头都有需要展示文件的功能,于是做了一番调研,发现asce1885给出一份方案,不过都是关于pdf的展示:http://www.jianshu.com/p/1bf49af6584d,显 ...
附件预览（可用于图片、word文档、pdf、.xls表格等预览）
一.fileView.vue文件里的完整代码(fileView.vue即为抽离出的附件预览组件) 1.html部分 <template><div class="docCon ...
文档在线预览（四）使用js前端实现word、excel、pdf、ppt 在线预览
文章目录实现方案一.docx文件实现前端预览 1.docx-preview 2.Mammoth 二.PDF文件实现前端预览 1.pdf.js 2.pdfobject.js 3.vue-pdf 4. ...
xlsx是什么格式的文件?怎么打开
xlsx是 "OfficeExcel"的表格文件:xlsx基于"OfficeOpenXML"标准压缩文件取代了专有的默认文件格式,并在传统文件扩展名后添加了以下 ...
微信小程序语音录制功能和文件（ppt、word、excel、pdf、txt格式）上传
语音录制提醒:因为开发者工具不能接收语音文件,所以要使用真机调试测试噢~ 思路:使用小程序API wx.startRecord .wx.stopRecord 方法(调用前记得 app.js 添加 ...
如何把PDF转成PPT文件？这几招简单方便
很多工作者,经常在会议中会用到PPT来汇总方案,但是有些优质的文案是放在PDF文件中储存的,没有办法很好的呈现出来,这时就需要将PDF转成PPT文件,那PDF怎么转换为PPT文件简单方便呢?下面给大家 ...
dwg格式文件怎么转换pdf？
在平时的办公中,我有很多工作都是在一两分钟内完成的.比如将dwg格式的文件转换成PDF,因为dwg文件可以实现随时被标记和打印等操作,所以cad中的dwg格式的文件也是很常见的.但是dwg文件体积大, ...

html 在线打开word文件,Html打开pdf、word、xls等文件

html 在线打开word文件,Html打开pdf、word、xls等文件相关推荐

最新文章

热门文章