---
id: pdf-report
name: PDF 报告导出
area: rn-app
status: concept
---

## 概述

在查看模式下，将当前楼层的侧边栏物品清单 + 地图标记点信息导出为 PDF 报告。
报告完整呈现所有数据（不依赖屏幕截图），支持 20-30+ 标记点场景。

## 需求背景

- 不动产摸底完成后，需要输出一份可存档/分享的书面报告
- 报告内容 = 左侧标记点清单（物品名、数量、确认状态）+ 右侧带编号图钉的楼层平面图
- 需支持多个楼层（每层生成一页或分组）

## 技术调研结论

### 选定方案：客户端 HTML → PDF（expo-print）

| 维度 | 说明 |
|------|------|
| 方案 | 构建 HTML 字符串 → `expo-print` 本地 WebView 渲染 → 导出 PDF |
| 离线 | ✅ 完全离线，无需服务端 |
| 地图渲染 | `imageUri`（已有 base64 JPEG）作 `<img>` 底图，标记点用 `position:absolute` 圆圈叠加 |
| SVG 矢量层 | ⚠️ `floorMaps.generated.ts` SVG 体积极大（百万字符），不内嵌，用 JPEG 底图代替 |
| 标记点定位 | marker.x / marker.y 为归一化坐标（0-1），乘以图片宽高即可精确定位 |
| 物品清单 | 数据库直接查，不依赖屏幕状态，支持任意数量 |
| 分页 | HTML `page-break-inside: avoid` 自动处理 |

### 排除的方案

- **截图方案**：ScrollView 只截可见区，30 个标记点数据不完整 ❌
- **SVG 直接嵌入**：文件体积导致 WebView 崩溃风险 ❌
- **服务端生成**：需要后端，与离线架构冲突 ❌

## 报告结构设想（横版 A4）

```
┌─────────────────────────────────────────────────────────┐
│  项目名称   1F 楼层报告   导出日期                       │
├──────────────┬──────────────────────────────────────────┤
│ 标记点清单   │                                          │
│              │   楼层平面图（JPEG 底图）                 │
│ ① 红 电梯   │   + 彩色圆圈标记点（含编号）             │
│   ☑ 电梯×1  │                                          │
│ ② 紫 办公区 │                                          │
│   ☑ 电脑×2  │                                          │
│   ☑ 打印机×1│                                          │
│ ③ ...       │                                          │
└──────────────┴──────────────────────────────────────────┘
（标记点多时自动换页，地图区域保持在首页）
```

## 依赖

- `expo-print`（需新增安装，Expo 官方，无需 rebuild）
- `expo-sharing`（已安装，用于分享 PDF 文件）
- `expo-media-library`（已安装，可选保存到本地）

## 待确认

- [ ] 报告是否需要封面页（项目名称、地址、日期等信息从哪里来）
- [ ] 是否需要导出所有楼层 or 仅当前楼层
- [ ] PDF 分享方式：微信/邮件分享 or 保存到本地文件

## 任务卡

<!-- 待需求确认后拆解 -->