React-Pdf中如何实现HTML标签数据的两列布局

嘿，我完全懂你遇到的困扰——react-pdf的样式机制和普通网页CSS差异不小，直接用columns: '2 auto'这种网页CSS写法确实不生效。我给你几个实用的解决方案，你可以挨个试试：

方案一：使用react-pdf原生支持的列布局属性 #

react-pdf的View组件支持PDF专用的列布局属性，不用网页CSS的columns简写，而是用columnCount、columnGap这些驼峰式属性。你只需要把代码里的样式改成这样：

import { Text, View, Image } from '@react-pdf/renderer';
import Html from 'react-pdf-html';

const ShowPdf = props => {
  const data = "<p><b>Lorem Ipsum</b> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>";

  return (
    <View
      style={{
        columnCount: 2, // 指定列数
        columnGap: 16, // 可选，设置列之间的间距，单位是pt
        // 如果需要固定列宽，可以加上columnWidth: 150
      }}
    >
      <Html>{data}</Html>
    </View>
  );
};

export default ShowPdf;

这个方案是最直接的，react-pdf的View会自动把内部内容分成两列排版，和你想要的效果一致。

方案二：自定义react-pdf-html的渲染节点 #

如果方案一没生效，可能是react-pdf-html组件内部生成的元素覆盖了外层View的样式。这时候可以自定义HTML标签的渲染逻辑，给对应的文本容器加上列布局：

<Html
  renderers={{
    // 针对p标签自定义渲染，添加列布局样式
    p: ({ children, style }) => (
      <Text style={{ ...style, columnCount: 2, columnGap: 16 }}>
        {children}
      </Text>
    ),
  }}
>
  {data}
</Html>

这种方式适合HTML结构比较简单的场景，你可以根据实际的HTML标签（比如div、section等）调整对应的渲染器。

方案三：手动拆分内容并排布局 #

如果上面两种都不符合你的需求，还可以手动把HTML内容拆分成两部分，用flex布局放在并排的View里：

// 先把data拆分成前后两部分，比如用字符串截取或者DOM解析分割
const firstHalfData = "<p><b>Lorem Ipsum</b> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>";
const secondHalfData = "<p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>";

return (
  <View style={{ flexDirection: 'row', gap: 16 }}>
    <View style={{ flex: 1 }}>
      <Html>{firstHalfData}</Html>
    </View>
    <View style={{ flex: 1 }}>
      <Html>{secondHalfData}</Html>
    </View>
  </View>
);

这个方案需要你自己处理内容拆分，适合内容逻辑上可以明确分成两部分的场景。

优先试试方案一，这是react-pdf官方推荐的列布局方式，大概率能解决你的问题~

备注：内容来源于stack exchange，提问作者Quinn