将react组件导出为JPG并保存到项目文件夹

npm install html2canvas file-saver

import html2canvas from 'html2canvas';
import { saveAs } from 'file-saver';

export default function MyComponent() {
  const handleExport = () => {
    const componentRef = useRef(null);

    html2canvas(componentRef.current).then((canvas) => {
      canvas.toBlob((blob) => {
        saveAs(blob, 'myComponent.jpg');
      });
    });
  };

  return (
    <div>
      <div ref={componentRef}>
        {/* React组件的内容 */}
      </div>
      <button onClick={handleExport}>导出为JPG</button>
    </div>
  );
}