html2canvas绘制页面并生成图像下载

1. 简介

html2canvas是一个开源的JavaScript库，它允许开发者在用户的浏览器中直接将HTML元素渲染为画布（Canvas），并生成图像。以下是对html2canvas的详细介绍：

2. 主要功能

html2canvas的主要功能是将网页中的HTML元素转换为画布图像，通常用于生成网页截图或打印网页内容。它通过读取DOM结构和元素的CSS样式，在客户端生成图像，不依赖于服务端的渲染。

3.使用场景

网页截图：生成网页或网页部分的快照，用于保存、分享或打印。
报告生成：将网页内容转换为图片格式，用于生成报告或文档。
社交媒体分享：生成网页截图，方便在社交媒体上进行分享。

4. 基本用法

使用html2canvas非常简单，只需调用一个函数即可将指定的DOM元素转换为图像。以下是一个基本示例：


import { Descriptions, Image, message, Space, Spin } from 'antd';
import Countdown from 'antd/es/statistic/Countdown';
import type { Options } from 'html2canvas';
import html2canvas from 'html2canvas';
// 定义变量
 const cardRef = useRef<HTMLDivElement>(null);
 const opts: Partial<Options> = {
  scale: 2, // 缩放比例，提高生成图片清晰度
  useCORS: true, // 允许加载跨域的图片
  allowTaint: false, // 允许图片跨域，和 useCORS 二者不可共同使用
  logging: false, // 日志开关，发布的时候记得改成 false
  backgroundColor: 'transparent'
};

//点击下载的方法
  const handleAction = async () => {
    if (!cardRef.current) return;
    const ctx = await html2canvas(cardRef.current, opts);

    ctx.toBlob((blob) => {
      const link = document.createElement('a');
      const url = window.URL.createObjectURL(blob as Blob);
      link.href = url;
      link.download = '下载.png';
      link.click();
      URL.revokeObjectURL(url); // 释放内存

      message.success({
        content: '下载成功'
      });
    }, 'image/png');
    message.success('操作成功');
    
    return true;
  };

//下载按钮
 <Button onClick={handleAction} type="primary" key="download">
   下载
 </Button>
//绘制的内容
  <section className={styles.wrap}>
        <div ref={cardRef} className={styles.cardBox}>
          <div className={styles.cardContent}>
            <h3 className={styles.title}>标题</h3>
            <Descriptions title="信息" column={2}>
              <Descriptions.Item label="姓名">{record?.patient_name || '-'}</Descriptions.Item>
              <Descriptions.Item label="年龄">{record?.patient_age || '-'}</Descriptions.Item>
              <Descriptions.Item label="性别">{record?.patient_sex_name || '-'}</Descriptions.Item>
              <Descriptions.Item label="电话">{record?.patient_phone || '-'}</Descriptions.Item>
            </Descriptions>
            <Descriptions title="信息" column={2}>
              <Descriptions.Item label="医院">{record?.organ_name || '-'}</Descriptions.Item>
              <Descriptions.Item label="科室">{record?.dept_name || '-'}</Descriptions.Item>
              <Descriptions.Item label="医生">{record?.doctor_name || '-'}</Descriptions.Item>
              <Descriptions.Item label="时间">
                {record?.visit_date
                  ? moment(record.visit_date * 1000).format('YYYY-MM-DD') +
                      ' ' +
                      record?.schedul_slice_time || ''
                  : '-'}
              </Descriptions.Item>
            </Descriptions>
            <div className={styles.qrcode}>
              <Image
                width={128}
                src={record?.pay_qrcode}
                preview={false}
                placeholder={
                  record?.pay_qrcode ? (
                    <Image width={128} src={record?.pay_qrcode} preview={false} />
                  ) : (
                    <Spin
                      style={{
                        width: '128px',
                        height: '128px',
                        display: 'flex',
                        justifyContent: 'center',
                        alignItems: 'center'
                      }}
                    />
                  )
                }
              />
            </div>
          </div>
        </div>
      </section>