React-PDF签名外观示例：签名外观的完整示例

薄昱炜

434人浏览 · 2025-10-12 06:54:56

薄昱炜 · 2025-10-12 06:54:56 发布

React-PDF签名外观示例：签名外观的完整示例

【免费下载链接】react-pdf 📄 Create PDF files using React 项目地址: https://gitcode.com/gh_mirrors/re/react-pdf

你是否在使用React-PDF创建PDF文件时，想要添加专业的签名外观却不知从何下手？本文将为你提供一个完整的React-PDF签名外观示例，帮助你轻松实现各种签名效果。读完本文，你将能够自定义签名的样式、添加文字说明以及调整签名在PDF中的位置。

签名功能实现概述

React-PDF提供了丰富的组件和API，可以帮助我们创建自定义的签名外观。主要涉及以下几个核心模块：

renderer：提供了渲染PDF的核心功能
primitives：包含了创建PDF所需的基本组件
layout：用于处理PDF内容的布局
examples：提供了多个使用示例，包括Next.js和Vite项目

基本签名外观实现

下面是一个基本的签名外观实现示例，使用了React-PDF的基础组件：

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

const Signature = () => (
  <Document>
    <Page size="A4">
      <View style={{ margin: 40 }}>
        <Text style={{ fontSize: 18, marginBottom: 20 }}>签名示例</Text>
        
        {/* 签名外观容器 */}
        <View style={{ 
          border: '1px solid #000', 
          padding: 20, 
          width: 300,
          marginTop: 40
        }}>
          {/* 签名图片 */}
          <Image 
            src="/signature.png" 
            style={{ width: 200, height: 80 }} 
          />
          
          {/* 签名下方文字 */}
          <Text style={{ marginTop: 10, fontSize: 12 }}>张三</Text>
          <Text style={{ fontSize: 10, color: '#666' }}>产品经理</Text>
          <Text style={{ fontSize: 10, color: '#666' }}>2025年10月12日</Text>
        </View>
      </View>
    </Page>
  </Document>
);

export default Signature;

签名外观样式自定义

我们可以通过修改样式属性来自定义签名外观，以下是一些常用的样式调整选项：

样式属性	说明	示例值
border	边框样式	'1px solid #000'
borderRadius	边框圆角	5
padding	内边距	20
backgroundColor	背景颜色	'#f5f5f5'
width	宽度	300
alignItems	内容对齐方式	'center'

带背景色的签名样式示例

<View style={{ 
  border: '1px solid #000', 
  borderRadius: 5,
  padding: 20, 
  width: 300,
  marginTop: 40,
  backgroundColor: '#f9f9f9',
  alignItems: 'center'
}}>
  <Image src="/signature.png" style={{ width: 200, height: 80 }} />
  <Text style={{ marginTop: 10, fontSize: 12, fontWeight: 'bold' }}>李四</Text>
  <Text style={{ fontSize: 10, color: '#666' }}>技术总监</Text>
  <Text style={{ fontSize: 10, color: '#666' }}>2025年10月12日</Text>
</View>

多签名位置布局

在实际应用中，我们可能需要在一个PDF中放置多个签名。以下是一个多签名位置的布局示例：

<View style={{ 
  flexDirection: 'row',
  justifyContent: 'space-between',
  marginTop: 80
}}>
  {/* 左侧签名 */}
  <View style={{ 
    border: '1px solid #000', 
    padding: 15, 
    width: 250
  }}>
    <Image src="/signature1.png" style={{ width: 180, height: 70 }} />
    <Text style={{ marginTop: 8, fontSize: 10 }}>张三</Text>
    <Text style={{ fontSize: 8, color: '#666' }}>产品经理</Text>
  </View>
  
  {/* 右侧签名 */}
  <View style={{ 
    border: '1px solid #000', 
    padding: 15, 
    width: 250
  }}>
    <Image src="/signature2.png" style={{ width: 180, height: 70 }} />
    <Text style={{ marginTop: 8, fontSize: 10 }}>李四</Text>
    <Text style={{ fontSize: 8, color: '#666' }}>技术总监</Text>
  </View>
</View>

动态生成签名信息

我们可以通过JavaScript动态生成签名的相关信息，例如当前日期：

const Signature = () => {
  // 获取当前日期
  const today = new Date();
  const dateString = today.getFullYear() + '年' + (today.getMonth() + 1) + '月' + today.getDate() + '日';
  
  return (
    <View style={{ border: '1px solid #000', padding: 20 }}>
      <Image src="/signature.png" style={{ width: 200, height: 80 }} />
      <Text style={{ marginTop: 10 }}>王五</Text>
      <Text style={{ fontSize: 10, color: '#666' }}>项目经理</Text>
      <Text style={{ fontSize: 10, color: '#666' }}>{dateString}</Text>
    </View>
  );
};