114 lines
4.5 KiB
Markdown
114 lines
4.5 KiB
Markdown
|
# 前端生成 PDF 并上传后端技术方案
|
|||
|
|
|
|||
|
|
## 概述
|
|||
|
|
- 目标：诊断报告页面在前端生成高保真 PDF，上传到 Python 后端持久化，并把文件路径写入对应检测会话。
|
|||
|
|
- 推荐：使用 Electron 主进程 `webContents.printToPDF` 生成 PDF，忠实度高、分页与中文字体友好；作为短期备选，提供 `html2canvas` 截图转 PDF 的实现。
|
|||
|
|
|
|||
|
|
## 架构流程
|
|||
|
|
- 前端渲染进程：用户在报告页面点击“生成报告”→ 发送 IPC 请求至主进程生成 PDF → 主进程返回 PDF Buffer 给渲染进程 → 渲染进程上传后端。
|
|||
|
|
- Python 后端：接收 PDF 文件流，写入 `backend/static/reports/<YYYY-MM-DD>/<session_id>.pdf`，记录相对路径到 `detection_sessions` 的报告字段。
|
|||
|
|
|
|||
|
|
## 前端实现（Electron 渲染）
|
|||
|
|
### 报告页面打印版式
|
|||
|
|
- 报告根容器，例如 `#report-root`。
|
|||
|
|
- 打印样式建议：
|
|||
|
|
- `@page { size: A4; margin: 12mm }`
|
|||
|
|
- 固定宽度设计为 A4 比例，非交互元素隐藏，保留背景。
|
|||
|
|
- 通过添加类名（例如 `.print-mode`）切换打印样式。
|
|||
|
|
|
|||
|
|
### 渲染进程触发生成
|
|||
|
|
```ts
|
|||
|
|
// renderer: 诊断报告视图中
|
|||
|
|
import { ipcRenderer } from 'electron'
|
|||
|
|
|
|||
|
|
async function generatePdf(sessionId: string) {
|
|||
|
|
const pdfBuffer: ArrayBuffer = await ipcRenderer.invoke('generate-report-pdf', {
|
|||
|
|
selector: '#report-root',
|
|||
|
|
pageSize: 'A4',
|
|||
|
|
printBackground: true
|
|||
|
|
})
|
|||
|
|
const blob = new Blob([pdfBuffer], { type: 'application/pdf' })
|
|||
|
|
const form = new FormData()
|
|||
|
|
form.append('file', blob, `${sessionId}.pdf`)
|
|||
|
|
|
|||
|
|
const res = await fetch(`${getBackendUrl()}/api/reports/${sessionId}/upload`, {
|
|||
|
|
method: 'POST',
|
|||
|
|
body: form
|
|||
|
|
})
|
|||
|
|
const json = await res.json()
|
|||
|
|
if (!json.success) throw new Error(json.error || '上传失败')
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 主进程生成 PDF
|
|||
|
|
```ts
|
|||
|
|
// main: 注册 IPC 处理
|
|||
|
|
import { ipcMain } from 'electron'
|
|||
|
|
|
|||
|
|
ipcMain.handle('generate-report-pdf', async (event, payload) => {
|
|||
|
|
const win = event.sender.getOwnerBrowserWindow()
|
|||
|
|
await win.webContents.executeJavaScript(`
|
|||
|
|
(function(){
|
|||
|
|
const root = document.querySelector('${payload.selector}')
|
|||
|
|
if (!root) throw new Error('报告根节点缺失')
|
|||
|
|
document.body.classList.add('print-mode')
|
|||
|
|
return true
|
|||
|
|
})()
|
|||
|
|
`)
|
|||
|
|
const pdf = await win.webContents.printToPDF({
|
|||
|
|
pageSize: payload.pageSize || 'A4',
|
|||
|
|
printBackground: payload.printBackground !== false,
|
|||
|
|
marginsType: 0
|
|||
|
|
})
|
|||
|
|
await win.webContents.executeJavaScript(`
|
|||
|
|
(function(){ document.body.classList.remove('print-mode'); return true })()
|
|||
|
|
`)
|
|||
|
|
return pdf
|
|||
|
|
})
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 更新数据库记录
|
|||
|
|
```py
|
|||
|
|
# database.py 片段
|
|||
|
|
def update_session_report_path(self, session_id: str, report_path: str):
|
|||
|
|
conn = self.get_connection()
|
|||
|
|
cursor = conn.cursor()
|
|||
|
|
cursor.execute('UPDATE detection_sessions SET detection_report = ? WHERE id = ?', (report_path, session_id))
|
|||
|
|
conn.commit()
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 接口设计
|
|||
|
|
- 上传 PDF：`POST /api/reports/<session_id>/upload`
|
|||
|
|
- 请求体：`multipart/form-data`，字段 `file`
|
|||
|
|
- 返回：`{ success, path }`
|
|||
|
|
|
|||
|
|
## 权限与安全
|
|||
|
|
- 校验 `session_id` 存在且归属当前登录用户（医生）。
|
|||
|
|
- 限制最大文件大小（例如 20MB），拒绝超限上传。
|
|||
|
|
- 文件名使用 `session_id.pdf`，避免任意文件名写盘。
|
|||
|
|
|
|||
|
|
## 版式与质量建议
|
|||
|
|
- 中文字体：在渲染环境预装中文字体或通过 `@font-face` 引入。
|
|||
|
|
- 分页：使用 `@page` 与 `page-break-before/after` 控制分页。
|
|||
|
|
- 背景：Electron 打印需开启 `printBackground: true`；确保 CSS 背景不被打印忽略。
|
|||
|
|
|
|||
|
|
## 错误与排查
|
|||
|
|
- 空白 PDF：确保打印前切入 `.print-mode` 并等待资源加载；检查选择器是否找到根节点。
|
|||
|
|
- 字体方框：安装中文字体或嵌入字体文件。
|
|||
|
|
- 资源丢失：使用相对路径或 base64；`html2canvas` 时启用 `useCORS` 且服务器设置跨域头。
|
|||
|
|
- 过大或截断：分页控制，或拆页生成。
|
|||
|
|
|
|||
|
|
## 测试用例
|
|||
|
|
- 单页报告：生成并上传，后端返回路径；数据库记录更新；历史档案中可下载或预览。
|
|||
|
|
- 多页报告：存在分页断点，打印后为多页；每页标题和页码正常。
|
|||
|
|
- 异常：网络断开、文件超限、会话不存在；前端提示具体错误。
|
|||
|
|
|
|||
|
|
## 部署说明
|
|||
|
|
- Electron 打包：已使用 `electron-builder`；生成 exe 后功能一致。
|
|||
|
|
- 后端存储：Windows 下路径统一使用 `/` 展示；静态文件由后端提供下载或前端拼接 `BACKEND_URL + '/' + path` 访问。
|
|||
|
|
|
|||
|
|
## 后续扩展
|
|||
|
|
- 加页眉页脚（时间、患者信息、页码）。
|
|||
|
|
- 报告水印与签章。
|
|||
|
|
- 历史报告下载与比对视图。
|