HTML文档导出功能测试指南

✅ 功能实现完成

🎯 核心功能

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

📋 字段映射

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

🎨 设计特点

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

🧪 测试步骤

1. 基本功能测试

打开应用：http://localhost:8081/
登录并进入"入境检疫"页面
找到状态为"已装车"或"运输中"的记录
点击"下载文件"按钮

2. 预期结果

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

3. 打印/PDF测试

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

4. 数据验证

检查以下计算是否正确：

下车总重量 = (落地装车磅数 - 空车磅重) / 2
单价 = 约定价格 / 2
总金额 = 下车总重量 × 单价

🔧 技术实现

前端技术栈

Vue 3 Composition API
HTML5 + CSS3
JavaScript ES6+
浏览器打印API

核心代码

// 计算字段
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();

🎉 优势

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

📝 使用说明

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

🚀 后续优化建议

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

3.1 KiB Raw Blame History Unescape Escape

HTML文档导出功能测试指南

✅ 功能实现完成

🎯 核心功能

📋 字段映射

🎨 设计特点

🧪 测试步骤

1. 基本功能测试

2. 预期结果

3. 打印/PDF测试

4. 数据验证

🔧 技术实现

前端技术栈

核心代码

🎉 优势

📝 使用说明

🚀 后续优化建议

3.1 KiB

Raw Blame History