如何在html中在线预览pdf文件?
方法1:使用 jquery js 库
1.引入 jquery-3.1.1.min.js 和 jquery.media.js 两个js文件,下载保存到本地
下载连接:jquery-3.1.1.min.js jquery.media.js
2.在html页引入js脚本:
<script type="text/javascript" src="javascripts/jquery/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="javascripts/jquery/jquery.media.js"></script>
3.页面加载完成需要执行的js代码:
$(function() {$('a.media').media({width:'1200px', height:'900px'});
});
4.在需要预览的区域加上html代码:
<div><a class="media" href="doc/乔布斯传中文版.pdf"></a>
</div>
样例预览 代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="乔布斯传中文版:在线阅读" />
<meta name="description" content="乔布斯传中文版:在线阅读" />
<title>乔布斯传中文版</title>
<script type="text/javascript" src="javascripts/jquery/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="javascripts/jquery/jquery.media.js"></script>
<script type="text/javascript">$(function() {$('a.media').media({width:'1200px', height:'900px'});});
</script>
</head>
<body background="images/bj.jpg"><center>
<div><a class="media" href="doc/乔布斯传中文版.pdf"></a>
</div>
</center>
</body>
</html>
方法2: 使用 pdfobject js 库
1.下载 pdfobject.js 插件
下载连接:pdfobject.js 2.引入 pdfobject.js 插件
<script type="text/javascript" src="javascripts/pdfobject.js"></script>
3.在 window.onload 中 实现具体 pdf 文档的显示:
<script type="text/javascript">window.onload = function() {PDFObject.embed("http://localhost/other/doc/乔布斯传中文版.pdf","#pdf");};
</script>
样例预览 代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="乔布斯传中文版:在线阅读" />
<meta name="description" content="乔布斯传中文版:在线阅读" />
<title>乔布斯传中文版</title>
<script type="text/javascript" src="javascripts/pdfobject.js"></script>
</head>
<body background="images/bj.jpg">
<script type="text/javascript">window.onload = function() {PDFObject.embed("http://localhost/other/doc/乔布斯传中文版.pdf","#pdf");};
</script>
<center>
<div id="pdf" style="width: 1200px;height: 900px;">
</div>
</center>
</body>
</html>
摘自:如何在html中在线预览pdf文件?如何在html中在线预览pdf文件?https://www.jxxgcyc.top/school/help001.html
如何在html中在线预览pdf文件?相关推荐
- html中在线预览pdf文件之pdf在线预览插件
html中在线预览pdf文件之pdf在线预览插件 最近遇到一个需求,要在html页面查看pdf生成的pdf文件! 翻来覆去找到两种办法 ,最后采用了jquery.media.js插件 方式一 将pdf ...
- html做在线预览pdf文件,html中在线预览pdf文件之pdf在线预览插件
html中在线预览pdf文件之pdf在线预览插件 最近遇到一个需求,要在html页面查看pdf生成的pdf文件! 翻来覆去找到两种办法 ,最后采用了jquery.media.js插件 方式一 将pdf ...
- html 在线预览pdf功能,html中在线预览pdf文件之pdf在线预览插件
html中在线预览pdf文件之pdf在线预览插件 最近遇到一个需求,要在html页面查看pdf生成的pdf文件!javascript 翻来覆去找到两种办法 ,最后采用了jquery.media.js插 ...
- 网页中实现安卓手机在线预览PDF文件
写在前面:本文为转载,原文链接:https://blog.csdn.net/super_DuoLa/article/details/90207965原文链接 苹果手机可以直接在线预览PDF文件,而安卓 ...
- android 在线预览pdf文件
android原生webView不支持预览pdf文件,ios却可以,所以android想要实现在线预览webView要通过其他方法,有以下几种方法: 1.andorid原生自带的pdf管理库,主要提供 ...
- Vue-pdf实现在线预览PDF文件
前言 在大多数项目中都会遇到在线预览PDF文件,项目使用的是element ui,使用vue-pdf实现. 安装依赖 npm install --save vue-pdf 相关参数 参数介绍: url ...
- uniapp在线预览pdf文件
公司要求uniapp打包的h5和app都要能在线预览pdf文件.最开始是想找uniapp的插件,去插件市场搜了下,没得几个插件可用,且需要收费,所以直接用的pdf.js插件实现,在h5以及h5打包的a ...
- js在线预览pdf文件
js在线预览PDF文件 一.效果预览 二.实现代码: <html> <head> <meta http-equiv="Content-Type" co ...
- html浏览pdf文件,HTML网页在线预览PDF文件
image.png image.png 今日工作需要,需要在线预览PDF文件,so,做了个研究,下面将网页在线预览pdf的方法做个梳理,大家共同学习成长吧 方法分为三种 1. 方法1-embed标签 ...
最新文章
- SLAM学习,小白入门到殿堂级大牛资料整理
- 在 IDEA 中使用 Debug,真是太厉害了!
- ULC2003达林顿管阵列STC8K28驱动电路模块
- mysql事务的四大特性与简单运用
- 从用户需求看互联网基础设施服务商www.shzhenai.com
- Earth Mover's Distance (EMD)距离
- ios开发text kit_IOS开发入门之TextKit详解
- C++——错误	error LNK2019: 无法解析的外部符号 _main,该符号在函数 ___tmainCRTStartup 中被引用
- 由SQL数据库转换Redis的实例
- excel的操作中,需要将特定的符号(如逗号)全部替换成软回车
- sudoers修改_为用户增加sudo权限(修改sudoers文件) | 学步园
- [转载] Java异常:选择Checked Exception还是Unchecked Exception?
- Windows2008计算机设置,Windows Server 2008 R2 个人使用优化设置
- 源代码管理工具 (git,CVS,SVN,Clearcase,VSS)
- 渥太华大学电子计算机两年,重磅!2021秋季渥太华大学电子与计算机专业直博录取分享!...
- Drain:在线实时日志解析方法
- 988-211所有学校
- java架构师全套图解,使用/教程/实例
- 大数据金融,这个“跨界整合”会带来什么
- 全国泰州市专业技术人员计算机考试,泰州市专业技术人员实用教程试题及答案(92分)...
热门文章
- 信息安全——安全威胁
- Logstash报错:[ERROR][logstash.agent ] Failed to execute action {...
- Maven 是什么东西?
- Transactional(事务)
- Go 与异步 IO - io_uring 的思考
- 国家队入场,中国数字资产交易市场或将迎来新一轮“洗牌”
- 使用ajax传递数组
- SQL智能提示插件--SQLPrompt_7.2.0.241(破解 )
- 5个超好用的自媒体网站,免费用
- 山科计算机科学与技术学院,山东科技大学-计算机科学与工程学院