时间戳

首页 > 解决方案 > 是否可以停止从打印预览复制文本？

javascript - 是否可以停止从打印预览复制文本？

问题描述

我试图阻止用户在打印屏幕上选择和复制文本。

我使用这个 CSS 来禁用选择。

.disable-select {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none;   /* Chrome/Safari/Opera */
    -khtml-user-select: none;    /* Konqueror */
    -moz-user-select: none;      /* Firefox */
    -ms-user-select: none;       /* Internet Explorer/Edge */
    user-select: none;           /* Non-prefixed version, currently supported by any browser but < IE9 */
}

<body class="disable-select">
    ...
</body

这个 jquery 可以防止我的网页中的复制、粘贴和右键单击选项

$(document).bind('contextmenu cut copy', function (e) {
    e.preventDefault();
});

它可以在网页上运行，但是当我们按 ctrl+p 打印网页并进入打印选项屏幕时，上述代码均无法在此屏幕上运行

在此打印屏幕上停止文本选择和复制

标签： javascriptjqueryhtmlcss

解决方案

不能影响打印预览。你可以看看这里

但是您可以阻止人们在打印页面中完全保留那段文本。像这样的东西：

.disable-select {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;    
    -moz-user-select: none;      
    -ms-user-select: none;      
    user-select: none;
}
@media print{
   .disable-select{
       display:none
   }
}

编辑

有一种方法可以做到这一点，更像是一个类似的技巧，而不是一个适当的 CSS 功能，但它只适用于现代浏览器。

显然，使用 CSS 过滤器会阻止用户在打印预览中选择文本

@media print{
   .disable-text{
      filter:grayscale(100%)
   }
}

CSS 过滤器兼容性表

编辑 2

还在打印场景中将固定元素的位置设置为相对。


@media print{
   .disable-text{
      filter:grayscale(100%)
   }
   .fixed-elements{
      position: relative;
   }
}

编辑 3

或者另一种防止更改固定元素的解决方案是将disable-text类添加到 HTML 标记或要防止文本被复制的特定 div 中。

推荐阅读