使用 react-pdf 生成 table 内容

Question

拜托，几周后我尝试生成一个 pdf 文档并完成了 finsh，但 table 中缺少一些东西。我想让用户能够通过他的页码查看 table 内容。有人可以帮助我吗？谢谢

Answer 1

哦，我找到了。答案是停止组件更新的能力，将 table 内容的不同页面存储在带有标题的数组中。保存此 table 内容，卸载 pdf 草稿，然后将新 table 内容装入最终 pdf

Answer 2

致回答这个问题的人。我设法用下面的代码完成了它。

config为样式设置。 blocks 是 PDF 应包含的不同章节。重要的部分是函数 recalculateIndex，当渲染回调在每个 <Text /> 上执行 getPageNumber 时执行以获取页码。如果我没记错的话，React PDF 运行会渲染两次，第一次是获取总页数，第二次是分配每页的页数。通过设置索引状态，它只会触发新的渲染，并准备好打印新索引。该条件仅确保更新仅在第二个 Text 渲染结束时发生，并且仅在索引实际更改时发生。

const Template = ({ config, blocks }) => {
  const [index, setIndex] = useState([])
  const newIndex = []
  const equals = (a, b) => a.length === b.length && a.every((v, i) => v === b[i]);

  const recalculateIndex = (i, pageNumber, totalPages) => {
    newIndex[i] = newIndex[i] ? newIndex[i] : pageNumber
    if (pageNumber === totalPages && !equals(index, newIndex)) {
      // SET NEW INDEX
      setIndex(newIndex)
    }
  }

  const getPageNumber = (i, pageNumber, totalPages) => {
    recalculateIndex(i, pageNumber, totalPages)
    return (`${pageNumber} / ${totalPages}`)
  }
  return (
    <Document>

      <Page size={config.global.format} style={styles.page}>
          {index && index.map((ch, i) => (<Text key={i}>{ch}</Text>))}
      </Page>

      {blocks.map((block, i) =>
        <Page key={i} size={config.global.format} style={styles.page}>
          <Content content={block} config={config} />
          <Text style={styles.pageNumber} render={({ pageNumber, totalPages }) => getPageNumber(i, pageNumber, totalPages)} fixed />
        </Page>
      )}
    </Document>
  )
}

您可以将其扩展到商店标题等。

感谢 RuthelCrab 消除了我的疑虑并指出了正确的方向。

使用 react-pdf 生成 table 内容

Generating a table of content USING using react-pdf

reactjs

pdf

react-pdf