当javascript中打印的数据只显示所选数据的一半时,解决方案是什么?

qv7cva1a  于 2023-01-29  发布在  Java
关注(0)|答案(1)|浏览(216)

我做了一个投票申请表,当选出13名候选人时,立即打印出来,但当打印出来时,只有一半的人的数据被打印出来
这是打印视图的一部分

<div id="view" style="width: 100%; height: 100%; position: fixed; top: 0; left: 0; visibility: hidden;">
            <div id="page" style="background-color: rgb(223, 223, 223); padding: 50px;">
            </div>
        </div>

这是选项的窗体视图的一部分

<div id="daftar" class="content content--top-navs">
                <form action="/pilihCalon" method="POST" class="grid grid-cols-8 gap-4 mt-5"> 
                    @csrf   
                    @foreach ($calon as $item)
                        <div class="col-span-1">
                            <input type="hidden" name="id" value="{{$pemilih->id}}">
                            <div class="file box rounded-md pt-8 pb-5 px-3 sm:px-5 relative zoom-in">
                                <div class="absolute left-0 top-0 mt-3 ml-3">
                                    <input onchange="inputPilihan('{{$item->id}}', '{{$item->nama}}', '{{$item->jabatanSebelum}}', '{{$item->daerahAsal}}', '{{$item->noCalon}}')" class="form-check-input border border-gray-500 oop" type="checkbox" name="daftar_calon_id[]" value="{{$item->id}}">
                                </div>
                                <div class="w-10/12 mx-auto">
                                    <img src="{{ asset('storage/daftarCalon/'.$item->foto) }}">
                                </div>
                                <div class="block font-medium mt-4 text-center truncate">{{$item->nama}}</div> 
                            </div>
                        </div>
                    @endforeach
                    <button id="btn" onclick="cetak();" class="btn btn-primary text-white w-40 h-12 mt-5 hidden" type="submit">Selesai</button>
                </form>    
        </div>

这是打印函数'var pilihan = []的一部分;

function inputPilihan (id, nama, jabatanSebelum, daerahAsal, noCalon) {
            // pilihan[id] = [nama, jabatanSebelum, daerahAsal, noCalon];
            pilihan[id] = {nm : nama, jabatan : jabatanSebelum, daerah : daerahAsal, no : noCalon};
        }

        function cetak() {
            document.getElementById('daftar').style.visibility = "hidden";
            document.getElementById('view').style.visibility = "visible";
            document.getElementById('page').innerHTML = '';
            pilihan.forEach(element => {
                document.getElementById('page').innerHTML += '<div style="display: inline-flex;"><div><p style="text-align: center;">'+element.nm+'</p>';
                document.getElementById('page').innerHTML += "<p>"+element.jabatan+"</p>";
                document.getElementById('page').innerHTML += "<p>"+element.daerah+"</p></div>";
                document.getElementById('page').innerHTML += "<div style='text-align: right; style='font-size: 64px; font-weight: 800; padding: 10px; background-color: rgb(235, 235, 235); margin: 0px 0px 20px 30px;'>"+element.no+"</div></div>";
            });
            print(document.getElementById('page').innerHTML);

        }
        

    </script>

'
希望能找到解决问题的办法

46scxncf

46scxncf1#

尝试删除位置固定部分,顶部= 0,左侧= 0和高度,因此值为0。
像这样

<div id="view" style="width: 100%; height: 0; visibility: hidden;">
        <div id="page" style="padding: 50px;">
        </div>
    </div>

在打印函数中添加此内容

document.getElementById('daftar').style.height = "100%";

相关问题