编写项目遇到一个需要在浏览器中打开PDF文件的问题。最终实现效果如下：
其实也就是简单的在浏览器中实现一个打开pdf文件，并有类似预览功能的边框。
![[置顶] 如何在浏览器中打开PDF文件并实现预览的思路与代码](https://image.shishitao.com:8440/aHR0cDovL2Jic21heC5pa2FmYW4uY29tL3N0YXRpYy9MM0J5YjNoNUwyaDBkSEF2YVcxbkxtSnNiMmN1WTNOa2JpNXVaWFF2TWpBeE16RXdNamt4TlRJeE1ERTVNRFkvZDJGMFpYSnRZWEpyTHpJdmRHVjRkQzloU0ZJd1kwUnZka3d5U25OaU1tTjFXVE5PYTJKcE5YVmFXRkYyWlVoV2JHVkhiR2hpTWxKMlltMWpkMDFFYXowdlptOXVkQzgxWVRaTU5Vd3lWQzltYjI1MGMybDZaUzgwTURBdlptbHNiQzlKTUVwQ1VXdEdRMDFCUFQwdlpHbHpjMjlzZG1Vdk56QXZaM0poZG1sMGVTOVRiM1YwYUVWaGMzUT0uanBn.jpg?w=700&webp=1 "[置顶] 如何在浏览器中打开PDF文件并实现预览的思路与代码")
其实在网上经常见到类似的页面，在浏览器中打开pdf文档，可大部分都是由于版权的原因使用了一些很特殊的技术，自然很难模仿了。
即使有直接在浏览器打开的例子，也必须手动点击一下链接然后才能打开pdf文件。如何直接打开，而不用点击链接呢？
本以为自己对js很熟，也就使用js模拟点击，可就是不管用，没办法，只能在网上继续寻找资料。最终想不到代码却很简单。
最主要的是使用到了一个jquery的插件jquery.media.js，使用这个插件就很容易实现了。
核心代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta content="IE=7.0000" http-equiv="X-UA-Compatible"/>
<title>pdf阅读</title>
<script type="text/javascript" src="pdfview_files/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="pdfview_files/jquery.media.js"></script>
<script type="text/javascript">
$(function () {
$('a.media').media({ width: 800, height: 800 });
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="main"><a class="media" href="../../灾害性天气典型个例/暴雨/河套西部一次局地大暴雨成因分析.pdf" id="PDFFile">河套西部一次局地大暴雨成因分析</a>
</div>
</form>
</body>
</html>
使用jquery.media.js就可以直接把一个连接到pdf文件的链接打开，满足了需求。
[置顶] 如何在浏览器中打开PDF文件并实现预览的思路与代码的更多相关文章
-
MVC自定定义扩展点之ActionNameSelectorAttribute+ActionFilterAttribute 在浏览器中打开pdf文档
仅仅演示 了ASP.MVC 5 下为了在在浏览器中打开pdf文档的实现方式之一,借此理解下自定义ActionNameSelectorAttribute+ActionFilterAttribute 类的 ...
-
前端vue实现pdf文件的在线预览
3.前端vue实现pdf文件的在线预览 我是通过 <iframe> 标签就可以满足我工作的 pdf预览需求 如果<iframe> 无法满足需求 , 可以使用pdf.js这个插件 ...
-
SharePoint 2013在浏览器中打开pdf文档
在没有安装Office Web Apps的情况下,SharePoint 2013是支持在IE上直接打开pdf和Excel文档的(只能查看,不能编辑,部分Excel会报错). 当然,需要现在管理中心做一 ...
-
浏览器中打开PDF链接
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
-
VS Code如何在浏览器中打开Html文件？
1.首先打开扩展 “ 文件 → 首选项 → 按键映射扩展” 快捷键:[ Ctrl+K Ctrl+M ] 2.在出现的窗口输入“open in browser”,安装 3.打开Html文件 Alt+B: ...
-
H5拖拽 构造拖拽及缩放 pdf文件转换为html预览
前言: 协助项目需要实现一个签名的功能. 功能说明:1.有文本签名和头像签名.2.头像签名需要实现可拖拽功能.3.需要展示的是pdf的文件并需要获取签名位于pdf文件的相对位置. 功能一:实现拖拽 思 ...
-
vue实现pdf文件的在线预览
我是通过 <iframe> 标签就可以满足我工作的 pdf预览需求 如果<iframe> 无法满足需求 , 可以使用pdf.js这个插件,功能强大. <iframe :s ...
-
在浏览器中打开php文件时，是Linux中的哪个用户执行的？
https://segmentfault.com/q/1010000002541340 如题,这样我就可以针对这个用户设置权限了.而且这个用户是怎么关联上的,怎么查看? 解答一: .是执行 PHP 指 ...
-
利用FlashPaper在web页面中显示PDF文件(兼容各浏览器）
应项目需求要把PDF内嵌到网页中显示,其中有了很多办法,比如用<embed/>元素放入PDF文件,但是效果不理想,浏览器兼容不理想,在ie9/8(其他版本没有测试)显示会提示下载pdf文件 ...
随机推荐
-
MYSQL删除重复数据
delete from co_jobinformation cwhere c.name in (select cc.name from co_jobinformation cc group by ...
-
IOS中延迟执行的几种方法
前几天去国美在线面试,就遇到了上面的问题,当时是笔试,只写出来了第一种方法,现在整理了一下. //1.performSelector方法:在当前线程中执行的方法,使用默认模式,并延迟执行@select ...
-
textarea内部换行实现
当在使用textarea的时候,有一次需求,需要做到自定义换行,而不是通过textarea定宽来自动换行,其实在html中可以直接通过<br/>来换行,同时也想到用\n来实现换行,其结果是 ...
-
bootstrap dialog自行控制窗口的关闭
在使用dialog的时候,我们通常不希望点击btn的时候自动隐藏dialog,通常需要做一些清理或者ajax操作,在bootstrap dialog中,这是通过 data-dismiss=" ...
-
PING的原理以及ICMP协议
主要内容: 1.ping的原理以及工作过程 2.ICMP协议 3.ICMP的应用:ping,traceroute 1.ping的原理以及工作过程 ping的原理 ping 程序是用来探测主机到主机 ...
-
P4705 玩游戏
思路 超级麻烦... 写了一堆最后常数太大T飞了... 真的难受 发现solve函数可以不用把下一层复制上来,直接传指针就可以,下次再说写不写叭 思路 \[ ans_k=\sum_{i=1}^n\su ...
-
cocos-lua3.17 Lua tablrView工具类
local MyTableView = class("MyTableView") MyTableView.__index = MyTableView MyTableView.pro ...
-
# 20175329 2018-2019-2 《Java程序设计》第二周学习总结
# 学号 2018-2019-3<Java程序设计>第三周学习总结 ## 教材学习内容总结 第二三章与我们所学习的C语言有很多的相似点,在这里我想主要就以我所学习的效果来讨论一下JAVA与 ...
-
week06 codelab01 react-router 去官网学习
官方教程https://github.com/reactjs/react-router-tutorial git clone 到本地 和教程学 第一课 LESSON 2 index.js引入一些pac ...
-
最全的android学习资料
一.开发环境搭建 (已完成) 负责人:kris 状态:已完成 所整理标签为:搭建 SDK JDK NDK Eclipse ADT 模拟器 AVD 调试器(DEBUG) DDMS 测试 日志 Logca ...