html 在线打开pdf文件,Html打开pdf、word、xls等文件
1、前端实现pdf文件在线预览功能
方式一、pdf文件理论上可以在浏览器直接打开预览但是需要打开新页面。在仅仅是预览pdf文件且UI要求不高的情况下可以直接通过a标签href属性实现预览
方式二、通过jquery插件jquery.media.js实现 这个插件可以实现pdf预览功能(包括其他各种媒体文件)但是对word等类型的文件无能为力。 实现方式: js代码:
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
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 在线打开pdf文件,Html打开pdf、word、xls等文件相关推荐
- 在j2ee的web项目中,执行文件如excel、word导入,文件路径可以是“C:/Users/user/Desktop/abc/abc.xls”这样的路径吗?还是应该是工程的路径:/WEB-INF/
在j2ee的web项目中,执行文件如excel.word导入,文件路径可以是"C:/Users/user/Desktop/abc/abc.xls"这样的路径吗?还是应该是工程的路径 ...
- Java读取模板文件您好,RtfTemplate 读取word模板生成文件
try { response.reset(); response.setContentType("txt/rtf; charset=GBK"); String fileName = ...
- 如何保存PDF、Word和Excel文件到数据库中
在项目中,有时候我们很需要把PDF.Word和Excel文档等等上传到数据库,以便日后使用.今天这篇文章向大家讲解如何将这些文件保存到数据库的. 详细步骤 第一步:打开数据库,单击新建查询,创建一个名 ...
- 如何将PDF如何存入MySQL_如何保存PDF、Word和Excel文件到数据库中
在项目中,有时候我们很需要把PDF.Word和Excel文档等等上传到数据库,以便日后使用.今天这篇文章向大家讲解如何将这些文件保存到数据库的. 详细步骤 第一步:打开数据库,单击新建查询,创建一个名 ...
- xlsx是什么格式的文件?怎么打开
xlsx是 "OfficeExcel"的表格文件:xlsx基于"OfficeOpenXML"标准压缩文件取代了专有的默认文件格式,并在传统文件扩展名后添加了以下 ...
- Python加密有敏感信息的Word/Excel等文件
① 目的 电脑使用时间长,保存了极多的WORD与EXCEL文件 文件版本不同(.doc .docx .xls .xlsx -) 文件内保存有重要的身份信息(身份证号.手机号-) 要求对word和exc ...
- html 在线打开pdf文件怎么打开,在HTML中打开pdf文件怎么打开
回答: PDF是Portable Document Format的简称,意为"便携式文档格式",是由Adobe Systems用于与应用程序.操作系统.硬件无关的方式进行文件交换所 ...
- PHP 把ofd格式文件转PDF,打开OFD格式文件及将OFD格式文件转换成PDF文件
今天收到一张浙江开具的ofd格式发票,便在网上找相关的软件来打开方便打印出来给财务做账,但是找了一大圈没有解决方案,有些收费的解决方法,大部分所谓的OFD软件是骗人的,下载安装后根本打不开OFD格式的 ...
- OFD文件怎么打开?OFD免费转PDF?
一.OFD是什么格式文件? OFD格式是我国自主研发.自主可控的电子文件版式文档格式,OFD版式文件因其版面固定.不跑版.所见即所得等优势,被视为计算机时代的"数字纸张":是电子文 ...
- js打开服务器pdf文件,iOS使用pdf.js打开PDF文件
最近研究了下iOS打开PDF文件的方式,由于项目需要在浏览PDF文件时能使用HTML格式文件,调研了一下iOS中打开PDF文件的几种方式,发现pdf.js开源库可以做到这一点,通过调用js在线预览PD ...
最新文章
- NVIDIA GPU的神经网络自动调度
- kubesphere devops介绍、访问账密及nfs数据备份同步
- hihocoder-Week173--A Game
- 【精心总结】java内存模型和多线程必会知识
- 北京重磅发布:杰青、优青放宽女性年龄限制,基金人才评审“同等条件下女性优先”...
- 产品经理的肾,是怎么坏的?
- 浅析BMP位图文件结构(含Demo)[转]
- ubuntu通过vmware与访问宿主的文件
- python官网安装程序的功能和特点_python介绍与安装(一)
- “拳打”苹果“脚踢”三星,荣耀 20 DXO 全球第二,仅次华为 P30!
- USB:收录比较好的USB协议讲解
- winform前后端框架_ABP开发框架前后端开发系列(1)框架的总体介绍
- 五款APP让你告别拖延症!余生愿你活成自己想要的样子
- 【渗透测试】--- rbash逃逸方法简述
- java开发基础知识学习总结
- 对VC++下Debug模式和Release模式的简要分析
- 人工智能ai思维_人工智能系统如何学习创造性思维
- matplotlib设置坐标轴
- 如何将彩色文本打印到终端?
- matlab一直系统函数画脉冲响应,MATLAB之使用 impz 函数计算并画出脉冲响应