代码之家 › 专栏 › 技术社区 › g_b

如何在8.5x11的纸张上显示看起来像它的数据

reactjs javascript

g_b · 技术社区 · 4 年前

我试图显示一个表格数据,它应该看起来像8.5x11纸张上的数据。我所做的是创建一个8.5x11的div,并添加边框和白色背景,使其看起来像一张纸。然后我需要确定我需要多少页面,这样我才能渲染这些div。我可以得到元素的总高度,这样如果内容已经达到单个页面的限制,我就可以以此为基础,但我的问题是,我不知道如何呈现第一个div之后的下一个div。

我只能在渲染过程中获取高度:

<div>
{
    <div className="content">
        <table id="main-tbl">
            <thead>
                <tr>
                    <th>Student No.</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                </tr>
            </thead>
            <tbody>
                {
                    this.state.registeredStudents.map((stud) => {
                        currentTotalHeight += $("#main-tbl")[0].offsetHeight;
                        console.log(currentTotalHeight);
                        return (
                            currentTotalHeight < this.contentHeightLimit &&
                            <tr key={stud.id} data-id={stud.id}>
                                <td>{stud.studentNo}</td>
                                <td>{stud.firstName}</td>
                                <td>{stud.lastName}</td>
                            </tr>
                        )
                    })
                }
            </tbody>
        </table>
    </div>
}
</div>

我计划在每次添加元素时检查表的高度,一旦达到预期的页面高度,就再次启动新的div,但这是我的问题,我不知道如何渲染下一个div。我该如何构造它,以便一旦达到高度限制,就再次渲染同一个div?我想做这样的事情:

<div>
{
    this.state.numOfPages.map((index) => {
    return (
        <div className="content">
            <table id="main-tbl">
                <thead>
                    <tr>
                        <th>Student No.</th>
                        <th>First Name</th>
                        <th>Last Name</th>
                    </tr>
                </thead>
                <tbody>
                    {
                        this.state.registeredStudents.map((stud) => {
                            currentTotalHeight += $("#main-tbl")[0].offsetHeight;
                            console.log(currentTotalHeight);
                            return (
                                currentTotalHeight < this.contentHeightLimit &&
                                <tr key={stud.id} data-id={stud.id}>
                                    <td>{stud.studentNo}</td>
                                    <td>{stud.firstName}</td>
                                    <td>{stud.lastName}</td>
                                </tr>
                            )
                        })
                    }
                </tbody>
            </table>
        </div>
    })
}
</div>

但我不知道如何获得页数,直到所有内容都呈现出来,否则就太晚了。

0 回复 | 直到 4 年前

b3hr4d 4 年前

这是最简单的方法,通过将项目数组拆分为数组中的一个数组,然后将它们循环到表中。

如果你想要更多的逻辑来计算高度,你可以创建一个函数来获取 itemOnPage 然后用它来拆分项目。

const App = () => {
  const items = Array.from(Array(70)).map((_, v) => ({no:v,firstName:"name"+v,lastName:"last"+v}))
  const itemOnPage = 24;
  const arrayOfArrays = [];
  for (let i=0; i < items.length; i+=itemOnPage) {
       arrayOfArrays.push(items.slice(i,i+itemOnPage));
  }
  return(
    <div style={styles.root}>
     {arrayOfArrays.map((items, v) => (
      <div style={styles.paper}>
        <p style={styles.pageNum}>{v+1}</p>
        <table key={v}>
          <thead>
            <tr>
              <th>Student No.</th>
              <th>First Name</th>
              <th>Last Name</th>
            </tr>
          </thead>
          <tbody>
            {items.map(row => (
              <tr key={row.no} data-id={row.no}>
                  <td>{row.no}</td>
                  <td>{row.firstName}</td>
                  <td>{row.lastName}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
     ))}
    </div>
    )
};
const styles={
  root:{
    backgroundColor: "grey",
    height:1800,
    display:"flex",
    flexDirection:"column",
  },
  paper:{
    position:"relative",
    margin:10,
    padding: 5,
    border:"1px solid",
    width: "425px",
    height: "550px",
    backgroundColor: "white"

  },
    pageNum :{
    position:"absolute",
    bottom:0,
    right:20
  },
}

ReactDOM.render(<App />, document.getElementById("react"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react"></div>