How To Get Screenshot of <div>Some Text</div> And Use It?

Question

It's little bit hard to explain my problem. I'm creating a report using jpdf and html2canvas. Anyway, I have a text editor on my page and I can adjust the texts as I want. But as you know this text is a html format just like ' < span>Hello Worl</ span> '. I can save my text and get it without no doubt. And I can show this text on the page in tag using html-react-parser . But I want to set this text on my report. You can see my problem on the images I added. Paragraph is good on the page but it has html tag in the report. The first solution that came to my mind is get a screenshot of the text on tag and use it as a image in the report. Do you have any idea how to do it? Or Do you know any other way?

You can see my sample code:

import React, { useState } from 'react';
import jsPDF from 'jspdf'
import 'jspdf-autotable'
import html2canvas from 'html2canvas';
import parse from 'html-react-parser';

function Sample(props) {

const [sampleText, setSampleText] = useState("");

useState(() => {
    setSampleText('<div><span>Hello World</span></div>');
}, [])


const ShowEnforcementSummaryReport = () => {
    setShowReport(true);
    var doc = new jsPDF(); 
    var lMargin = 15; //left margin in mm
    var rMargin = 15; //right margin in mm
    var pdfInMM = 210;  // width of A4 in mm
    let pageHeight = 297; // standart A4 paper size


    doc.setFontSize(8);
    doc.setFont('NotoSans-Regular', 'normal');

    let text = sampleText.toString()
    var sampleTextLine = doc.splitTextToSize(text, (pdfInMM - lMargin - rMargin));
    doc.text(lMargin, 10 + 15, sampleTextLine);

    html2canvas(document.body, { scale: 2, scrollY: 0, height: window.outerHeight + window.innerHeight, windowHeight: window.outerHeight + window.innerHeight, }).then(canvas => {
        document.body.appendChild(canvas);
        let output = doc.output('bloburl');
        document.getElementById("pdfObj").height = canvas.height / 4;
        document.getElementById("pdfObj").data = output;
    });
}


return (
    <div>
        <div> {parse(sampleText)} </div>
        <button onClick={()=>ShowEnforcementSummaryReport()} >Call Report</button>
    </div>


)

}