将带有样式的React自定义组件转换为PDF并下载文件

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

const MyPDFComponent = () => {
  return (
    <PDFViewer>
      <Document>
        <Page>
          <View style={{ padding: 10 }}>
            <Text style={{ fontSize: 20, marginBottom: 10 }}>Hello, World!</Text>
            <Text>This is a sample PDF generated from a React component.</Text>
          </View>
        </Page>
      </Document>
    </PDFViewer>
  );
};

const DownloadPDFButton = () => {
  const handleDownload = () => {
    const blobProvider = (
      <BlobProvider document={<MyPDFComponent />}>
        {({ blob, url, loading, error }) => {
          if (loading) {
            return <div>Loading PDF...</div>;
          }
          if (error) {
            return <div>Error generating PDF!</div>;
          }
          return (
            <a href={url} download="my-pdf.pdf">
              Download PDF
            </a>
          );
        }}
      </BlobProvider>
    );
    const { blob, url } = blobProvider.props;
    const link = document.createElement('a');
    link.href = url;
    link.download = 'my-pdf.pdf';
    link.click();
  };

  return <button onClick={handleDownload}>Download PDF</button>;
};

const App = () => {
  return (
    <div>
      <MyPDFComponent />
      <DownloadPDFButton />
    </div>
  );
};

export default App;