diff --git a/public/static/template8.png b/public/static/template8.png new file mode 100644 index 00000000..faab1578 Binary files /dev/null and b/public/static/template8.png differ diff --git a/src/demo/templates/template-files/template8.js b/src/demo/templates/template-files/template8.js new file mode 100644 index 00000000..6501c170 --- /dev/null +++ b/src/demo/templates/template-files/template8.js @@ -0,0 +1,290 @@ +export const name = "自定义表格"; +export const desc = "通过HTML元素实现自定义表格"; +export const author = "54xavier"; +export const link = "https://ccsimple.gitee.io/vue-plugin-hiprint/"; +// url 或者 base64 或者 require('../../../assets/logo.png') +export const preview = "/static/template8.png"; +export const printData = { + department: "技术部", + position: "前端开发工程师", + form_date: "2024-08-13", + pInfo: { + name: "张伟", + gender: "男", + place_of_birth: "江苏省南京市", + ethnicity: "汉族", + education_level: "本科", + major: "计算机科学与技术", + height: "178cm", + weight: "70kg", + birth_date: "1992-08-15", + political_affiliation: "中共党员", + graduation_year: "2015", + blood_type: "O型", + address: "北京市海淀区中关村东路10号", + email: "zhangwei@example.com", + phone: "138-1234-5678", + expected_salary: "20,000元/月", + availability: "2024-09-01", + mandarin_level: "一级甲等", + foreign_language_level: "英语六级", + }, +}; +export const json = { + panels: [ + { + index: 0, + name: 1, + height: 297, + width: 210, + paperHeader: 0, + paperFooter: 842, + printElements: [ + { + options: { + left: 12, + top: 12, + height: 430, + width: 566, + formatter: `function(t, e, d) { +var html = \` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
入职信息登记表
入职部门:\\\${d.department}入职岗位:\\\${d.position}填表时间:\\\${d.form_date}
姓名\\\${d.pInfo.name}性别\\\${d.pInfo.gender}出生年月\\\${d.pInfo.birth_date}贴照片处
籍贯\\\${d.pInfo.place_of_birth}民族\\\${d.pInfo.ethnicity}政治面貌\\\${d.pInfo.political_affiliation}
文化程度\\\${d.pInfo.education_level}专业\\\${d.pInfo.major}毕业时间\\\${d.pInfo.graduation_year}
身高\\\${d.pInfo.height}体重\\\${d.pInfo.weight}血型\\\${d.pInfo.blood_type}
家庭住址\\\${d.pInfo.address}
联系电话\\\${d.pInfo.phone}电子邮箱\\\${d.pInfo.email}
期望薪资\\\${d.pInfo.expected_salary}到岗时间\\\${d.pInfo.availability}
语言能力普通话\\\${d.pInfo.mandarin_level}外语\\\${d.pInfo.foreign_language_level}
其他
\` + +// ! 这里的处理很关键 +if (d) { + return html.replace(/\\$\{(\\S+)\}/g, (match, key) => { + return eval(key); + }); +} else { + return html; +} +// ! 这里的处理很关键 + }`, + }, + printElementType: { title: "html", type: "html" }, + }, + { + options: { + left: 12, + top: 460, + height: 45, + width: 566, + title: + "说明:此处模版使用 HTML 元素生成动态表格,方便实现自定义表格,减少拖拽生成表格的繁琐操作,你可以使用 www.lingdaima.com/table 对 EXCEL 进行转换,转换前既可在 excel 中预填字段 ${prop},模板 EXCEL: https://docs.qq.com/document/DUlFUYVh5aWVHVWZX", + }, + printElementType: { title: "说明", type: "longText" }, + }, + { + options: { + left: 12, + top: 505, + height: 24, + width: 566, + color: "#FF0000", + title: + "注意:www.lingdaima.com/table 提供的转换服务会一直转圈,但你仍可从 f12 网络面板中获取到转换后的 html 代码,你需要对转换后的 td 样式进行修改,并且需要转义 模版字符串 \\\\\\\${} 否知你将无法实现该 demo 效果!", + }, + printElementType: { title: "注意", type: "longText" }, + }, + ], + paperNumberLeft: 565.5, + paperNumberTop: 819, + paperNumberContinue: true, + watermarkOptions: {}, + }, + ], +}; +export default { + preview: preview, + name: name, + desc: desc, + author: author, + link: link, + printData: printData, + json: json, +};