使用 React PDF 设计列表

Question

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

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

它按照我的预期从 App.js 渲染，但是当我打印 PDF 时，它会将列表混合成连续的行。

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

是否可以使用 React PDF 实现我想要的样式？

如果是这样，任何建议将非常受欢迎。

应用程序.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;

显示.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

\n

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

\n

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

\n

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

\n

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

\n

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

\n

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

\n