使用React PDF实现客户端PDF加密的免费开源方案咨询

当然有啦！完全能实现纯前端生成带密码保护的加密PDF，全程不用碰服务器，而且手机、iOS、平板、桌面端的浏览器都能跑。结合你正在用的React PDF，给你推荐靠谱的免费开源方案，还有具体的实现思路：

首先得说清楚：React PDF（也就是@react-pdf/renderer）本身不直接支持加密，但我们可以先让它生成未加密的PDF文件（Blob格式），再用另一个纯前端PDF处理工具给它加上密码保护，全程都在浏览器里完成，完全不用上传到服务器。

最贴合你需求的工具组合：@react-pdf/renderer + pdf-lib #

这两个都是完全开源免费的，跨浏览器兼容性拉满——不管是桌面端的Chrome/Firefox/Edge/Safari，还是移动端的iOS Safari、安卓Chrome，甚至平板设备，都能正常运行。

具体实现步骤： #

• 用React PDF的组件化方式渲染你的文档，生成未加密的PDF Blob
• 用pdf-lib加载这个Blob文件，设置用户密码（打开PDF需要输入的密码）和所有者密码（用于修改文档权限的密码）
• 导出加密后的PDF Blob，触发浏览器下载

示例代码参考： #

先安装依赖：

npm install @react-pdf/renderer pdf-lib

然后在你的React组件里这么写：

import React from 'react';
import { Document, Page, Text, View, PDFViewer } from '@react-pdf/renderer';
import { PDFDocument } from 'pdf-lib';

// 先定义你的PDF内容组件，和你平时用React PDF写的一样
const MyEncryptableDocument = () => (
  <Document>
    <Page size="A4" style={{ padding: 30 }}>
      <View>
        <Text style={{ fontSize: 18, fontWeight: 'bold' }}>这是加密后的PDF内容</Text>
        <Text style={{ marginTop: 10 }}>只有输入正确密码才能查看哦！</Text>
      </View>
    </Page>
  </Document>
);

export default function EncryptedPdfGenerator() {
  const handleGenerateAndDownload = async () => {
    try {
      // 第一步：用React PDF生成未加密的PDF Blob
      const rawPdfBlob = await MyEncryptableDocument.toBlob();

      // 第二步：用pdf-lib加载Blob并添加密码保护
      const pdfDoc = await PDFDocument.load(rawPdfBlob);
      // 设置用户密码（打开PDF时需要输入）
      pdfDoc.setUserPassword('your-user-password');
      // 设置所有者密码（用于获取编辑、打印等权限，可选）
      pdfDoc.setOwnerPassword('your-owner-password');

      // 第三步：导出加密后的PDF字节流，转成Blob
      const encryptedPdfBytes = await pdfDoc.save();
      const encryptedPdfBlob = new Blob([encryptedPdfBytes], { type: 'application/pdf' });

      // 第四步：触发浏览器下载
      const downloadUrl = URL.createObjectURL(encryptedPdfBlob);
      const downloadLink = document.createElement('a');
      downloadLink.href = downloadUrl;
      downloadLink.download = 'encrypted-document.pdf';
      downloadLink.click();
      // 清理临时URL，避免内存泄漏
      URL.revokeObjectURL(downloadUrl);
    } catch (error) {
      console.error('生成加密PDF时出错啦：', error);
    }
  };

  return (
    <div style={{ padding: 20 }}>
      <h3>预览你的PDF</h3>
      <PDFViewer width="100%" height="500px" style={{ border: '1px solid #eee' }}>
        <MyEncryptableDocument />
      </PDFViewer>
      <button 
        onClick={handleGenerateAndDownload}
        style={{ marginTop: 20, padding: '10px 20px', fontSize: 16 }}
      >
        生成加密PDF并下载
      </button>
    </div>
  );
}

兼容性注意点 #

• 桌面端：Chrome、Firefox、Edge、Safari全版本支持（只要是近3年的版本都没问题）
• 移动端：iOS Safari 11+、安卓Chrome 60+，主流安卓浏览器和平板设备都能正常运行
• 小提醒：iOS设备下载后的PDF，需要用支持密码解锁的应用打开（比如苹果自带的Files应用、Adobe Acrobat等）

备选方案（如果不需要React PDF的组件化渲染） #

要是你后来不想用React PDF的组件式写法了，也可以试试jsPDF配合jspdf-encrypt插件——同样是纯前端、开源免费，能直接生成加密PDF。不过因为你已经在用React PDF，上面的组合肯定是最省心的。

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