当前位置：文江博客话题详情

如何在特定高度动态添加空格、分隔符或 div？

发布于 2025-01-09 21:18:01 字数 167 浏览 1 评论 0原文

所以基本上我想从 React 应用程序打印一个 pdf 页面，其中包含多个组件。组件的数量从 4 个增加到 12 个，组件的高度也会根据商店的内容而变化。

我需要每隔 900 像素（a4 页面的大小）添加一个空格，这样所有组件都不会在页面之间分割。或者根据渲染的组件数量将孔页面分割成 900 像素的部分。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

靑春怀旧 2025-01-16 21:18:01

这不是一个可以用代码片段来回答的问题。我将解释我将如何解决这个问题。

打印事件之后的步骤（单击按钮或自动...）

我将获取每个组件的当前高度（正如您提到的 4 到 12 个组件）

   const element = document.getElementById('element');
   element.offsetHeight // height

我将创建占位符组件（div），它将用于填充要打印的组件之间的垂直间隙。

   const Placeholder = ({height}) => (
      <div style={{height: `${height}px` }}>  </div>
   )

我将开始循环所有组件，直到它们适合 900 像素。当块达到 900px 时，我将用占位符组件填充间隙。这将迫使其余组件移至下一页。
例如，我们说：

Component 1 is 300px
Component 2 is 300px
Component 3 is 700px
Component 4 is 300px

loop {
  // first page
  <Component1 />
  <Component2 />
  <Placeholder height={300} />
  // second page
  <Component3 />
  <Placeholder height={200} />
  <Component4 />
  <Placeholder height={600} />
}

This is not a question can be answered with code snippet. I will explain how i would tackle with this problem.

Steps right after the the print event (on button click or automated...)

I would get each components current height (as you mentioned 4 up to 12 components)

   const element = document.getElementById('element');
   element.offsetHeight // height

I would create placeholder component (div), which would be used to fill the gap vertically between components to be printed.

   const Placeholder = ({height}) => (
      <div style={{height: `${height}px` }}>  </div>
   )

I would start looping all the components until they can fit into 900px. When the chunk reaches the 900px i would fill the gap with placeholder component. That would force rest of the components to move to next page.
E.g. Let's say:

Component 1 is 300px
Component 2 is 300px
Component 3 is 700px
Component 4 is 300px

loop {
  // first page
  <Component1 />
  <Component2 />
  <Placeholder height={300} />
  // second page
  <Component3 />
  <Placeholder height={200} />
  <Component4 />
  <Placeholder height={600} />
}

回复收藏 0 原文

~没有更多了~