Javascript - Convert HTML content to PDF including images

Virat
February 23, 2024
221 views
0 votes
2 Answers

I’m using React-quill as a text editor. I want to convert the content from it that includes images into a pdf. Below is the string, I’m getting from editor.

<p>sdfghj<img src="data:image/jpeg;base64,/9j/4AAQ…r5izLn+Jucfh7Vo6p/r7j6j+VZl595P97/CgD//2Q=="></p>

I’ve used jsPDF but it’s only converting plain text into a pdf. If I put an image into the text editor, pdf is showing blank. How do I convert text with more than one images into a pdf?

Note: In the image src, the image is in base64 format.

Answers

You can use html2canvas library

 import html2canvas from 'html2canvas';
 import jsPDF from 'jspdf';

// Function to convert React-quill content to PDF
function convertContentToPDF(content) {
  // Capture React-quill content as an image using html2canvas
  html2canvas(document.getElementById('yourEditorElementId')).then((canvas) => {
    const imgData = canvas.toDataURL('image/png');

    // Generate PDF using jsPDF
    const pdf = new jsPDF();
    pdf.addImage(imgData, 'PNG', 0, 0, 210, 297); // Image dimensions and positioning
    pdf.save('react-quill-content.pdf'); // Save the PDF
  });
}

// Use the function with the React-quill content
convertContentToPDF(yourReactQuillContent);

hope this helps

Here is an approach you can follow using html2canvas and jspdf. I am using the element reference (useRef, the react way) instead of document.getElementById.

For some reason, it was having some issues using third-party images even after setting the CORS flag in html2canvas. But here is a working implementation using a local image

Main:

import React, { useRef } from "react";
import ElementToPDF from "./ElementToPDF";
import myLocalImage from "./image.png";

const MyElement = () => {
  const elementRef = useRef(null);
  return (
    <div>
      <div
        style={{
          height: "500px",
          width: "800px",
          backgroundColor: "wheat",
          color: "orange",
        }}
        ref={elementRef}
      >
        <h1>Hello, world!</h1>
        <img
          style={{ objectFit: "cover", height: "100px", width: "100px" }}
          src={myLocalImage}
          alt="Example Image"
        />
        <p>This is an example paragraph.</p>
      </div>
      <ElementToPDF elementRef={elementRef} />
    </div>
  );
};

ElementToPDF:

import React, { useRef } from "react";
import html2canvas from "html2canvas";
import jsPDF from "jspdf";

const ElementToPDF = ({ elementRef }) => {
  const convertToPDF = () => {
    if (elementRef.current) {
      html2canvas(elementRef.current, { useCORS: true }).then((canvas) => {
        let canvas_img = new Image();
        canvas_img.src = canvas.toDataURL("image/png");
        canvas_img.onload = function () {
          const pdf = new jsPDF("landscape", "mm", "a4");
          pdf.addImage(canvas_img, "PNG", 0, 0, 800, 500); // Image dimensions and positioning
          pdf.save("file2.pdf"); // Save the PDF
        };
      });
    }
  };

  return <button onClick={convertToPDF}>Convert to PDF</button>;
}

Please signup or login to give your own answer.

Click here to cancel reply.

Javascript – Convert HTML content to PDF including images

Answers