使用html2canvas 截图并生成pdf

react+ts做法

import html2canvas from 'html2canvas';

import jsPDF from 'jspdf';

const contentRef = useRef<HTMLDivElement>(null);

const handlePreview = async () => {

          try {

          const canvas = await html2canvas(contentRef.current!);

          const imgData = canvas.toDataURL('image/png');

          // 创建PDF

          const pdf = new jsPDF('p', 'mm', 'a4')

          pdf.addImage(imgData, 'PNG', 15, 15, 180, 100); // 将截图添加到PDF

          // 添加额外的文字

          pdf.text('111 111', 15, 25);

          const blob = pdf.output("blob");

          // 在线展示pdf

          window.open(URL.createObjectURL(blob));   

          //下载pdf

          pdf.save('1') 

        } catch (error) {

          console.error('Error generating PDF:', error);

        }

    };

//需要截图的区域

<div ref={contentRef}>

                <Image

                        preview={false}

                        width={400}

                        height={200}

                        src={banner_slide_0888}

                    />

  </div>