您的当前位置：首页正文

前端实现pdf预览

来源：独旅网

引入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>

因篇幅问题不能全部显示，请点此查看更多更全内容

查看全文