页面防打印方案

README.md
下载(1.15 kB)
复制

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

  1. 模糊法

页面失去焦点时，模糊页面，使其打印的页面也模糊。

有效：Chrome/Firefox 无效：IE （模糊无法使用，但可以在 IE 环境使其完全空白作为备选方案）

这个方案体验稍差

Demo

  1. css media 方法

浏览器可以自定义打印模式下的 CSS 样式，在打印模式下，隐藏页面所有内容，从而阻止打印

有效：Chrome/Firefox/IE

这个方案对于用户来说，无感知

Demo

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

默认的浏览器快捷键是 CTRL+P，可以通过阻止快捷键打印

这个方案只能阻止页面内的快捷键，仍然可以通过其他途径触发打印

Demo

  1. 覆盖 javascript 的 print 方法

Javascript 内置了 print 方法，可以覆盖 print 方法，防止其他的 javascript 代码调用打印

这个方案只能阻止 javascript 层面的打印 ，仍然可以通过其他途径触发打印

Demo

结合以上几个方法，基本上阻止大部分的打印

block_shotcut_no_print.html
下载(908 B)
复制

>
<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/IEh2>

    <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
下载(1.27 kB)
复制

>
<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/Chromeh2>
    <h2>not works: IEh2>

    <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
下载(461 B)
复制

>
<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 11h2>
  body>
html>

overwrite_javascript_print.html
下载(942 B)
复制

>
<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/IEh2>

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

大牛们的评论:朕有话说

还没有人评论哦，赶紧抢沙发!