CODEWITHSUNDEEP
javascriptreactjstinymcejspdf
dejonda
dejonda

Reputation: 21

I want to print the content of a TinyMCE area in PDF with jsPDF

I am trying to generate a PDF using jsPDF and TinyMCE, but the resulting PDF includes HTML tags. I have tried using doc.html(), but the output is not as expected. It shows a white text and all words are in a new line.

On the other hand, if I use doc.text(), I am not able to center my text or change the text size with the toolbar of TinyMCE.

What can I do to generate a PDF with properly formatted content using TinyMCE and jsPDF?

Here is my code:

import React, { useRef } from "react";
import { Editor } from "@tinymce/tinymce-react";
import jsPDF from "jspdf";

function Home() {
  const editorRef = useRef(null);

  const handlePrint = () => {
    if (editorRef.current) {
      const content = editorRef.current.getContent();
  
      // Create new PDF document
      const doc = new jsPDF({
        orientation: "landscape",
        unit: "mm",
        format: [297, 210],
      });
  
      // Add content to PDF document
      doc.setFont("helvetica", "normal");
      doc.setFontSize(14);
      doc.text(content, 20, 20);
  
      // Open PDF document in a new tab
      window.open(doc.output("bloburl"), "_blank");
    }
  };
  

  return (
    <div
      style={{
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        height: "100vh",
      }}
    >
      <div style={{ width: "50%" }}>
        <Editor
          onInit={(evt, editor) => (editorRef.current = editor)}
          initialValue="This is the initial content of the editor"
          init={{
            height: 500,
            menubar: true,
            plugins: [
              "advlist autolink lists link image charmap print preview anchor",
              "searchreplace visualblocks code fullscreen",
              "insertdatetime media table paste code help wordcount",
            ],
            toolbar:
              "undo redo | formatselect | bold italic backcolor | \
              alignleft aligncenter alignright alignjustify | \
              bullist numlist outdent indent | removeformat | help",
          }}
          apiKey=""
          tinymceScriptSrc="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js"
          style={{
            display: "flex",
            justifyContent: "center",
            alignItems: "center",
          }}
        />
        <button onClick={handlePrint} style={{ marginTop: "1rem" }}>
          Generate PDF
        </button>
      </div>
    </div>
  );
}

export default Home;

Upvotes: 2

Views: 337

Answers (1)

Maris
Maris

Reputation: 1

try to use it with html2pdf or htmlcanvas and set all content in div at first

Upvotes: 0

Related Questions