使用 React、Html2Canvas 和 JsPDF 进行实时预览答案

【问题标题】：Live preview with React, Html2Canvas and JsPDF使用 React、Html2Canvas 和 JsPDF 进行实时预览
【发布时间】：2022-02-03 12:30:22
【问题描述】：

我正在使用 react、html2canvas 和 jspdf 创建一个生成简历的 Web 应用程序。当有人提交表单时，我想获得 pdf 的实时预览。我花了几个小时寻找解决方案。但是运气不好。这个网站有一个很好的例子来说明我想要什么 [Here]。有人有想法吗，林克？

【问题讨论】：

标签： reactjs jspdf html2canvas

【解决方案1】：

根据您的问题，我了解到您不需要jspdf 进行实时预览，因为您只需要显示使用html2canvas 创建的简历的图像。 Check the implementation here

jspdf仅在需要下载为pdf时才需要，然后您可以使用jspdf将html2canvas生成的图像转换为pdf

更新

要隐藏 HTML 元素并只显示画布，您可以尝试类似this。

【讨论】：

是的。谢谢你。我已经知道了。我可以使用画布作为预览。但是如何隐藏 div 元素呢？只有没有 HTML 预览的画布？
更新了答案。请检查。

【解决方案2】：

import React from "react";
import { PDFObject } from "react-pdfobject";
import { jsPDF } from "jspdf";

const PreView = () => {
  const doc = new jsPDF();
  doc.text("Hello world!", 10, 10);
  const url = doc.output("bloburi");

  return <PDFObject url={url} />;
};

export default PreView;

【讨论】：

您能解释一下吗？