最近给银行做一个项目，内网开发！使用了浏览器自带的PDF预览功能。行里的需求是不让下载、打印、鼠标右键禁止显示菜单。本来想用pdf.js代替的，遇到了跨域的问题，PDF地址是行里给的，让他们改很困难。解决办法是：1、用Nginx配置代理(后端不想改配置)；2、是前端用low的办法处理(目前只能用这种办法)。
一、iframe隐藏头部的toolbar
隐藏工具条，在iframe的src的地址后面加入’#toolbar=0’，就可以了。
二、禁止右键显示菜单
加蒙版CSS样式定位挡住，再加一行禁止右键显示菜单代码：
<script>
document.oncontextmenu = function(){
return false;
}
</script>
三、上代码
还是有2个bug：1、鼠标只能放到滚动条上才能滚动，用户体验不好；2、不知道滚动条的具体宽度会有像素差，鼠标放上去右键还是会显示菜单。
解决办法：最好使用pdf.js，还有就是让后端配置Nginx PDF文件路径代理。
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.pdf-wrap{
width: 500px;
height: 400px;
position: relative;
}
.pdf-wrap .mark {
position: absolute;
top: 0;
left: 0;
right: 10px;
bottom: 0px;
}
</style>
</head>
<body>
<div class="pdf-wrap">
<div class="mark"></div>
<iframe src="http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf#toolbar=0" width="100%" height="100%"></iframe>
</div>
<script>
document.oncontextmenu = function(){
return false;
}
</script>
</body>
</html>
微信公众号【前端学馆】程序员IT编程书籍分享！
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。