103 lines
3.1 KiB
Markdown
103 lines
3.1 KiB
Markdown
|
# 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. 可以添加文档预览功能
|