nextjs 中的 html2canvas - 字母掉到底部

Question

我想使用 html2canvas 将组件保存为图像。

我创建了一个这样编码的组件。

import React,{ useState, useRef } from "react";
import html2canvas from "html2canvas";

const printDocument = (domElement) => {
  html2canvas(domElement).then((canvas) => {
    const image = canvas.toDataURL('png');
    const a = document.createElement('a');
    a.setAttribute('download', 'certificate.png');
    a.setAttribute('href', image);
    a.click();
  });
};

const ClassesTable = ({ saveSubjects, chooseSaveSubjects }) => {

  const certificateRef = useRef()

  return (
    <div className="bg-slate-500">

      <div className="border-2 border-black bg-yellow-500" ref={certificateRef}>Test</div>

      <button onClick={() => printDocument(certificateRef.current)}>
        download
      </button>
    </div>
  );
}

export default ClassesTable;

看起来像图片

当我点击下载时，我得到了这样的 png

谁能帮我看看为什么字母会掉到底部？