在线浏览pdf doc html,前端实现在线预览pdf、word、xls、ppt等文件
1、前端实现pdf文件在线预览功能
方式一: 通过a标签href属性实现
pdf文件理论上可以在浏览器直接打开预览但是需要打开新页面。在仅仅是预览pdf文件且UI要求不高的情况下可以直接通过a标签href属性实现预览
方式二: 通过jquery插件jquery.media.js实现
这个插件可以实现pdf预览功能(包括其他各种媒体文件)但是对word等类型的文件无能为力。
实现方式:
html结构:
调用方式:
$('#handout_wrap_inner').media({
width: '100%',
height: '100%',
autoplay: true,
src:'http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf',
});
方式三: 直接通过页面内嵌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
html,body,#pdf_viewer{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
if(PDFObject.supportsPDFs){
// PDF嵌入到网页
PDFObject.embed("index.pdf", "#pdf_viewer" );
} else {
location.href = "/canvas";
}
// 还可以通过以下代码进行判断是否支持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 demo
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、利用后端将文件转为图片,前端以图片形式预览(可行方案)
3、购买在线预览服务例如百度DOC文档服务、永中、I DOC VIEW等
关注微信公众号:生活充电堡
在线浏览pdf doc html,前端实现在线预览pdf、word、xls、ppt等文件相关推荐
- 计算机无法快速预览pdf,电脑中无法使用火狐浏览器预览PDF文档怎么解决
在火狐浏览器中具有在网页中支持打开PDF文档的功能.有用户在使用Firefox打开PDF文档时却被提示需要保存文件,而不能直接在页面中预览.如果遇到上述的情况,我们应该如何操作才能在火狐浏览器中直 ...
- 前端 PDFObject.embed预览PDF,另类方式隐藏工具条样例
<body> <div id="divid"></div> </body> <script > var filePath ...
- React:后端返回pdf数据流,前端打开页面预览,使用fetch,PDFObject
预览页面: import React, { useEffect } from 'react'; import { connect } from 'react-redux'; import PropTy ...
- html js 在线预览 pdf word xls等
1.前端实现pdf文件在线预览功能 方式一.pdf文件理论上可以在浏览器直接打开预览但是需要打开新页面.在仅仅是预览pdf文件且UI要求不高的情况下可以直接通过a标签href属性实现预览 <a ...
- 微信小程序部分手机预览pdf没反应
今天同事反映,预览PDF打不开.其他同事都可以打开. 和他调试后发现,提示缓存已满. 通过api FileSystemManager.readdir 让他看看所缓存的文件,发现有234个. 让其清理缓 ...
- 前端【vue】实现文档在线预览功能,在线预览pdf、word、xls、ppt等office文件
前端江太公 前端实现文档在线预览功能 最直接的就是使用XDOC 文档云服务 XDOC可以实现预览以DataURI表示的DOC文档,此外XDOC还可以实现文本.带参数文本.html文本.json文本.公 ...
- js在线预览pdf,doc,xls,jpg等文件
由于项目需要,需要在上传文件后在线预览所上传的文件.最开始我的思路就是想到各种插件什么的.比如说pdf.js.pdfobject,但最后都没能达到我所想要的效果. 最后我发现,原来,只需要一个很简单的 ...
- html浏览pdf文件,HTML网页在线预览PDF文件
image.png image.png 今日工作需要,需要在线预览PDF文件,so,做了个研究,下面将网页在线预览pdf的方法做个梳理,大家共同学习成长吧 方法分为三种 1. 方法1-embed标签 ...
- 前端在线预览PDF文件
如何在vue项目中预览PDF格式的文件 需求:在vue3.x项目中预览pdf文件 提供以下三种方案: 1.Vue-pdf:适用于vue2.x版本,vue3.x需要改一些源码(vue2.x项目极力推荐, ...
最新文章
- 985硕博导师:如果你没空看书,我强烈建议你做这件事
- 扫盲篇:用户体验不等于可用性
- Design Pattern - Service Locator Pattern--转载
- CF858F Wizard's Tour 解题报告
- druid-StatViewServlet配置
- ionic html5 上传图片,ionic4+angular7+cordova上传图片功能的实例代码
- Java LocalDateTime类| 带示例的getMinute()方法
- matlab 平滑曲线连接_【仪光学习】技能分享 | 前方高能:如何用Matlab轻松实现数学建模...
- (转)python 搭建libsvm方法。python版本和libsvm版本匹配很重要!
- Android Open Source Projects(汇总与整理)
- 在计算机上配置超级终端,解决办法:如何在XP系统中设置超级终端? xp超级终端设置方法...
- MCU方案分享----按摩贴方案
- 白马非马----继承 (转)
- Intel Thunderbolt 3 接口介绍
- 工作小结_2016年2月23日23:16:59
- postman显示返回的base64图片验证码、二维码
- 瑞萨E1仿真器(R0E000010KCE00)支持的MCU系列--V850 Family
- 如何清除木马--104种木马手工清除方法
- 画春天的景色计算机教案,幼儿园春天主题教案:画春天
- jQuery——赛车小游戏
热门文章
- Swift语法学习--字典
- 加密货币、区块链不断贴近生活,阿里、腾讯、脸书等大厂们在做什么?
- python两张图合成一张_Python图像处理实现两幅图像合成一幅图像的方法【测试可用】...
- [3]_人人都是产品经理
- element-ui中的el-table-column加v-if不生效,表头错乱
- 使用Python创建excel文件成功后报错打不开
- Java笨狗的C/C++
- Groovy(Java笨狗)系列--Class,Scripts
- Apollo Planning决策规划算法代码详细解析 (5):规划算法流程介绍
- 大学计算机作业互评评语简短,大学学生互评评语简短