使用 React PDF 的样式列表

问题描述

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

当点击下载链接时，它会按预期创建 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,quo.</Text>
      </View>
    </Page>
  </Document>
);

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）