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

Question

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

Answer 1

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

jspdf 仅在您需要将其下载为 pdf 时才需要，然后您可以使用 jspdf

将 html2canvas 生成的图像转换为 pdf

更新

要隐藏 HTML 元素并仅显示 canvas 您可以尝试 this.

Answer 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;

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

Live preview with React, Html2Canvas and JsPDF

html2canvas

jspdf

reactjs