如何用react-pdf实现支持分页换行的双栏页面布局？

上图是MS Word中的双栏页面布局示例。网页端可通过以下代码实现类似效果：

<style>
.two-col {
  column-count: 2;
}
</style>
<div class="two-col">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
</div>

请问如何用react-pdf实现该布局？我尝试过flexbox样式，但仅适用于单页，无法实现连续文本换行或分页。

解决方案：实现支持分页的双栏布局 #

react-pdf没有原生多列布局属性，需通过自定义逻辑或社区组件实现，以下是几种可行方式：

1. 单页双栏布局 #

如果内容在单页内，直接用View组件结合flex布局即可：

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

const TwoColumnDocument = () => (
  <Document>
    <Page size="A4">
      <View style={{ display: 'flex', justifyContent: 'space-between', padding: 20 }}>
        <View style={{ width: '48%' }}>
          <Text>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
          </Text>
        </View>
        <View style={{ width: '48%' }}>
          <Text>
            Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
          </Text>
        </View>
      </View>
    </Page>
  </Document>
);

export default TwoColumnDocument;

2. 跨页连续双栏布局 #

要实现文本跨页连续流动，需手动分割文本并管理分页：

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

// 辅助函数：按单栏容纳量分割文本（需根据字体、字号调整字符数）
const splitTextIntoChunks = (text, chunkSize) => {
  const chunks = [];
  let start = 0;
  while (start < text.length) {
    chunks.push(text.slice(start, start + chunkSize));
    start += chunkSize;
  }
  return chunks;
};

const LongTextTwoColumnDocument = () => {
  const longText = "这里替换成你的长文本内容...";
  const textChunks = splitTextIntoChunks(longText, 500); // 假设每栏容纳500字符
  const pages = [];

  // 生成每页的左右栏内容
  for (let i = 0; i < textChunks.length; i += 2) {
    pages.push({
      left: textChunks[i] || '',
      right: textChunks[i + 1] || ''
    });
  }

  return (
    <Document>
      {pages.map((page, index) => (
        <Page key={index} size="A4">
          <View style={{ display: 'flex', justifyContent: 'space-between', padding: 20, height: '100%' }}>
            <View style={{ width: '48%' }}>
              <Text>{page.left}</Text>
            </View>
            <View style={{ width: '48%' }}>
              <Text>{page.right}</Text>
            </View>
          </View>
        </Page>
      ))}
    </Document>
  );
};

export default LongTextTwoColumnDocument;

3. 社区插件简化实现 #

不想手动处理分页的话，可以用@react-pdf/layout插件，它封装了多列布局和分页逻辑：

import { Document, Page } from '@react-pdf/renderer';
import { Columns } from '@react-pdf/layout';

const PluginTwoColumnDocument = () => (
  <Document>
    <Page size="A4">
      <Columns count={2} gap={20} padding={20}>
        <Text>
          你的长文本内容...
        </Text>
      </Columns>
    </Page>
  </Document>
);

export default PluginTwoColumnDocument;

使用前需安装依赖：npm install @react-pdf/layout

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