Fill PDF with dynamic data from a form

I have a form and I wish to have a print button that renders the data that is on the form into a PDF. If I make a change to a field, and click the print button again, I want that new data to be on the PDF.

So far, I have been able to use a BlobProvider component to create the PDF but getting dynamic data from the form to the PDF is proving to be quite difficult and unusual.

After many different approaches, this is the closest I have come…

<BlobProvider document={this.OrderPDF()}>
     {({ url }) => (
          <a href={url} target="_blank">Print</a>
     )}
</BlobProvider>

OrderPDF = () => {

      var { form } = this.props;
      var note = form.getFieldValue('note');

      return (

          <Document title="Order">

            <Page size="A4" style={styles.page}>

              <View style={styles.section}>
                {Header}
              </View>

              <View style={styles.section}>
                <Text>{note}</Text>

              </View>

              <View style={styles.section}>
                <Text style={styles.body}>Section #2</Text>
              </View>

              <View style={[styles.section, { bottom: 1 }]}>
                {Footer}
              </View>

            </Page>

          </Document>

      )

  }

Here’s the unusual part…

When I first load the page, whether there is data in the note field or not, the first time I click on the Print button, the PDF shows nothing for the note. Then if I make any change to the note field (ie. clear some characters), then print the PDF again, it shows the correct data, but only for the first change I made.

So for example…

1. Load page with note field as: Hello
2. Click print: Nothing rendered for {note} on the PDF
3. Change note field to Hell
4. Click print: Hell is displayed on PDF
5. Change note field back to Hello
6. Click print: Hell is displayed on PDF

At first I was thinking that the reason is because the PDF is only being rendered once upon load, so that’s why I moved it into a function to try to get it to render new values each time I click Print, but it seems to be rendering only twice…once upon load, then a second time when I click the print button, and then every time after that it always just shows the PDF from the second time it rendered.

Why is this happening and is there anyway I can retrieve the new values each time I click Print?

[bkoltai]

I recently had that error and there is a fix pending release for it. You may be getting it when testing is an empty string. Try handling the empty string case explicitly in your Text component and render null instead when empty

<Text>{texting === “” ? null : testing}</Text>

[diegomura]

Fix is going to be published soon 😊