# case-material-system

**Repository Path**: hngcadmin/case-material-system

## Basic Information

- **Project Name**: case-material-system
- **Description**: html+css，pdf生成
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2025-10-12
- **Last Updated**: 2026-04-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 案件材料汇总系统

一个纯前端实现的案件材料汇总系统，用于整理和生成标准化的案件材料 PDF 文档。

## 功能特点

### 📋 案件信息管理
- 闪送员姓名、三者姓名
- 发案日期、结案日期
- 所属城市、案件描述

### 📂 材料目录分类
系统支持以下 11 个材料目录：
1. 案件来源
2. 事故情况
3. 闪送员信息
4. 订单信息
5. 伤者伤情
6. 事故责任认定
7. 伤者诉求
8. 赔付依据
9. 法务评估
10. 和解材料
11. 其他材料

### 📄 文件上传支持
- **图片格式**: JPG、PNG（自动格式检测）
- **PDF 文件**: 支持嵌入外部 PDF
- **智能处理**: 自动识别图片真实格式，避免扩展名错误

### 🎨 PDF 生成功能
- ✅ **中文字体支持**: 支持本地字体文件或在线字体
  - **本地字体**（推荐）：上传Windows自带的微软雅黑/宋体，生成速度快
  - **在线字体**：自动从CDN加载中文字体（首次较慢，会缓存）
- ✅ **书签目录**: 自动生成可点击跳转的目录书签
- ✅ **水印添加**: 每页自动添加"危机处置部"水印
- ✅ **标准命名**: 自动生成 `城市+闪送员姓名+致+三者姓名+伤残案.pdf`
- ✅ **首页封面**: 居中显示文档标题

## 快速开始

### 在线使用
直接打开 `index.html` 即可使用，无需安装任何依赖。

### 本地部署
```bash
# 克隆项目
git clone https://gitee.com/hngcadmin/case-material-system.git

# 进入项目目录
cd case-material-system

# 使用任意 Web 服务器运行
# 方式1: 使用 Python
python -m http.server 8080

# 方式2: 使用 Node.js http-server
npx http-server -p 8080

# 方式3: 直接双击 index.html（推荐）
```

访问 `http://localhost:8080` 即可使用。

## 项目结构

```
case-material-system/
├── index.html          # 主页面
├── css/
│   └── style.css      # 样式文件
├── js/
│   ├── config.js      # 配置文件（材料目录、字体URL等）
│   ├── utils.js       # 工具函数
│   ├── form.js        # 表单管理
│   ├── file.js        # 文件处理
│   ├── pdf.js         # PDF生成核心
│   └── main.js        # 主入口
└── README.md          # 本文档
```

## 使用说明

### 1. 填写案件信息
在页面顶部填写以下必填信息（标记 * 的字段）：
- 闪送员姓名
- 三者姓名
- 发案日期
- 所属城市
- 案件描述

结案日期为可选项。

### 2. 添加材料
点击各个材料目录展开，可以：
- **输入文字**: 在文本框中输入材料说明
- **上传文件**: 点击上传区域或拖拽文件上传
  - 支持单次上传多个文件
  - 支持 JPG、PNG、PDF 格式
  - 单个文件最大 10MB

### 3. 字体设置（可选但推荐）
为了加快生成速度和确保中文正常显示，建议上传本地字体文件：

**Windows系统推荐字体**：
- **微软雅黑**：`C:\Windows\Fonts\msyh.ttc` (推荐，显示效果好)
- **宋体**：`C:\Windows\Fonts\simsun.ttc` (经典字体)

**如何上传**：
1. 在"字体设置"区域点击选择文件
2. 导航到 `C:\Windows\Fonts\` 目录
3. 选择 `msyh.ttc` 或 `simsun.ttc`
4. 看到绿色"✓ 已选择"提示即可

**不上传字体的情况**：
- 系统会自动从网络下载字体（首次可能需要5-10秒）
- 下载后会被浏览器缓存，之后会快很多
- 如果网络问题导致下载失败，会提示无法生成PDF

### 4. 生成 PDF
点击底部"📄 生成PDF"按钮，系统将：
1. 验证必填信息
2. 加载中文字体
3. 生成首页封面
4. 添加案件信息和材料内容
5. 创建书签目录（可点击跳转）
6. 添加水印
7. 自动下载生成的 PDF

### 5. 快捷键
- `Ctrl/Cmd + P`: 快速生成 PDF

## 技术栈

- **纯前端实现**: 无需后端服务器
- **PDF 生成**: pdf-lib 1.17.1
- **字体支持**: fontkit + 霞鹜文楷
- **样式**: 原生 CSS3
- **兼容性**: 支持现代浏览器（Chrome、Firefox、Edge、Safari）

## 核心特性详解

### 智能图片处理
系统实现了智能图片格式检测：
```javascript
// 自动尝试 PNG 和 JPG 格式
// 即使文件扩展名错误也能正确处理
```

### 书签目录生成
PDF 中会自动生成可点击的书签目录：
- 案件基本信息
- 各个材料章节（仅包含有内容的章节）

在 PDF 阅读器中点击书签即可快速跳转到对应页面。

### 智能字体加载
系统提供灵活的字体加载方案：

1. **本地字体优先**（推荐）
   - 支持上传 `.ttf`、`.ttc`、`.otf` 格式
   - 使用Windows系统自带字体，无需下载
   - 生成速度快，中文显示完美
   
2. **在线字体备用**
   - jsDelivr CDN（国内外访问都快，主要）
   - unpkg CDN（备用）
   - Noto Sans SC（思源黑体，最终备用）
   - 添加10秒超时机制，避免长时间等待

3. **错误处理**
   - 所有字体源失败时给出清晰提示
   - 引导用户上传本地字体文件

### 水印系统
每页自动添加5个倾斜的"危机处置部"水印，确保文档安全性。

## 常见问题

### Q: 刷新页面后数据丢失？
A: 系统设计为刷新后清空数据，确保每次生成新的案件材料。

### Q: 图片上传失败？
A: 请检查：
- 文件大小是否超过 10MB
- 文件格式是否为 JPG/PNG/PDF
- 浏览器是否支持 FileReader API

### Q: PDF 生成失败，提示"无法加载中文字体"？
A: 这是网络问题导致在线字体下载失败。解决方法：
1. **推荐方案**：上传本地字体文件（见"字体设置"部分）
2. 检查网络连接后重试
3. 稍后再试（可能是CDN暂时不可用）

### Q: 为什么推荐使用本地字体？
A: 
- ⚡ **速度快**：无需网络下载，秒级生成PDF
- 🎯 **稳定**：不受网络影响，100%可靠
- 💯 **质量好**：Windows自带字体显示效果优秀
- 🔒 **隐私**：无需连接外部服务器

### Q: 上传字体后会保存吗？
A: 不会。字体文件仅在当前页面会话中使用，刷新页面后需要重新上传。这是出于隐私和安全考虑。

### Q: 书签目录不显示？
A: 请使用支持书签的 PDF 阅读器（如 Adobe Acrobat、Chrome、Edge）。

## 浏览器兼容性

| 浏览器 | 版本要求 | 支持情况 |
|--------|----------|----------|
| Chrome | 90+ | ✅ 完全支持 |
| Firefox | 88+ | ✅ 完全支持 |
| Edge | 90+ | ✅ 完全支持 |
| Safari | 14+ | ✅ 完全支持 |
| IE | - | ❌ 不支持 |

## 开发说明

### 修改材料目录
编辑 `js/config.js` 中的 `MATERIAL_SECTIONS` 数组：

```javascript
const MATERIAL_SECTIONS = [
    '案件来源',
    '事故情况',
    // ... 添加或修改目录
];
```

### 自定义字体
修改 `js/config.js` 中的 `FONT_URLS` 数组，添加您的字体 CDN 链接。

### 调整文件大小限制
修改 `js/config.js` 中的 `MAX_FILE_SIZE`：

```javascript
const MAX_FILE_SIZE = 10 * 1024 * 1024; // 10MB
```

## 更新日志

### v1.1.0 (2025-10-18)
- ✅ 新增本地字体文件上传功能
- ✅ 优化字体加载策略（本地优先）
- ✅ 添加字体加载超时机制（10秒）
- ✅ 使用更快的Google Fonts CDN
- ✅ 改进错误提示信息
- ✅ 修复中文编码错误问题

### v1.0.0 (2025-01-12)
- ✅ 完成基础功能开发
- ✅ 实现 PDF 书签目录
- ✅ 添加智能图片格式检测
- ✅ 优化字体加载机制
- ✅ 移除自动保存功能

## 许可证

MIT License

## 联系方式

- Gitee: https://gitee.com/hngcadmin/case-material-system
- 问题反馈: 请在 Gitee 提交 Issue

## 致谢

- [pdf-lib](https://pdf-lib.js.org/) - PDF 生成库
- [霞鹜文楷](https://github.com/lxgw/LxgwWenKai) - 开源中文字体
- [fontkit](https://github.com/foliojs/fontkit) - 字体处理库