如何禁止复制@react-pdf/renderer渲染的PDF文本？

你当前的思路存在误区：在PDF文档内部添加overlay是无效的——react-pdf生成的是PDF格式内容，内部的View是PDF页面的一部分，用户依然能复制底层文本，且react-pdf的StyleSheet和Web CSS的zIndex机制不同，层级设置无法达到Web遮罩的效果。另外直接给PDFViewer容器加userSelect: none导致滚动失效，大概率是容器样式配置错误，而非属性本身的问题。

下面给出两种可行方案：

方案一：Web层透明遮罩（推荐） #

通过在PDFViewer外层容器添加一个透明的绝对定位遮罩，拦截用户的选中操作，同时不影响滚动功能：

import { PDFViewer } from '@react-pdf/renderer';
import CustomerPDF from './CustomerPDF';

export default function PDFDisplay() {
  return (
    <div style={{ position: 'relative', width: '100%', height: '80vh', overflow: 'auto' }}>
      <PDFViewer style={{ width: '100%', height: '100%' }}>
        <CustomerPDF data={/* 传入你的数据 */} />
      </PDFViewer>
      {/* 透明遮罩层，拦截选中文本操作 */}
      <div 
        style={{
          position: 'absolute',
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
          backgroundColor: 'transparent',
          userSelect: 'none',
          pointerEvents: 'auto',
          zIndex: 10
        }}
      />
    </div>
  );
}

方案二：修正容器样式，保留滚动的同时禁止选中 #

如果想用容器的userSelect: none实现需求，需确保容器配置正确的尺寸和滚动属性，避免滚动失效：

import { PDFViewer } from '@react-pdf/renderer';
import CustomerPDF from './CustomerPDF';

export default function PDFDisplay() {
  return (
    <div style={{ width: '100%', height: '80vh', overflow: 'auto', userSelect: 'none' }}>
      <PDFViewer style={{ width: '100%', height: '100%' }}>
        <CustomerPDF data={/* 传入你的数据 */} />
      </PDFViewer>
    </div>
  );
}

补充说明 #

@react-pdf/renderer本身不支持生成带复制限制的加密PDF，所以只能通过Web层面的交互拦截来阻止用户在浏览器中选中文本复制。

内容的提问来源于stack exchange，提问作者sohdata