版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/mm_hello11/article/details/82940699
jquery.media.js实现页面显示pdf文件功能
文件目录为:
代码为:
生成样式为:
页面显示pdf文件成功,但是没有任何属性方法可以控制显示隐藏下载功能,如果没有禁止下载功能的需求可以用此插件。
pdfobject.js实现页面显示pdf文件功能
<style type="text/css">
html,body,#pdf{
width:100%;
height: 100%;
margin: 0;
padding: 0;
}
.over{
width:100%;
height: 100%;
background-color: rgba(1,1,1,0);
position: fixed;
top:0px;
left:0px;
}
</style>
<p class="over"></p>
<div id="pdf" data-pdf="demo.pdf"></div>
<script type="text/javascript" src='jq.js'></script>
<script type="text/javascript" src='pdfobject.js'></script>
<script type="text/javascript">
//禁止鼠标右键功能
document.oncontextmenu = function () {
return false;
}
//设置隐藏谷歌浏览器上方的顶部条
var options = {
pdfOpenParams: {
pagemode: "thumbs",
toolbar: 0,
navpanes: 0,
statesbar: 0,
view: 'FitV'
}
}
PDFObject.embed($("#pdf").attr("data-pdf"), '#pdf', options);
</script>
此种方法实现了去除顶部下载条的功能,去除右键下载我用的方法是在pdf文件上面盖住一层透明布,然后设置document.oncontextmenu来禁止右键功能,完美实现了禁止右键。但是此pdfobject.js插件仅兼容chrom浏览器,对于其他浏览器没有用途。