jquery.media.js 怎么预览pdf文件

JavaScript029

jquery.media.js 怎么预览pdf文件,第1张

其实也就是简单的在浏览器中实现一个打开pdf文件,并有类似预览功能的边框。

其实在中国上经常见到类似的页面,在浏览器中打开pdf文档,可大部分都是由于版权的原因使用了一些很特殊的技术,自然很难模仿了。

即使有直接在浏览器打开的例子,也必须手动点击一下链接然后才能打开pdf文件。如何直接打开,而不用点击链接呢?

本以为自己对js很熟,也就使用js模拟点击,可就是不管用,没办法,只能在中国上继续寻找资料。最终想不到代码却很简单。

最主要的是使用到了一个jquery的插件jquery.media.js,使用这个插件就很容易实现了。

核心代码:

成因分析使用jquery.media.js就可以直接把一个连接到pdf文件的链接打

在media.js文件中,找到

var html = K.mediaImg(self.themesPath + 'common/blank.gif', {

src : url,

type : K.mediaType(url),

width : width,

height : height,

autostart : autostartBox[0].checked ? 'true' : 'false',

loop : 'true'

})

self.insertHtml(html).hideDialog().focus()

}

jquery.media.js 插件实现在线预览PDF文件

代码:

[html] view plain copy

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html charset=UTF-8"/>

<title>在线预览PDF文档</title>

<link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.min.css">

<script type="text/javascript" src="js/jquery.min.js"></script>

<script type="text/javascript" src="js/jquery.media.js"></script>

<script type="text/javascript">

$(function() {

$('a.media').media({width:800, height:600})

})

</script>

</head>

<body>

<center>

<div class="panel panel-primary">

<div class="panel-heading" align="center">

<h2>预览pdf文件</h2>

</div>

<div class="panel-body">

<a class="media" href="yulan.pdf"></a>

</div>

</center>

</body>

</html>

截图: