jsPDF and HTML2Canvas always outputting blank PDFs from TinyMCE content

70 Views Asked by At

I'm using jsPdf and HTML2canvas to download TinyMCE6 content as a PDF, but the PDF is always blank.

function generatePdf(content) {
  console.log('Content is:', content)

  const { jsPDF } = window.jspdf;
  const doc = new jsPDF('p', 'mm', 'a4');

  const container = document.createElement('div');
  container.style.display = 'none';
  document.body.appendChild(container);

  container.innerHTML = content;
  console.log('content as inner.html', content);

  setTimeout(() => {
    html2canvas(container).then(canvas => {
      const imgData = canvas.toDataURL('image/jpeg', 1.0);
      doc.addImage(imgData, 'JPEG', 10, 10, 190, 250);
      doc.save('generatefile.pdf');
      document.body.removeChild(container);
    });
  }, 500);
}

document.getElementById('generatePdfButton').addEventListener('click', function() {
  const contentToSave = tinymce.get('myTextarea').getContent(); // Replace 'myTextarea' with your editor's ID
  console.log('content to save', contentToSave);
  generatePdf(contentToSave);
});

The debugging statements are:

content to save <p>HI</p>
htmleditor.html:47 Content is: <p>HI</p>
htmleditor.html:59 content as inner.html <p>HI</p>

However the PDF downloaded is blank. Even though I restarted browser, typed different content with images, the debugging statements are printed but PDF is always blank

I want my the content from my text editor to be saved as PDF with images and styles from the editor content

0

There are 0 best solutions below