如何用React-pdf绘制毫米级精度的线条与矩形？

测试代码 #

import React from 'react';
import {
  Page,
  Document,
  StyleSheet,
  Svg,
  Line,
  Path,
  Rect,
  Text,
} from '@react-pdf/renderer';

// Create styles
const styles = StyleSheet.create({
  page: {
    padding: 20,
  },
});

// Create Document Component
const MyDocument = () => (
    <Document>
      <Page size="A4" style={styles.page}>
        <Text>SVG Rect</Text>
        <Svg width={100} height={50}>
          <Rect x={0} y={0} width={100} height={50} strokeWidth={1} stroke={'#000'} />
        </Svg>
        <Text style={{marginTop: 20}}>SVG Path</Text>
        <Svg width={100} height={1}>
          <Path
              d="M 0 0 L 100 0"
              strokeWidth={1}
              stroke="black" />
        </Svg>
        <Text style={{marginTop: 20}}>SVG Line</Text>
        <Svg width={100} height={1}>
          <Line x1={0} x2={100} y1={0} y2={0} strokeWidth={1} stroke={'#000'} />
        </Svg>
      </Page>
    </Document>
);

export default MyDocument;

问题描述 #

将上述代码生成的PDF打印到A4纸后，代码中设置的数值100对应实际打印尺寸约350mm，与预期差距极大。需求是绘制1毫米粗细、100毫米宽度的线条和矩形，需要实现精确的毫米级尺寸控制。

解决方案 #

React-PDF 默认使用**点（pt）**作为单位，而非毫米，因此需要通过单位换算实现精确的毫米尺寸：

单位换算关系 #

• 1英寸 = 72pt = 25.4mm
• 1mm ≈ 2.8346pt（计算方式：72 / 25.4）
• 1pt ≈ 0.3528mm（计算方式：25.4 / 72）

实现步骤 #

1. 添加毫米转pt的工具函数：

const mmToPt = (mm) => mm * (72 / 25.4);

2. 修改代码，用换算后的数值替代原硬编码值：

import React from 'react';
import {
  Page,
  Document,
  StyleSheet,
  Svg,
  Line,
  Path,
  Rect,
  Text,
} from '@react-pdf/renderer';

// 毫米转pt工具函数
const mmToPt = (mm) => mm * (72 / 25.4);

// Create styles
const styles = StyleSheet.create({
  page: {
    padding: mmToPt(20), // 可选：将padding也转为毫米单位
  },
});

// Create Document Component
const MyDocument = () => (
    <Document>
      <Page size="A4" style={styles.page}>
        <Text>SVG Rect</Text>
        <Svg width={mmToPt(100)} height={mmToPt(50)}>
          <Rect 
            x={0} 
            y={0} 
            width={mmToPt(100)} 
            height={mmToPt(50)} 
            strokeWidth={mmToPt(1)} 
            stroke={'#000'} 
          />
        </Svg>
        <Text style={{marginTop: mmToPt(20)}}>SVG Path</Text>
        <Svg width={mmToPt(100)} height={mmToPt(1)}>
          <Path
              d={`M 0 0 L ${mmToPt(100)} 0`}
              strokeWidth={mmToPt(1)}
              stroke="black" 
          />
        </Svg>
        <Text style={{marginTop: mmToPt(20)}}>SVG Line</Text>
        <Svg width={mmToPt(100)} height={mmToPt(1)}>
          <Line 
            x1={0} 
            x2={mmToPt(100)} 
            y1={0} 
            y2={0} 
            strokeWidth={mmToPt(1)} 
            stroke={'#000'} 
          />
        </Svg>
      </Page>
    </Document>
);

export default MyDocument;

注意事项 #

• 对于<Path>组件，其d属性中的坐标需直接换算为pt单位，确保路径长度符合毫米要求。
• 打印PDF时，需确保打印机设置为实际尺寸（无缩放），避免系统自动缩放导致尺寸偏差。

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