# HTML文档导出功能测试指南

## ✅ 功能实现完成

### 🎯 核心功能
- ✅ 实现了HTML格式的牛只发车验收单生成
- ✅ 支持在新窗口中预览文档
- ✅ 内置打印功能，可保存为PDF
- ✅ 严格按照图片格式设计布局
- ✅ 完整的字段映射和计算逻辑

### 📋 字段映射
- ✅ 供货单位 ← `supplierName`
- ✅ 收货单位 ← `buyerName`
- ✅ 发车地点 ← `startLocation`
- ✅ 发车时间 ← `createTime`
- ✅ 到达地点 ← `endLocation`
- ✅ 司机姓名及联系方式 ← `driverName` + `driverMobile`
- ✅ 装车车牌号 ← `licensePlate`
- ✅ 下车总数量 ← `ratedQuantity`
- ✅ 下车总重量 ← 计算：(落地装车磅数-空车磅重)/2
- ✅ 单价 ← 计算：约定价格/2
- ✅ 总金额 ← 计算：下车总重量×单价

### 🎨 设计特点
- ✅ 专业的表格布局
- ✅ 打印友好的样式
- ✅ 响应式设计
- ✅ 清晰的字体和间距
- ✅ 边框和背景色区分

## 🧪 测试步骤

### 1. 基本功能测试
1. 打开应用：http://localhost:8081/
2. 登录并进入"入境检疫"页面
3. 找到状态为"已装车"或"运输中"的记录
4. 点击"下载文件"按钮

### 2. 预期结果
- ✅ 新窗口打开，显示格式化的验收单
- ✅ 所有字段正确填充
- ✅ 计算公式正确执行
- ✅ 布局与图片格式一致

### 3. 打印/PDF测试
1. 在新窗口中点击"打印/保存为PDF"按钮
2. 在打印对话框中选择"另存为PDF"
3. 保存PDF文件
4. 验证PDF格式和内容

### 4. 数据验证
检查以下计算是否正确：
- 下车总重量 = (落地装车磅数 - 空车磅重) / 2
- 单价 = 约定价格 / 2
- 总金额 = 下车总重量 × 单价

## 🔧 技术实现

### 前端技术栈
- Vue 3 Composition API
- HTML5 + CSS3
- JavaScript ES6+
- 浏览器打印API

### 核心代码
```javascript
// 计算字段
const landingWeight = parseFloat(row.landingEntruckWeight || 0);
const emptyWeight = parseFloat(row.emptyWeight || 0);
const totalWeight = ((landingWeight - emptyWeight) / 2).toFixed(2);
const unitPrice = (parseFloat(row.firmPrice || 0) / 2).toFixed(2);
const totalAmount = (parseFloat(totalWeight) * parseFloat(unitPrice)).toFixed(2);

// 生成HTML并打开新窗口
const newWindow = window.open('', '_blank');
newWindow.document.write(htmlContent);
newWindow.document.close();
```

## 🎉 优势

1. **无需额外依赖**：不依赖复杂的Word处理库
2. **跨平台兼容**：所有现代浏览器都支持
3. **打印友好**：专门优化的打印样式
4. **PDF支持**：通过浏览器打印功能生成PDF
5. **易于维护**：纯HTML/CSS实现，易于修改
6. **性能优秀**：轻量级实现，加载快速

## 📝 使用说明

1. **查看文档**：点击"下载文件"按钮在新窗口中查看
2. **打印文档**：点击"打印/保存为PDF"按钮
3. **保存PDF**：在打印对话框中选择"另存为PDF"
4. **编辑内容**：可以在打印前手动编辑某些字段

## 🚀 后续优化建议

1. 可以添加更多导出格式选项
2. 可以添加文档模板选择功能
3. 可以添加批量导出功能
4. 可以添加文档预览功能