画模板地址hiprint.io/demo
引入的文件
<link href="./hiprint.css" rel="stylesheet" />
<link href="./print-lock.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script src="./hiprint.bundle.js"></script>
<script src="./jquery.hiwprint.js"></script>
模板
<!-- 添加一个div用于显示打印模板设置 -->
<div id="templateDesignDiv"></div>
打印
hiprintBtn(tableList, tableFlowList) {
console.log(tableList);
// 自定义画的模板
var template = {
panels: [
{
index: 0,
paperType: "A4",
height: 297,
width: 210,
paperHeader: 43.5,
paperFooter: 801,
printElements: [
{
options: { left: 121.5, top: 66, height: 213, width: 9 },
printElementType: { type: "vline" },
},
{
options: { left: 24, top: 66, height: 9, width: 541.5 },
printElementType: { type: "hline" },
},
{
options: { left: 565.5, top: 66, height: 213, width: 9 },
printElementType: { type: "vline" },
},
{
options: { left: 24, top: 66, height: 213, width: 9 },
printElementType: { type: "vline" },
},
{
options: {
left: 43.5,
top: 79.5,
height: 9.75,
width: 60,
title: "服务项目",
},
printElementType: { type: "text" },
},
{
options: { left: 310.5, top: 102, height: 36, width: 9 },
printElementType: { type: "vline" },
},
{
options: { left: 379.5, top: 102, height: 36, width: 9 },
printElementType: { type: "vline" },
},
{
options: { left: 24, top: 102, height: 9, width: 541.5 },
printElementType: { type: "hline" },
},
{
options: {
left: 51,
top: 115.5,
height: 9.75,
width: 43.5,
title: "供应商",
},
printElementType: { type: "text" },
},
{
options: {
left: 324,
top: 117,
height: 9.75,
width: 42,
title: "资金来源",
},
printElementType: { type: "text" },
},
{
options: { left: 24, top: 138, height: 9, width: 541.5 },
printElementType: { type: "hline" },
},
{
options: {
left: 51,
top: 153,
height: 9.75,
width: 42,
title: "采购预算",
},
printElementType: { type: "text" },
},
{
options: { left: 25.5, top: 174, height: 9, width: 541.5 },
printElementType: { type: "hline" },
},
{
options: {
left: 46.5,
top: 199.5,
height: 9.75,
width: 76.5,
title: "项目内容",
},
printElementType: { type: "text" },
},
{
options: {
left: 133.5,
top: 222,
height: 9.75,
width: 120,
title: "（角色）：" + tableList[0].applicant,
},
printElementType: { type: "text" },
},
{
options: {
left: 465,
top: 222,
height: 9.75,
width: 84,
title: dayjs(tableList[0].createTime).format(
"YYYY年MM月DD日"
),
},
printElementType: { type: "text" },
},
{
options: { left: 87, top: -34.5, height: 9.75, width: 120 },
printElementType: { type: "text" },
},
{
options: {
left: 133.5,
top: 78,
height: 9.75,
width: 415.5,
title: tableList[0].projectName,
},
printElementType: { type: "text" },
},
{
options: {
left: 133.5,
top: 117,
height: 9.75,
width: 163.5,
title: tableList[0].supplier,
},
printElementType: { type: "text" },
},
{
options: {
left: 393,
top: 115.5,
height: 9.75,
width: 156,
title: tableList[0].fundSource,
},
printElementType: { type: "text" },
},
{
options: {
left: 135,
top: 151.5,
height: 9.75,
width: 414,
title: tableList[0].procurementBufget,
},
printElementType: { type: "text" },
},
{
options: {
left: 135,
top: 183,
height: 34.5,
width: 414,
title: tableList[0].projectInfo,
},
printElementType: { type: "text" },
},
// 流程
{
options: {
left: 180.5,
top: 19.5,
height: 9.75,
width: 200,
title: "",
field: "title",
fontSize: 21,
},
printElementType: {
type: "text",
},
},
{
options: {
// 设置表格的位置和大小
left: 24,
top: 248,
height: 0,
width: 542,
tableBodyRowHeight: 30,
tableHeaderRowHeight: 0.00000000000001,
// tableHeaderRepeat: "none",
// 设置表格的字段和列名
// 可以使用columns属性设置每一列的标题和字段
// columns: [[{title: '审核流程', field: 'auditProcess'}, {title: '评论', field: 'comment'}, {title: '审核日期', field: 'auditDate'}]]
// 参考文档：http://hiprint.io/docs/element/table#columns
// 把三列用英文命名，可以使用以下的代码：
// columns: [[{title: 'Audit Process', field: 'auditProcess'}, {title: 'Comment', field: 'comment'}, {title: 'Audit Date', field: 'auditDate'}]]
// 注意：如果您想要显示表头，您需要设置showHeader属性为true
// showHeader: true 表示显示表头
// showHeader: false 表示不显示表头
// 参考文档：http://hiprint.io/docs/element/table#showheader
field: "table1",
columns: [
[
// 第一列，名为Audit Process
{
title: "", // 设置列标题为Audit Process
field: "auditProcess", // 设置列字段为auditProcess
width: "18.7%", // 设置列宽为15%
colspan: 1,
rowspan: 1,
align: "center",
checked: true,
titleStyle: "display:none",
},
// 第二列，名为Comment
{
title: "", // 设置列标题为Comment
field: "comment", // 设置列字段为comment
width: "50%", // 设置列宽为50%
colspan: 1,
rowspan: 1,
align: "left",
border: {
top: true, // 设置上边框为默认边框
right: false, // 设置右边框为不显示
bottom: true, // 设置下边框为默认边框
left: true, // 设置左边框为默认边框
},
checked: true,
formatter: function (value, row, index, options) {
console.log("111111", value);
return (
'<div style="text-align:left;white-space:pre-line">' +
value +
"</div>"
);
},
titleStyle: "display:none",
},
// 第三列，名为Audit Date
{
title: "", // 设置列标题为Audit Date
field: "auditDate", // 设置列字段为auditDate
width: "35%", // 设置列宽为35%
colspan: 1,
rowspan: 1,
align: "right",
border: {
left: false,
},
checked: true,
formatter: function (value, row, index, options) {
return (
'<div style="text-align:right;white-space:pre-line">' +
value +
"</div>"
);
},
titleStyle: "display:none",
},
],
],
},
// 设置元素类型为表格
printElementType: {
title: "", // 设置为空字符串表示不显示表头
type: "table",
},
},
],
},
],
};
// 动态数据模板，插入到上面模板中
var data = {
title: "服务项目采购申请表",
table1: [
// // 显示3行数据，第一列内容是审核，第二列内容是同意和刘某某，第三列内容是日期
// // 每一行数据都是一个json对象，包含每一列的字段和值
// // 参考文档：http://hiprint.io/docs/element/table#data
// {
// auditProcess: "初审",
// comment: "同意"+"\n"+"初审: 刘某某",
// auditDate: "\n 2023年10月01日",
// },
],
};
for (let i in tableFlowList) {
data.table1.push({
auditProcess: tableFlowList[i].name,
comment:
tableFlowList[i].reason +
"\n" +
tableFlowList[i].name +
":" +
tableFlowList[i].assigneeUser?.name,
auditDate: dayjs(tableFlowList[i].createTime).format(
"YYYY年MM月DD日"
),
});
}
// 初始化hiprint
hiprint.init();
// 创建一个hiprint模板对象
var hiprintTemplate = new hiprint.PrintTemplate({
template: template, // 模板json对象
settingContainer: "#templateDesignDiv", // 模板设置容器的id
});
hiprintTemplate.print(data); // data是打印数据的json对象 // 生成html代码，并显示在预览窗口中
var html = hiprintTemplate.getHtml(data);
// data是打印数据的json对象 $(‘#printArea’).html(html);
// printArea是预览窗口的id // 直接打印出来
hiprintTemplate.printByHtml(html); // html是生成的html代码
},
