React-pdf: PDFDownloadLink Type Mismatch

Created on 25 Feb 2020  路  3Comments  路  Source: diegomura/react-pdf

Hey guys,

I am trying to implement the on the fly rendering with the PDFDownloadLink but I always get a type mismatch error.

Here is my code:

[import React from 'react';
import { PDFDownloadLink, Document, Page } from '@react-pdf/renderer'

const MyDoc = () => (
    <Document>
      <Page>
          Hallo das ist ein Twst
      </Page>
    </Document>
)

const App = () => (
    <div>
      <PDFDownloadLink document={<MyDoc />} fileName="somename.pdf">
        {({ blob, url, loading, error }) => (loading ? 'Loading document...' : 'Download now!')}
      </PDFDownloadLink>
    </div>
)


export default App;](url)

Does anybody of you have an idea what I am doing wrong?

Most helpful comment

Hi @emt1803, I just ran into something similar. You may need to import and then wrap a text tag around <Text>allo das ist ein Twst</Text> and nest that into a <View>Tag like so:

const MyDoc = () => (
    <Document>
      <Page>
         <View>
            <Text>
               Hallo das ist ein Twst
            </Text>
        </View>
      </Page>
    </Document>
)

All 3 comments

Hi @emt1803, I just ran into something similar. You may need to import and then wrap a text tag around <Text>allo das ist ein Twst</Text> and nest that into a <View>Tag like so:

const MyDoc = () => (
    <Document>
      <Page>
         <View>
            <Text>
               Hallo das ist ein Twst
            </Text>
        </View>
      </Page>
    </Document>
)

Hi,

when i use PDFDownloadLink , PDFViewer i am getting getCurrentStack is undefined, any suggestion is appreciated

const App = () => (


} fileName="somename.pdf">
{({ blob, url, loading, error }) => (loading ? 'Loading document...' : 'Download now!')}


)

i do have "TypeError: Cannot set property 'getCurrentStack' of undefined" issue

Hi @emt1803, I just ran into something similar. You may need to import and then wrap a text tag around <Text>allo das ist ein Twst</Text> and nest that into a <View>Tag like so:

const MyDoc = () => (
    <Document>
      <Page>
         <View>
            <Text>
               Hallo das ist ein Twst
            </Text>
        </View>
      </Page>
    </Document>
)

Amazing!
I just have the same issue and when I put the component around into te componente the code run like a charm. Thanks.

Was this page helpful?
0 / 5 - 0 ratings