尝试基于参数创建动态反应 pdf 报告生成器

Question

代码如下： codesandbox.io/s/muddy-monad-zqwt73?file=/src/App.js

目前，不确定为什么，页面没有进入文档，呈现的是一个空文档。

我不确定为什么。对我来说，这意味着我已经创建了页面元素，将它们放在一个列表中，我应该能够映射所有页面并将其呈现到文档中。我不确定为什么它不起作用。

编辑

根据建议，我将代码更改为如下所示：

const styles = StyleSheet.create({
  header: {
    flexDirection: 'row',
    textAlign: 'left',
    fontSize: '30px',
    fontFamily: 'SF Pro Text',
    marginBottom: '25px',
    marginTop: '30px',
    marginLeft: '30px',
    justifyContent: 'space-evenly'
  }
})


class DavidPDF extends Component {
  constructor(name, params) {
    super(name, params);
    this.name = name;
    this.params = params;
    this.content = [];
  }

  buildPages() {
    console.log("building")
    for (let i = 0; i < this.params.length; i += 1) {
      console.log(i)
      let jsxPage = this.buildPage(this.params[i])
      this.content.push(jsxPage)
    }
  }

  buildPage(pageParams) {
    console.log("building indv page")
    const pageName = pageParams.pageName;
    const viewParams = pageParams.views;
    const pageViewParams = [];

    for (let i = 0; i < viewParams.length; i += 1) {
      let view = this.buildView(viewParams[i]);
      pageViewParams.push(view);
    }

    return (
      <Page>
        <View>{pageName}</View>
      </Page>
    )
  }

  buildView(viewParams) {
    if (viewParams.viewType == "headerText") {
      const text = viewParams.text;
      return (
        <View>
          <Text style={styles.header}>
            {text}
          </Text>
        </View>
      )
    }
  }
  render() {
    console.log("rendering")
    this.buildPages(this.params)
    console.log(this.content)
    return (
      <Document>
        {this.content}
      </Document>
    )
  }
}

function Test() {

  const pagesInfo = [
    {
      pageName: "Xtina's Page",
      views: [
        {
          viewType: "headerText",
          text: "Xtina's page"
        }
      ]
    }
  ]

  let wtf = ["hi2", "hi1", "hi3"]
  const wtfItems = wtf.map((item) => <div>{item}</div>)

  return (
    <div id="first">
      {wtf.map((item) => <div>{item}</div>)}
      <PDFViewer>
        <DavidPDF name="hello" params={pagesInfo} />
      </PDFViewer>
    </div>
  )
}

export default Test;

--- 编辑 ----

万岁！该错误已修复。现在我们有一个新的 - 页面不会进入。

Answer 1

有几个问题，但如果你能把它扔到 codesandbox 中，我们很乐意提供帮助。您正在不必要地遍历地图，而不是将键分配给映射元素，但您看到的错误很可能与以下内容有关：

const pdf = new DavidPDF("hello", pagesInfo)

这是一个 class 的实例化，它是一个对象，所以错误是有道理的。

为什么不把它添加到渲染中：

<DavidPdf name="hello" params={pageInfp} /> 或者道具是什么？

此外，您可以在 componentDidMount 上运行 buildPages，而不必担心从父级调用它。

Answer 2

我没有以这种方式处理它，效果不佳，而是转而生成一个包含我所有感兴趣的信息的页面并添加打印 css 以便用户打印（或我打印发送给用户），数据格式很好，页面断点仅使用 css 和 @media print。我会向其他人推荐这个策略，如果有人愿意，我很乐意进一步阐述！

尝试基于参数创建动态反应 pdf 报告生成器

Attempting to create a dynamic react pdf report generator based on params

javascript

reactjs

react-pdf