Почему не показывается текст при сохранении PDF?

Question

[Paul14]

Все работает в sandbox - https://codesandbox.io/p/sandbox/silly-payne-ydgrpy
PDF сохраняется.

У меня в проекте не показывается текст вообще. В чем может быть дело?

import html2canvas from "html2canvas";
import jsPDF from "jspdf";

const MakeKP_Layer = () => {
    const printDocument = () => {
    const input = document.getElementById("divToPrint");
    html2canvas(input).then((canvas) => {
      const imgData = canvas.toDataURL("image/png");
      const pdf = new jsPDF();
      pdf.addImage(imgData, "JPEG", 0, 0);
      //pdf.output('dataurlnewwindow');
      pdf.save("download.pdf");
    });
  };

  return (
    <div>
      <div>
        <div className="mb5">
          <button onClick={printDocument}>Print</button>
        </div>
        <div id="divToPrint">
            <div style={{background:'#333', width:'100%', height:100, color:"#fff", fontFamily:'sans-serif'}}>                
                <p>SHOW THIS TEXT</p>
            </div>
          <div style={{color:'#333', fontSize:24, fontFamily:'sans-serif' }}>Note: Here the dimensions of div are same as A4</div>
          <div style={{color:'#f12'}}>You Can add any component here</div>
        </div>
      </div>
    </div>
  );
};

export default MakeKP_Layer;

Answer 1

[Paul14]

Просто бред! Все из-за 1 строчки кода.

button{ padding:10px 20px; display: table; border-radius: 5px; color: #fff;  background: rgb(0 117 255);  border:0; cursor: pointer; transition: 500ms ease; font-size:14px;}

Убрал button из компонента - все заработало. Дело в стилях, в англичанских интернетах пишут про баг c display "inline". Если у кого-то еще возникнет проблема, первым делом попробуйте итеративно поудалять стили.