张宇 发表于 2026-1-13 10:10:47

咨询管理yua可以实现一个datatable表格每一行生成一张表

可以实现一个datatable表格每一行生成一张表进行打印么

我有一个datatable表格，里面有40个字段，每行要对应一个审核表格进行打印，这样打印的话应该不算是批量打印了，而是一次性生成所有需要打印的审核表在一个文档，直接打印的话应该可以做到一个表格一张纸把，想问下管理大大这种的如何操作，如何把datatable中的数据赋值到打印模版中

Havoc-Wei 发表于 2026-1-13 10:49:03

可以搭配如下css使用，把你每一行的数据所在的div给指定为一个纸张


@page {
        margin: 0
}

body {
        margin: 0
}

.sheet {
        margin: 0;
        overflow: hidden;
        position: relative;
        box-sizing: border-box;
        page-break-after: always;
}

/** Paper sizes **/
body.A3 .sheet {
        width: 297mm;
        height: 419mm;
        box-sizing: border-box !important;
}

body.A3.landscape .sheet {
        width: 420mm;
        height: 296mm;
        box-sizing: border-box !important;
}

body.A4 .sheet {
        width: 210mm;
        height: 296mm;
        box-sizing: border-box !important;
}

body.A4.landscape .sheet {
        width: 297mm;
        height: 209mm;
        box-sizing: border-box !important;
}

body.A5 .sheet {
        width: 148mm;
        height: 209mm;
        box-sizing: border-box !important;
}

body.A5.landscape .sheet {
        width: 210mm;
        height: 147mm;
        box-sizing: border-box !important;
}

body.letter .sheet {
        width: 216mm;
        height: 279mm;
        box-sizing: border-box !important;
}

body.letter.landscape .sheet {
        width: 280mm;
        height: 215mm;
        box-sizing: border-box !important;
}

body.legal .sheet {
        width: 216mm;
        height: 356mm;
        box-sizing: border-box !important;
}

body.legal.landscape .sheet {
        width: 357mm;
        height: 215mm;
        box-sizing: border-box !important;
}

/** Padding area **/
.sheet.padding-10mm {
        padding: 10mm
}

.sheet.padding-15mm {
        padding: 15mm
}

.sheet.padding-20mm {
        padding: 20mm
}

.sheet.padding-25mm {
        padding: 25mm
}

/** For screen preview **/
@media screen {
        body {
                background: #e0e0e0
        }

        .sheet {
                background: white;
                box-shadow: 0 .5mm 2mm rgba(0, 0, 0, .3);
                margin: 5mm auto;
        }
}

/** Fix for Chrome issue #273306 **/
@media print {
        body.A3.landscape {
                width: 420mm
        }

        body.A3,
        body.A4.landscape {
                width: 297mm
        }

        body.A4,
        body.A5.landscape {
                width: 210mm
        }

        body.A5 {
                width: 148mm
        }

        body.letter,
        body.legal {
                width: 216mm
        }

        body.letter.landscape {
                width: 280mm
        }

        body.legal.landscape {
                width: 357mm
        }
}

张宇 发表于 2026-1-14 10:29:17

Havoc-Wei 发表于 2026-1-13 10:49
可以搭配如下css使用，把你每一行的数据所在的div给指定为一个纸张




datatable中好像没有div吧，而且一行指定为一张A4纸只是表单的格式，而不是打印模板的格式，打印模板是一行生成一张表格，内容全部从表单中提取的，一个表格中的数字在datatable中的一行

Havoc-Wei 发表于 2026-1-14 11:01:30

张宇 发表于 2026-1-14 10:29
datatable中好像没有div吧，而且一行指定为一张A4纸只是表单的格式，而不是打印模板的格式，打印模板是一 ...

我的理解是，datatable的每一行都对应一张纸，是这意思吧？你可以遍历这个datatable，动态往打印表单中插入dom元素

张宇 发表于 2026-1-14 11:58:38

Havoc-Wei 发表于 2026-1-14 11:01
我的理解是，datatable的每一行都对应一张纸，是这意思吧？你可以遍历这个datatable，动态往打印表单中插 ...

可以这么理解，一张纸就是一个表格

Havoc-Wei 发表于 2026-1-14 17:43:59

张宇 发表于 2026-1-14 11:58
可以这么理解，一张纸就是一个表格

我的思路是，准备一个空白的表单作为打印表单，在表单的queryLoad里引入我提供的css，并给body指定纸张尺寸，然后在表单的afterLoad事件里，去遍历你的datatable表格，每一行都插入一个class为 sheet 的div，在这样就是每行一张纸了，在div.sheet里写你其它的结构和样式就可以

张宇 发表于 2026-1-16 10:07:36

Havoc-Wei 发表于 2026-1-14 17:43
我的思路是，准备一个空白的表单作为打印表单，在表单的queryLoad里引入我提供的css，并给body指定纸张尺 ...

我每一行出来的数据部能全部填完表格，表格还有很多需要计算的，我其实想在打印模板中来实现，每个需要填写的数据直接从对应的datatable中的数据中获取，根据行的数量来生成打印的页数，不然按照你的想法确实可以实现，但是需要把整个复杂的表格在js中画出来，而且部分数据需要从dropdownlist中传递得来，还有一部分需要固定下来，所以整个表格的样式非常复杂，我想尽量用最少得代码来实现这个功能

Havoc-Wei 发表于 2026-1-16 22:04:32

张宇 发表于 2026-1-16 10:07
我每一行出来的数据部能全部填完表格，表格还有很多需要计算的，我其实想在打印模板中来实现，每个需要填 ...

可以准备两个脚本，一个写html模板，一个写loadHtml的js方法，可以看下loadHtml的api
页: [1]
查看完整版本: 咨询管理yua可以实现一个datatable表格每一行生成一张表