javascript - 将 dvi 转换为 pdf 而不在 reactJS 的网页中显示

Question

这是创建 PDF 的 jsPDF 函数。问题是我要转换为 pdf 的 div 在网页中不可见。如果我在 div 中使用“隐藏”，它将输出一个空白 pdf

 function generatePDF(){
        var rep = new jsPDF("p","pt","a4")
        rep.html(document.querySelector("#rep1"),{
            callback: function(pdf){
                pdf.save("report.pdf");   
            }
        })
    }

这是我要转换为 PDF 的 div。

<div id="rep1">content<div>

Answer 1

您可以这样做，例如当您单击按钮时，您可以显示该块并在打印后将其隐藏

import React, { useState } from "react";
import { jsPDF } from "jspdf";

export default function App() {
  const [display, setDisplay] = useState("none");

  const generatePDF = () => {
    setDisplay("block");
    var rep = new jsPDF("p", "pt", "a4");
    rep.html(document.querySelector("#rep1"), {
      callback: function (pdf) {
        pdf.save("report.pdf");
        setDisplay("none");
      }
    });
  };

  return (
    <div className="App">
      <div id="rep1" style={{ display }}>
        Hello CodeSandbox
      </div>
      <button onClick={generatePDF}>Click</button>
    </div>
  );
}

Codesandbox：https ://codesandbox.io/s/pensive-worker-l32io?file=/src/App.js

代码查看：https ://l32io.csb.app/