更新记录

1.0.0（2026-04-11） 下载此版本

1.动态生成报告 reportData 数据源，可从接口获取、表单输入、计算生成，支持文本、列表、样式、图片等任意 DOM 结构

2. 高清导出图片 scale: 3 控制清晰度，数值越高图片越清晰，自动处理跨域图片 3.一键保存到相册 点击按钮 → 生成画布 → 转图片 → 保存到手机相册，带加载提示 + 成功 / 失败提示，多端适配说明

平台兼容性

其他

# 功能说明

动态生成报告

reportData 是你的数据源，可从接口获取、表单输入、计算生成 支持文本、列表、样式、图片等任意 DOM 结构

高清导出图片

scale: 3 控制清晰度，数值越高图片越清晰 自动处理跨域图片

一键保存到相册

点击按钮 → 生成画布 → 转图片 → 保存到手机相册 带加载提示 + 成功 / 失败提示 多端适配说明

1. H5：完美支持
2. App（安卓 /iOS）：完美支持
3. 微信小程序：完美支持
4. 支付宝 / 百度 / 抖音小程序

安装步骤

1. 安装依赖

   在项目根目录执行：

   npm install html-to-canvas --save

2. 使用 uni.createSelectorQuery () 获取节点

const query = uni.createSelectorQuery().in(getCurrentPages()[getCurrentPages().length - 1])
query.select('#reportDom')
  .fields({ node: true, size: true, rect: true })
  .exec(...)

3. 组装报告数据

import ReportGenPic from '@/components/report-gen-pic/report-gen-pic.vue';

    // 报告数据
    const reportData = ref([
      { label: '总用户数', value: '12,580 人' },
      { label: '今日活跃', value: '3,682 人' },
      { label: '订单总量', value: '896 单' },
      { label: '成交金额', value: '¥ 15,680.00' },
      { label: '转化比率', value: '32.5 %' },
      { label: '平均时长', value: '12:35 分钟' },
    ])

效果展示（文字描述）

• 整体白色卡片 + 淡蓝渐变头部
• 标题：📊 月度数据统计报告
• 数据行：左边文字 / 右边蓝色数值
• 底部：系统自动生成 + 时间
• 按钮：渐变蓝，带保存图标