如何将reactJs组件转换为pdf并在Whatsapp上分享此pdf

Question

我想将我的reactjs组件转换为PDF，然后需要使用分享WhatsApp按钮在WhatsApp上分享生成的PDF。

我的组件中有一个按钮，“在 Whatsapp 上分享”。单击此按钮后，我想将我的账单组件转换为 PDF 并在 WhatsApp 上分享此 PDF。

const shareOnWhatsApp = async () => {
    try {
      const element = billRef.current;
      const canvas = await html2canvas(element);
      const data = canvas.toDataURL("image/png");

      const pdf = new jsPDF("portrait", "px", [380, 380]);

      const pdfWidth = pdf.internal.pageSize.getWidth();
      const pdfHeight = pdf.internal.pageSize.getHeight();

      pdf.addImage(data, "PNG", 0, 0, pdfWidth, pdfHeight);
      const pdfUrl = pdf.output("blob");
      const blobUrl = URL.createObjectURL(pdfUrl);
      const whatsappLink = `https://wa.me/+91xxxxxxxxxx?document=${encodeURIComponent(
        blobUrl
      )}`;
      console.log(whatsappLink, pdfUrl, blobUrl);
      window.open(whatsappLink, "_blank");

      console.log("PDF shared successfully on WhatsApp!");
    } catch (error) {
      console.error("Error generating or sharing PDF:", error);
    }
  };

Answer 1

const shareOnWhatsApp = async () => {
try {
  const element = billRef.current;
  const canvas = await html2canvas(element);
  const data = canvas.toDataURL("image/png");

  const pdf = new jsPDF("portrait", "px", [380, 380]);

  const pdfWidth = pdf.internal.pageSize.getWidth();
  const pdfHeight = pdf.internal.pageSize.getHeight();

  pdf.addImage(data, "PNG", 0, 0, pdfWidth, pdfHeight);
  const pdfUrl = pdf.output("blob");
  const blobUrl = URL.createObjectURL(pdfUrl);
  const whatsappLink = `https://wa.me/+91xxxxxxxxxx?document=${encodeURIComponent(
    blobUrl
  )}`;
  console.log(whatsappLink, pdfUrl, blobUrl);
  window.open(whatsappLink, "_blank");

  console.log("PDF shared successfully on WhatsApp!");
} catch (error) {
  console.error("Error generating or sharing PDF:", error);
}

};