使用 React 轻松实现电子合同在线预览、签名和导出

2024-02-18 10:29:42

在数字时代，电子合同越来越受到重视，因为它提供了便捷、安全且合法的签约方式。基于 React 的在线电子合同解决方案可以将电子签约流程提升到一个新的水平，让用户可以在线预览、签名和导出 PDF 合同。

本教程将引导您创建基于 React 的电子合同应用程序，展示如何集成在线预览、签名和导出功能。我们还将探讨提高用户体验和确保文档安全性的最佳实践。

在线预览

在线预览功能允许用户在签署前审查和验证合同内容。要实现这一点，我们可以使用 PDF.js 库来在浏览器中呈现 PDF 文档。

import { useEffect, useRef } from "react";
import PDFJS from "pdfjs-dist";

export const PDFPreview = ({ pdfUrl }) => {
  const canvasRef = useRef(null);

  useEffect(() => {
    const loadPDF = async () => {
      const pdf = await PDFJS.getDocument(pdfUrl);
      const page = await pdf.getPage(1);
      const viewport = page.getViewport({ scale: 1 });
      const canvas = canvasRef.current;
      const ctx = canvas.getContext("2d");

      ctx.save();
      ctx.scale(viewport.transform[0], viewport.transform[1]);
      ctx.translate(viewport.transform[2], viewport.transform[3]);
      await page.render({ canvasContext: ctx, viewport: viewport });
      ctx.restore();
    };

    if (pdfUrl) {
      loadPDF();
    }
  }, [pdfUrl]);

  return <canvas ref={canvasRef} />;
};

签名

实现签名功能需要集成第三方电子签名库。一个流行的选择是 DocuSign。要集成 DocuSign，您需要创建一个 DocuSign 帐户并获取 API 密钥。

import { useEffect, useRef } from "react";
import DocuSign from "docusign-esign";

export const SignaturePad = ({ onSign }) => {
  const signaturePadRef = useRef(null);

  useEffect(() => {
    const initializeDocuSign = async () => {
      const docusign = new DocuSign({
        clientId: "YOUR_CLIENT_ID",
        secretKey: "YOUR_SECRET_KEY",
      });

      const signaturePad = docusign.createSignaturePad(signaturePadRef.current);
      signaturePad.on("signature", onSign);
    };

    if (onSign) {
      initializeDocuSign();
    }
  }, [onSign]);

  return <div ref={signaturePadRef}></div>;
};

导出

导出功能允许用户将签署的合同下载为 PDF。我们可以使用 file-saver 库来轻松导出文件。

import { saveAs } from "file-saver";

export const ExportButton = ({ pdfUrl }) => {
  const handleExport = () => {
    saveAs(pdfUrl, "contract.pdf");
  };

  return <button onClick={handleExport}>导出 PDF</button>;
};