Convert blob to pdf file

Question

Using react-pdf's BlobProvider, I'm trying to store the file to state. Here's what I tried:

 MyDocument = () => {
        return (
            <Document>
                <Page size="A4" style={stylez.page}>
                    <View style={stylez.section}>
                        <Text>Section TesterYo</Text>
                    </View>
                    <View style={stylez.section}>
                        <Text>Section #2</Text>
                    </View>
                </Page>
            </Document>
        )
    }

 LoadPdf = () => {
        let myPdf = <BlobProvider document={this.MyDocument}/>
        var file = new File([myPdf], 'filename.pdf', { type: 'application/pdf', lastModified:Date.now()});


        this.setState({ files: [...this.state.files, file] }, () => console.log(this.state))
 }

When downloaded this provides a damaged pdf.

Answer 1

You're not getting the blob back correctly like so in the documentation

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

const MyDoc = (
  <Document>
    <Page>
      // My document data
    </Page>
  </Document>
);

const App = () => (
  <div>
    <BlobProvider document={MyDoc}>
      {({ blob, url, loading, error }) => {
        // Do whatever you need with blob here
        return <div>There's something going on on the fly</div>
      }}
    </BlobProvider>
  </div>
);

or

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

const MyDoc = (
  <Document>
    <Page>
      // My document data
    </Page>
  </Document>
);

const blob = pdf(MyDoc).toBlob();