做类似淘宝的网站设计需要什么,个人网站源码模板,市场调研模板,dw做的网站如何使用自定义打印方法
1. 准备HTML结构
首先#xff0c;构造了一个基本的HTML页面框架#xff0c;并设置了页面的字符编码为UTF-8#xff0c;以确保中文和其他特殊字符能正确显示。页面的标题设置为传入的 title 参数值。
let printStr htmlheadmet…自定义打印方法
1. 准备HTML结构
首先构造了一个基本的HTML页面框架并设置了页面的字符编码为UTF-8以确保中文和其他特殊字符能正确显示。页面的标题设置为传入的 title 参数值。
let printStr htmlheadmeta http-equivContent-Type contenttext/html; charsetutf-8title title /title/head
2. 创建DOM元素与表格内容
接下来创建了两个 div 元素其中一个被赋予了ID table用于容纳后续动态生成的表格内容。根据传入的 data 对象构建了一个复杂的HTML表格字符串这个表格包含了产品信息、订单详情、生产过程中的各个步骤如配料、贴片、测试等以及备注信息。
const div1 document.createElement(div)
const div document.createElement(div)
div.id table
div1.appendChild(div)// ... 构建表格内容 ...div.insertAdjacentHTML(afterbegin, table)
3. 样式应用
为了确保表格的边框能够正常显示向页面中插入了简单的CSS样式规则指定每个单元格 (td) 的边框为1像素实线黑色。
printStr printStr content /bodystyletd{border:1px solid black}/style/html
4. 打印操作
通过 window.open(_blank) 方法打开了一个新的浏览器窗口并将之前构造好的HTML字符串写入新窗口的文档中。然后利用 setTimeout 确保所有DOM元素渲染完成之后再调用新窗口的 print() 方法来触发浏览器的打印对话框。最后关闭打印窗口避免留下不必要的空白标签页。
const pWin window.open(_blank)
pWin.document.write(printStr)setTimeout(() {pWin.print()pWin.close()
}, 300)
5. 数据映射与格式化
在构建表格时对某些字段进行了映射转换比如 moduleTypeMap 和 yesOrNoMap以便将数据库中的数值或代码转换成更具可读性的文本描述。此外对于可能为空的数据项使用了空值合并运算符 (??) 来提供默认值防止出现未定义的情况。
const moduleTypeMap {1: 小表-计量,2: 小表-MBUS,// ... 其他映射 ...
}const yesOrNoMap {0: 否,1: 是
}
6. 延迟执行
在获取数据后通过 setTimeout 设置了一个短暂的延迟500毫秒然后再调用 saleTrackPrint 函数。这可能是为了确保数据完全加载并处理完毕后再进行打印操作避免因异步操作导致的数据不完整问题。
getTrackPrint(row.id).then(res {setTimeout(() {saleTrackPrint({...res.data, track_no: data.track_no_sub, ob_num: data.ob_num,contract_no: row.contract_no}, 生产跟踪单, 0)}, 500)
})
完整代码
import { saleTrackPrint } from /utilsgetTrackPrint(row.id).then(res {setTimeout(() {saleTrackPrint({...res.data, track_no: data.track_no_sub, ob_num: data.ob_num,contract_no: row.contract_no}, 生产跟踪单, 0)}, 500)})
saleTrackPrint 方法是一个用于生成并打印生产跟踪单的JavaScript函数。它接收三个参数data包含需要打印的数据对象、title文档标题和type未在代码中使用。以下是该方法的工作流程及其实现细节的深入分析
export function saleTrackPrint(data, title, type) {// 空页面let printStr htmlheadmeta http-equivContent-Type contenttext/html; charsetutf-8title title /title/headlet content const div1 document.createElement(div)const div document.createElement(div)div.id tablediv1.appendChild(div)const moduleTypeMap {1: 小表-计量,2: 小表-MBUS,3: 大表-计量,4: 大表-MBUS,5: 小表-485,6: 大表-485}const yesOrNoMap {0: 否,1: 是}const table table border1 width1000 height500 alignleft cellpadding10 cellspacing0tr
th colspan7 stylefont-size: 30px${title}(${data.track_no})/th/trtrtd rowspan5产品信息/td/tr
tr
td width150订单数量/tdtd width150${data.product_num ?? }/td
td width150贴片数量/tdtd width150${data.ob_num}/td
td width150预交货日期/tdtd width150${data.delivery_time ?? }/td/tr
tr
td产品型号/tdtd${data.product_model ?? }/td
td程序版本/tdtd${data.soft_version ?? }/td
td排针尺寸/tdtd${data.pin_height ?? }/td/tr
tr
td硬件版本号/tdtd stylefont-weight:bold${data.hard_version ?? }/td
td模块类型/tdtd${moduleTypeMap[data.module_type] ?? }/td
td产品名称/tdtd${data.product_name}/td/tr
tr
td客户/厂家/tdtd${data.product_buyer ?? }/td
td程序方案/tdtd${data.program_scheme ?? ?? }/td
td合同号/tdtd${data.contract_no ?? }/td/tr
tr
tdBOM单名称/tdtd colspan6${data.bom_name ?? }/td/tr
trtd配料/tdtd配料人员/tdtd colspan2/tdtd配料时间/tdtd colspan2/td/tr
trtd rowspan4贴片/td/tr
trtd1、器件检查/tdtd/tdtd2、炉温/tdtd/tdtd3、锡膏/tdtd/td/tr
trtd4、推力/tdtd/tdtd5、首件测试/tdtd/tdtd colspan2/td/tr
trtd贴片人员/tdtd colspan2/tdtd贴片时间/tdtd colspan2/td/tr
trtd rowspan7测试/td/tr
tr
td rowspan2数据来源路径/td
td colspan2 aligncenter测试数据/td
td colspan3 aligncenter平台数据/td/tr
tr
td aligncenter工序1/td
td aligncenter工序2/td
td aligncenter工序1/td
td colspan2 aligncenter工序2/td/tr
tr
td检测总数/tdtd/tdtd/tdtd/tdtd colspan2/td/tr
tr
td检测合格数/tdtd/tdtd/tdtd/tdtd colspan2/td/tr
tr
td检测不良数/tdtd/tdtd/tdtd/tdtd colspan2/td/tr
trtd测试人员/tdtd colspan2/tdtd测试时间/tdtd colspan2/td/tr
tr
td rowspan2割板/tdtd割板合格数/tdtd colspan2/tdtd割板不良数/tdtd colspan2/td/tr
trtd割板人员/tdtd colspan2/tdtd割板时间/tdtd colspan2/td/tr
tr
td rowspan2包装/tdtd包装合格数/tdtd colspan2/tdtd外观不良数/tdtd colspan2/td/tr
trtd包装人员/tdtd colspan2/tdtd包装时间/tdtd colspan2/td/tr
tr
td rowspan2入库/tdtd入库合格数/tdtd colspan2/tdtd订单不良数登记(不入库)/tdtd colspan2/td/tr
trtd入库人员/tdtd colspan2/tdtd入库时间/tdtd colspan2/td/tr
td colspan1订单备注/tdtd colspan6${data.remark ?? }/td/tr
tr
td colspan1客户备注/tdtd colspan6${data.customer_remark ?? }/td/tr
/table
div.insertAdjacentHTML(afterbegin, table)// 拼接空页面style样式dom内容content content div1.innerHTML// printStr printStr tabStyle content /body/htmlprintStr printStr content /bodystyletd{border:1px solid black}/style/html// 打开新页面const pWin window.open(_blank)// 将内容赋值到新页面pWin.document.write(printStr)// 使用setTimeout等页面dom元素渲染完成后再打印。setTimeout(() {pWin.print() // 调用打印功能。pWin.close() // 关闭 打印创建的当前页面document.getElementById(div1.id) // .setAttribute(style, display: none)}, 300)
}
效果展示 当用户触发打印功能时会弹出一个预览窗口显示带有详细信息的生产跟踪单。用户可以选择直接打印或保存为PDF文件。此方法实现了无需离开当前页面即可快速生成并打印文档的需求适用于各种内部管理系统的报表输出场景。
