在项目开发过程中,遇到这样的问题,使用iframe加载pdf,然后,用户选择是否打印,用户选择打印的入口有两个,一个是浏览器的Control + P,还有一个是pdf页面右上角的打印按钮,但是,两个入口的结果完全 不一样 ,其中Control + P打印内容是不正确的,因此,想着禁用Contol + P功能,但就是这么一个简单的功能,花费了一个上午的时间。所以在此记录一下,其他同学遇到此类问题时可参考。

一般情况下我们禁用Control + P功能,如下代码即可解决:

function forbidBrowserPrint(e) {
    e = window.event || e;
    var keycode = e.keyCode || e.which;
    console.log("keycode is : " + keycode);
    if (e.ctrlKey && keycode === 80) {
        e.preventDefault();
        window.event.returnValue = false;

因为我的项目中用到了Iframe加载pdf,上面的代码在pdf页面就失效了,究其原因,是因为iframe在其内部也生成了一套自己的Document

也就是说,一个页面出现了两个Document,因此我们需要对两个Document都进行Control + P功能禁用

$(function () {
    document.activeElement.addEventListener('keydown', forbidBrowserPrint);
function forbidBrowserPrintForIframe() {
    $("#pdfReport")[0].contentWindow.addEventListener('keydown', forbidBrowserPrint);
function forbidBrowserPrint(e) {
    e = window.event || e;
    var keycode = e.keyCode || e.which;
    console.log("keycode is : " + keycode);
    if (e.ctrlKey && keycode === 80) {
        e.preventDefault();
        window.event.returnValue = false;
<iframe id="pdfReport" style="width: 100%; height: 100%;" onload="forbidBrowserPrintForIframe()"></iframe>
在我们有的时候需要给用户展示一些文档,合同,协议… 但是我们不希望用可以拿到在线下,所以就需要 embed 代替 iframe <embed src={`${selectList.template_url}#toolbar=0`} type="application/pdf" height={600} width="100%" /> {/* <iframe frameboder={0} style={{ width: "
if(self!==top) top.location.replace(this.location) self和top都是frame里面的元素,self指的就是当前这个frame或者iframe, top指的是最顶层的frame。 即当这个iframe并不是最顶层的框架的时候, 那top就重新定向到一个location。 目的就是防止别的地方套用你的页面,人家如果套用你的页面的话,就会跳转
window.addEventListener('keydown',function(e){ if(e.keyCode==83&&(navigator.platform.match('Mac')?e.metaKey:e.ctrlKey)){
iframe内部再次嵌套iframe禁用右击事件 document.oncontextmenu=()=>{returnfalse}这个应该是也可以操作实现的,只是当时捣鼓好一会只能控制外层的iframe 测试发现浏览器自带右击可以另存为/保存 是一个iframe嵌套于一个项目之中
iframe.contentWindow.print()打印局部页面时,去掉页眉页尾 &amp;amp;amp;amp;amp;amp;lt;style media=&amp;amp;amp;amp;amp;quot;print&amp;amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;amp;gt; @page { size: auto; /* auto is the initial value */