javascript - Reactjs jspdf-autotable output in page

Question

I'm trying to show the pdf that was just created on the reactjs page without having to download it.

I've tried this using an iframe, but it's not working.

Can anyone help me out?

Link: codesandbox

import React, { useEffect, useState } from "react";

import jsPDF from "jspdf";
import "jspdf-autotable";

export default function App() {
  const [url, setUrl] = useState("https://reactnative.dev/");

  const unit = "pt";
  const size = "A4"; // Use A1, A2, A3 or A4
  const orientation = "portrait"; // portrait or landscape
  const doc = new jsPDF(orientation, unit, size);

  const pdf = () => {
    const marginLeft = 40;
    var finalY = doc.lastAutoTable.finalY || 10;

    doc.setFontSize(15);

    doc.text("Total: ", marginLeft, finalY + 50);
    setUrl(doc.output("datauristring"));
  };

  useEffect(() => {
    pdf();
  }, []);

  return (
    <div className="App">
      <h1>Hello</h1>
      <iframe title="frame" src={url} height={800} width={600} />
    </div>
  );
}

Answer 1

等待大神答复