axetroy/README.md

## README.md

      
    Raw
  

              README.md
            
          
    收集几种方案，用于防止页面被打印出来。

模糊法

页面失去焦点时，模糊页面，使其打印的页面也模糊。
有效：Chrome/Firefox
无效：IE （模糊无法使用，但可以在 IE 环境使其完全空白作为备选方案）
这个方案体验稍差
Demo

css media 方法

浏览器可以自定义打印模式下的 CSS 样式，在打印模式下，隐藏页面所有内容，从而阻止打印
有效：Chrome/Firefox/IE
这个方案对于用户来说，无感知
Demo

阻止浏览器默认的打印快捷键

默认的浏览器快捷键是 CTRL+P，可以通过阻止快捷键打印
这个方案只能阻止页面内的快捷键，仍然可以通过其他途径触发打印
Demo

覆盖 javascript 的 print 方法

Javascript 内置了 print 方法，可以覆盖 print 方法，防止其他的 javascript 代码调用打印
这个方案只能阻止 javascript 层面的打印 ，仍然可以通过其他途径触发打印
Demo
结合以上几个方法，基本上阻止大部分的打印

  
## block_shotcut_no_print.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>阻止 CTRL+P 快捷键打印</title>
  </head>
  <body>
    <h1>防止打印</h1>
    <h2>works: Firefox/Chrome/IE</h2>

    <script>
      function onKeyDown(event) {
        var isCtrlP = (event.ctrlKey || event.metaKey) && event.key == 'p';
        var isPrintScreen = event.key === 'PrintScreen';
        if (isCtrlP || isPrintScreen) {
          event.cancelBubble = true;
          event.preventDefault();
          event.stopPropagation();
          event.stopImmediatePropagation();
          alert('阻止打印');
        }
      }

      document.body.addEventListener('keydown', onKeyDown);
      window.addEventListener('keydown', onKeyDown);
    </script>
  </body>
</html>

## blur_no_print.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>通过模糊防止打印</title>
  </head>
  <body>
    <h1>防止打印</h1>
    <h2>works: Firefox/Chrome</h2>
    <h2>not works: IE</h2>

    <script>
      var isIe = window.document.documentMode;

      function blur() {
        document.body.style.cssText =
          '-webkit-filter: blur(5px);-moz-filter: blur(5px);-ms-filter: blur(5px);-o-filter: blur(5px);filter: blur(5px);';

        if (isIe) {
          document.body.style.display = 'none';
        }

        console.log('blur');
      }

      function cleanBlur() {
        document.body.style.cssText =
          '-webkit-filter: blur(0px);-moz-filter: blur(0px);-ms-filter: blur(0px);-o-filter: blur(0px);filter: blur(0px);';

        if (isIe) {
          document.body.style.display = 'block';
        }

        console.log('clean blur');
      }

      document.addEventListener('blur', blur);
      window.addEventListener('blur', blur);
      document.addEventListener('click', cleanBlur);
      document.addEventListener('focus', cleanBlur);
    </script>
  </body>
</html>

## css_media_no_print.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>通过 CSS 特定屏蔽打印</title>

    <style type="text/css" media="print">
      body {
        display: none;
      }
    </style>
  </head>
  <body>
    <h1>防止打印</h1>
    <h2>works: Firefox/Chrome/IE 11</h2>
  </body>
</html>

## overwrite_javascript_print.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>阻止 Javascript 打印页面</title>
  </head>
  <body>
    <h1>防止打印</h1>
    <h2>works: Firefox/Chrome/IE</h2>

    <button id="print">点击打印</button>

    <script>
      (function () {
        var __PRINT__ = window.print;

        function print() {
          alert('打印被阻止');
        }

        if (Object.defineProperty) {
          Object.defineProperty(window, 'print', {
            value: print,
            configurable: false,
            writable: false,
          });
        } else {
          window.print = print;
        }
      })();

      document.getElementById('print').addEventListener('click', function () {
        window.print();
      });
    </script>
  </body>
</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>阻止 CTRL+P 快捷键打印</title>
	</head>
	<body>
	<h1>防止打印</h1>
	<h2>works: Firefox/Chrome/IE</h2>

	<script>
	function onKeyDown(event) {
	var isCtrlP = (event.ctrlKey \|\| event.metaKey) && event.key == 'p';
	var isPrintScreen = event.key === 'PrintScreen';
	if (isCtrlP \|\| isPrintScreen) {
	event.cancelBubble = true;
	event.preventDefault();
	event.stopPropagation();
	event.stopImmediatePropagation();
	alert('阻止打印');
	}
	}

	document.body.addEventListener('keydown', onKeyDown);
	window.addEventListener('keydown', onKeyDown);
	</script>
	</body>
	</html>