时间戳

首页 > 解决方案 > 在打印页面底部对齐 div

javascript - 在打印页面底部对齐 div

问题描述

我正在使用 ajax 从数据库中获取数据。在这个数据中，我有一个textarea我想在每一页的底部对齐的，每个textarea都有不同的数据。我试过CSS positions了，它只适用于第一页，因为我在每个页面中都有不同的数据textarea。

var response = {
row1: [{
    group: 'Group A'
}],
row2: [{
        team: 'Team A',
        player: 'Jema',
        result: 43,
        note: 'won'
    },
    {
        team: 'Team B',
        player: 'Deno',
        result: 34,
        note: 'lost'
    },
    {
        team: 'Team B',
        player: 'Niob',
        result: 56,
        note: 'lost'
    },
    {
        team: 'Team B',
        player: 'Skion',
        result: 49,
        note: 'lost'
    },
],
};


var teams = {}
let count = -1;

response.row2.forEach(e => {
    if (!(e.team in teams)) {
        count++;
        teams[e.team] = ["", e.note];
    }
    teams[e.team][0] += "<tr><td>" + e.player + "<td><input type='text' value='" + e.result + "'></td></tr>";
})

var table = "";

console.log(teams)

for (let team in teams) {
    table += '<h2 class="group" style="border: 1px solid black">' + 
response.row1[0].group + '</h2>'
table += '<table class="table bordered"><thead><th>Name</th><th>Result</th> 
   </thead></tbody>';
    table += '<tr colspan="2" ><td>' + team + '</td></tr>';

    table += teams[team][0];

    table += '<div class="notesFooter"><textarea class="note">' + 
catg[category][1] + '</textarea></div>';

    table += '</tbody></table>';

    if (count) table += "<div class='break'></div>"

    count--;

}

$("#print").html(table);

var PrintThis = document.getElementById('print');
var PrintStyle = '<style type="text/css">' +
    '@media print{' +
    '.break { page-break-after: always }' +
    '}' +
    '</style>';
PrintStyle += PrintThis.innerHTML;
myWin = window.open("");
myWin.document.write(PrintStyle);
myWin.print();
myWin.close();

Js小提琴

标签： javascriptjquerycss

解决方案

在https://jsfiddle.net/ob30p19d/6/中 提供div之前做一个 我希望它会帮助你。textareastyle="min-height: 800px; max-height: 800px">

推荐阅读