将内容分为页面。反应

Question

我有一个问题，如果内容超过 980 像素，我需要将其分离。但我做不到。这是一个带有pages的对象数组的例子，以及显示代码

[
    {
        "id": 1,
        "title": "Documents",
        "text": "<p>Things to do after </p>"
    }
]

文本还可能包含 Base 64 格式的图像

const ComponentToPrint = React.forwardRef(({ item, index, pages,  }, ref) => {

    return (
        <div ref={ref} className='mt-[32px] w-[795px] print-page'>
            <div className='bg-white h-[980px] px-[40px] relative py-[8px]'>
                <div className="print-content mb-[54px]">
                    {parse(item.text)}
                </div>
                <div className='bottom-[14px] right-[32px] left-[32px]'>
                    <div className='bg-[#33333380] h-[1px]'> </div>
                    <span className='flex justify-center text-[#6F6E6E] font-hebrew text-[10px] font-[600] mt-[12px] pb-[16px]'>{index + 2}/{pages.length + 2}</span>
                </div>
            </div>
        </div>
    );
});

{pages.map((item, index) => (
    <ComponentToPrint ref={(el) => (componentRef.current[index] = el)} pages={pages}  index={index} item={item} />
))}

我将不胜感激任何帮助

我尝试按字符数划分页面，但它不起作用，因为我有一个文本编辑器，并且文本的尺寸可能更大，缩进或图像更多，但它不起作用

Answer 1

问题在于 HTML 和 CSS 的设计不能很好地处理分页符，尤其是当内容是动态的并且可以具有图像、列表、表格等元素类型时。我的方法是将内容呈现在屏幕外（或者在隐藏的div中），测量其高度，然后根据测量的高度将其拆分为页面。以下是如何执行此操作的示例：

const ComponentToPrint = React.forwardRef(({ item, index, pages, }, ref) => {
    const [chunks, setChunks] = React.useState([]);

    React.useEffect(() => {
        const offScreenDiv = document.createElement('div');
        offScreenDiv.style.position = 'absolute';
        offScreenDiv.style.visibility = 'hidden';
        offScreenDiv.style.height = 'auto';
        offScreenDiv.style.width = '795px';
        offScreenDiv.innerHTML = item.text;
        document.body.appendChild(offScreenDiv);

        const chunks = [];
        let chunk = '';
        for (let i = 0; i < offScreenDiv.childNodes.length; i++) {
            const node = offScreenDiv.childNodes[i];
            chunk += node.outerHTML;
            offScreenDiv.innerHTML = chunk;
            if (offScreenDiv.offsetHeight > 980) {
                chunks.push(chunk);
                chunk = '';
            }
        }
        if (chunk) {
            chunks.push(chunk);
        }

        setChunks(chunks);
        document.body.removeChild(offScreenDiv);
    }, [item.text]);

    return chunks.map((chunk, i) => (
        <div ref={i === 0 ? ref : null} className='mt-[32px] w-[795px] print-page'>
            <div className='bg-white h-[980px] px-[40px] relative py-[8px]'>
                <div className="print-content mb-[54px]">
                    {parse(chunk)}
                </div>
                <div className='bottom-[14px] right-[32px] left-[32px]'>
                    <div className='bg-[#33333380] h-[1px]'> </div>
                    <span className='flex justify-center text-[#6F6E6E] font-hebrew text-[10px] font-[600] mt-[12px] pb-[16px]'>{index * chunks.length + i + 2}/{pages.length * chunks.length + 2}</span>
                </div>
            </div>
        </div>
    ));
});

解决此问题的另一种方法是使用像

react-pdf

这样的库，它可以从 React 组件生成 PDF。该库为您提供了一个可用于创建新页面的组件。希望这有帮助！