BlobProvider

Easy and declarative way of getting document's blob data without showing it on screen. Refer to on the fly rendering for more information.

import { BlobProvider, Document, Page, Text } from '@react-pdf/renderer';

const invoice = (
  <Document>
    <Page size="A4">
      <Text>Invoice #42</Text>
    </Page>
  </Document>
);

const App = () => (
  <BlobProvider document={invoice}>
    {({ url, loading }) =>
      loading ? <span>Rendering...</span> : <a href={url}>Open PDF</a>
    }
  </BlobProvider>
);

Valid props

Prop name	Description	Type	Default
document	PDF document implementation	Document	undefined
children	Render prop with blob, url, error and loading state as arguments	Function	undefined

Valid props

On this page