I would like to generate report.pdf which includes quite a lot of text and potentially images and other pdfs.

I managed to load a pdf in my browser with react and to create a pdf with text on the fly, but for the love of god I can’t manage to merge these two things into a user generated pdf.

"use client";
import {
  PDFDownloadLink,
  Text,
  View,
  StyleSheet,
  Page,
} from "@react-pdf/renderer";
import React, { useState } from "react";
import { Document, Page as PageR, pdfjs } from "react-pdf";
import "react-pdf/dist/esm/Page/AnnotationLayer.css";
import "react-pdf/dist/esm/Page/TextLayer.css";

// Import worker
pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.js`;

// Create styles
const styles = StyleSheet.create({
  page: {
    padding: "12px",
    height: "100px",
  },
  section: {
    backgroundColor: "#E4E4E4",
    display: "flex",
    flexDirection: "column",
    gap: "12px",
    margin: 10,
    padding: 10,
    flexGrow: 1,
  },
  logo: {
    width: 70,
    height: 70,
    marginTop: "15px",
  },
});

function PDFViewer({ file }) {
  const [numPages, setNumPages] = useState(null);

  function onDocumentLoadSuccess({ numPages }) {
    setNumPages(numPages);
  }

  return (
    <div>
      <Document file={"/Susca.pdf"} onLoadSuccess={onDocumentLoadSuccess}>
        <Text> My Test Text</Text>
        {Array.from(new Array(numPages), (el, index) => (
          <PageR key={`page_${index + 1}`} pageNumber={index + 1} />
        ))}
      </Document>

      <PDFDownloadLink
        className="text-blue-500 underline"
        document={
          <Document file={"/Susca.pdf"} onLoadSuccess={onDocumentLoadSuccess}>
            <Text> My Test Text </Text>
            {Array.from(new Array(numPages), (el, index) => (
              <PageR key={`page_${index + 1}`} pageNumber={index + 1} />
            ))}
          </Document> 
        }
        fileName="report.pdf"
      >
        {({ blob, url, loading, error }) =>
          loading ? "Loading document..." : "Download pdf file"
        }
      </PDFDownloadLink>
    </div>
  );
}

export default PDFViewer;

Error: “TypeError: canvas.getContext is not a function”