javascript - 将 blob 转换为 pdf 文件

Question

使用 react-pdf 的 BlobProvider，我试图将文件存储到状态。这是我尝试过的：

 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))
 }

下载时，这会提供损坏的 pdf。

Answer 1

您没有像文档中那样正确地恢复 blob

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>
);

或者

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

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

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