如何使用ReactJS在浏览器中链接下载为PDF格式

npm install @react-pdf/renderer file-saver

import React from 'react';
import { Document, Page, pdfjs } from 'react-pdf';
import { saveAs } from 'file-saver';

pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;

const MyDocument = ({ content }) => (
  <Document>
    <Page pageNumber={1}>
      <div dangerouslySetInnerHTML={{ __html: content }} />
    </Page>
  </Document>
);

const DownloadButton = ({ content }) => {
  const [numPages, setNumPages] = React.useState(null);

  const onDocumentLoadSuccess = ({ numPages }) => {
    setNumPages(numPages);
  };

  const handleDownload = () => {
    const pdf = document.createElement('a');
    pdf.href = '/api/generate-pdf'; // 假设后端提供了一个生成 PDF 的 API
    pdf.download = 'document.pdf';
    document.body.appendChild(pdf);
    pdf.click();
    document.body.removeChild(pdf);
  };

  return (
    <div>
      <Document
        file="/api/generate-pdf"
        onLoadSuccess={onDocumentLoadSuccess}
      >
        <Page pageNumber={1} />
      </Document>
      <button onClick={handleDownload}>下载 PDF</button>
    </div>
  );
};

const App = () => {
  const content = '<h1>Hello World</h1><p>This is a sample content.</p>';

  return (
    <div>
      <MyDocument content={content} />
      <DownloadButton content={content} />
    </div>
  );
};

export default App;