使用 React PDF 样式化列表

Question

我创建了一个小型 React 应用程序来测试 React PDF。

单击下载 link 后，它会按预期创建 pdf。我的问题是我创建了一个 Display 组件，它由一个无序列表和三个列表项组成，但它没有正确显示列表。

它按照我的预期从 App.js 呈现，但是当我打印 PDF 时，它会将列表混成一条连续线。

我尝试了不同的样式，放置组件和其他一些方法都无济于事。

是否可以使用 React PDF 设置我希望的样式？

如果有任何建议，我们将非常欢迎。

App.js

import './App.css';
import { MyDocument } from './pdf';
import { PDFDownloadLink } from '@react-pdf/renderer';
import { Display } from './display';




function App() {
  return (
    <div className="App">
      {<PDFDownloadLink document={<MyDocument />} fileName="somename.pdf">
        {({ blob, url, loading, error }) =>
          loading ? 'Loading document...' : 'Download now!'
        }
      </PDFDownloadLink>}
      <Display />
    </div>
  );
}

export default App;

Display.js

export function Display() {
    return (
        <ul>
            <li>hihihihihihihi</li>
            <br/>
            <li>11111111111111</li>
            <li>22222222222222</li>
        </ul>
    )
}

pdf.js

import React from 'react';
import { Page, Text, View, Document, StyleSheet } from '@react-pdf/renderer';
import {Display} from './display';

import  './App.css';

// Create styles
const styles = StyleSheet.create({
  page: {
    flexDirection: 'column',
    backgroundColor: '#E4E4E4'
  },
  section: {
    margin: 10,
    padding: 10,
    flexGrow: 1
  },
  text: {
    color: 'red',
    display: 'flex',
    flexDirection: 'column',
    width: '100%'
  }
});

// Create Document Component
export const MyDocument = () => (
  <Document>
    <Page size="A4" style={styles.page}>
      <View style={styles.section}>
        <Text>Section #1</Text>
        <Text style={styles.text}><Display /></Text>
        <Text>Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi magnam unde excepturi labore id nam natus animi obcaecati eaque aspernatur, assumenda pariatur suscipit perferendis porro commodi, earum ducimus? Odit, quo.</Text>
      </View>
      <View style={styles.section}>
        <Text>Section #2</Text>
        <Text>Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi magnam unde excepturi labore id nam natus animi obcaecati eaque aspernatur, assumenda pariatur suscipit perferendis porro commodi, earum ducimus? Odit, quo.</Text>
      </View>
    </Page>
  </Document>
);

Answer 1

我能够解决这个确切的问题，多亏了这个讨论区的一些人的帮助：https://github.com/diegomura/react-pdf/issues/888#issuecomment-769040361

对于您的情况，您只需将 Display 组件修改为如下所示：

export function Display() {
    return (
        <View style={{flexDirection: "column", width: 400}}>
          <View style={{ flexDirection: "row", marginBottom: 4 }}>
            <Text style={{ marginHorizontal: 8 }}>•</Text>
            <Text>hihihihihihihi</Text>
          </View>
          <View style={{ flexDirection: "row", marginBottom: 4 }}>
            <Text style={{ marginHorizontal: 8 }}>•</Text>
            <Text>11111111111111</Text>
          </View>
          <View style={{ flexDirection: "row", marginBottom: 4 }}>
            <Text style={{ marginHorizontal: 8 }}>•</Text>
            <Text>22222222222222</Text>
          </View>
        </View>
    )
}

但是，如果您不是手动创建列表，而是只是从某个动态数据源粘贴它...您将需要解析 html 字符串，以便每个 ul 和 li 看起来就像上面的代码片段（

我不得不使用这个模块来解析我的 html：react-html-parser

然后像这样解析我的字符串：

const parseContent = (content) => {
    const parsedHtml = ReactHtmlParser(content);
    return parsedHtml.map((el) => {
      const type = el?.type;
      if (type === "ul") {
        return el.props.children.map((kid, i) => {
          return (
            <View
              style={{ flexDirection: "row", fontSize: regularSize, fontWeight: boldWeight, marginBottom: 4 }}
              key={i}
            >
              <Text style={{ marginHorizontal: 8 }}>•</Text>
              <Text>
                {kid.props.children}
              </Text>
            </View>
          );
        });
      } else {
        return parsedHtml;
      }
    });
  };

使用 React PDF 样式化列表

Styling List with React PDF

javascript

reactjs

pdf-generation

react-pdf