前端实现pdf预览

最新推荐文章于 2024-07-29 15:31:57 发布

qq_42566295

最新推荐文章于 2024-07-29 15:31:57 发布

阅读量4.2k

点赞数 2

分类专栏：日常总结--jquery

本文链接：https://blog.csdn.net/qq_42566295/article/details/81080597

版权

日常总结--jquery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

引入pdf预览插件：<script type="text/javascript" src="jquery.media.js"></script>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<link rel="stylesheet" href="checkbox.css">
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.media.js"></script> <!-- pdf预览插件 -->
<style> 
*{
    padding:0;margin:0;
}
.previewfile{
    width: 100px;height: 100px;
    background-color: #f2f2f2;
    line-height: 100px;text-align: center;
}
</style>
<body>
<div class="outbox" style="margin-bottom: 60px;">
    <!-- pdf预览功能 -->
	<div class="previewfile">
		<div id="handout_wrap_inner">pdf预览</div>
	</div>
</div>
<script>
    jQuery('.previewfile').click(function(){
    	jQuery('#handout_wrap_inner').media({
          width: '600px',
          height: '600px',
          autoplay: true,
          src:'previewfile.pdf',
        }); 
    })
</script>
</body>

jquery.media.js下载地址：

https://github.com/malsup/media/blob/master/jquery.media.js