如何在 React 中使用 jsPDF 自定义 HTML 和 CSS 解决这个问题？

Question

自动分页不起作用或者我不明白主要问题

ReportTemplate.jsx

const ReportTemplate = () => {
    const styles = {
        page: {
            marginLeft: '2rem',
            marginRight: '2rem',
            marginTop:'2rem',
            marginBottom:'2rem',
            width: '210mm',
            height: '100%',
            fontSize: '12px',
            'page-break-before': 'auto',
            'page-break-after': 'auto',
        },
        page2: {
            fontSize: '12px',
        },

        columnLayout: {
            display: 'flex',
            justifyContent: 'space-between',
            margin: '3rem 0 5rem 0',
            gap: '2rem',
            width: '105mm',
            height: '100%',
        },

        column: {
            display: 'flex',
            flexDirection: 'column',
        },

        spacer2: {
            height: '2rem',
        },

        fullWidth: {
            width: '40%',
            height: '40%'
        },
        halfWidth: {
            width: '100%',
            height: '100%'
        },

        marginb0: {
            marginBottom: '1rem',
        },
    };
    return (
        <>
            <div style={styles.page}>
                <div>
                    <span style={styles.introText}>
                        Report Heading That Spans More Than Just One Line
                    </span>
                </div>

                <div style={styles.spacer2}></div>

                <img style={styles.fullWidth} src="photo-2.png" alt="IMG1"/>
            </div>

            <div style={styles.page}>
                <div>
                    <span style={styles.introText}>
                        Report Heading That Spans More Than Just One Line
                    </span>
                </div>

                <div style={styles.columnLayout}>
                    <div style={styles.column}>
                        <img style={styles.halfWidth} src="photo-2.png" alt="IMG2"/>
                        <span style={styles.marginb0}>Subtitle One</span>
                        <p style={styles.page2}>
                            Lorem ipsum dolor sit amet, consectetur adipiscing
                            elit, sed do eiusmod tempor incididunt ut labore et
                            dolore magna aliqua.
                        </p>
                    </div>

                    <div style={styles.column}>
                        <img style={styles.halfWidth} src="photo-1.png" alt="IMG3"/>
                        <span style={styles.marginb0}>Subtitle Two</span>
                        <p style={styles.page2}>
                            Lorem ipsum dolor sit amet, consectetur adipiscing
                            elit, sed do eiusmod tempor incididunt ut labore et
                            dolore magna aliqua.
                        </p>
                    </div>
                </div>

                <div style={styles.columnLayout}>
                    <div style={styles.column}>
                        <img style={styles.halfWidth} src="photo-3.png" alt="IMG4"/>
                        <span style={styles.marginb0}>Subtitle One</span>
                        <p style={styles.page2}>
                            Lorem ipsum dolor sit amet, consectetur adipiscing
                            elit, sed do eiusmod tempor incididunt ut labore et
                            dolore magna aliqua.
                        </p>
                    </div>

                    <div style={styles.column}>
                        <img style={styles.halfWidth} src="photo-4.png" alt="IMG6"/>
                        <span style={styles.marginb0}>Subtitle Two</span>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing
                            elit, sed do eiusmod tempor incididunt ut labore et
                            dolore magna aliqua.
                        </p>
                    </div>
                </div>
            </div>
            <div style={styles.page}>
                <div>
                    <span style={styles.introText}>
                        Report Heading That Spans More Than Just One Line
                    </span>
                </div>

                <div style={styles.spacer2}></div>

                <img style={styles.fullWidth} src="photo-2.png" alt="IMG1"/>
            </div>

            <div style={styles.page}>
                <div>
                    <span style={styles.introText}>
                        Report Heading That Spans More Than Just One Line
                    </span>
                </div>

                <div style={styles.columnLayout}>
                    <div style={styles.column}>
                        <img style={styles.halfWidth} src="photo-2.png" alt="IMG2"/>
                        <span style={styles.marginb0}>Subtitle One</span>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing
                            elit, sed do eiusmod tempor incididunt ut labore et
                            dolore magna aliqua.
                        </p>
                    </div>

                    <div style={styles.column}>
                        <img style={styles.halfWidth} src="photo-1.png" alt="IMG3"/>
                        <span style={styles.marginb0}>Subtitle Two</span>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing
                            elit, sed do eiusmod tempor incididunt ut labore et
                            dolore magna aliqua.
                        </p>
                    </div>
                </div>

                <div style={styles.columnLayout}>
                    <div style={styles.column}>
                        <img style={styles.halfWidth} src="photo-3.png" alt="IMG4"/>
                        <span style={styles.marginb0}>Subtitle One</span>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing
                            elit, sed do eiusmod tempor incididunt ut labore et
                            dolore magna aliqua.
                        </p>
                    </div>

                    <div style={styles.column}>
                        <img style={styles.halfWidth} src="photo-4.png" alt="IMG6"/>
                        <span style={styles.marginb0}>Subtitle Two</span>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing
                            elit, sed do eiusmod tempor incididunt ut labore et
                            dolore magna aliqua.
                        </p>
                    </div>
                </div>
            </div>
        </>
    );
};

export default ReportTemplate;

生成PDF.jsx

import React, { useRef } from 'react'
import ReportTemplate from './ReportTemplate'
import jsPDF from 'jspdf';

function GeneratePDF() {
    const reportTemplateRef = useRef(null);

    const handleGeneratePdf = () => {
        const doc = new jsPDF({
            format: "a4",
            unit: "px",
            orientation:'p'
        });
        doc.setFontSize(10)
        doc.html(reportTemplateRef.current, {
            async callback(doc) {
                await window.open(URL.createObjectURL(doc.output("blob")));
            },
        });
    };
    return (
        <div>
            <button className="button" onClick={handleGeneratePdf}>
                Generate PDF
            </button>
            <div ref={reportTemplateRef}>
                <ReportTemplate />
            </div>
        </div>
    )
}

export default GeneratePDF

我的期望 - 我有一个很长的文本，我想在一个单独的 div 中打印该文本，并在 pdf 中自动分页，每页的所有边距，如果可能的话，在每一页上的 pdf 页面边框。