vue 如何进行表格多页打印
如何点击打印，表格的数据可以全部打印出来，形成多页，我在别的地方写可以打印多页，但是在这里不得行，为啥
<template>
<div class="film-oa m-1 processScheduling">
<div class="craftTahttps://img-mid.csdnimg.cn/release/static/image/mid/ask/525527162466132.png "#left")
ble">
<div class="btn p-1 ms-1">
<a-button type="primary" size="small" @click="doPrint">打印</a-button>
</div>
<!-- <div class="table_container"> -->
<div ref="printHtml">
<div class="wraper">
<!-- <div class="header" v-show="isshowHeader">{{useStore.curLine.id==1? '一':'二'}}线生产工艺单</div> -->
<div class="table_container">
<table border="1px" cellspacing="0" class="text-center">
<thead>
<tr>
<th rowspan="2">1</th>
<th rowspan="2" class="SecondTd">2</th>
<th rowspan="2">3</th>
<th rowspan="2">4</th>
<th rowspan="2">5</th>
<th rowspan="2">6</th>
<th rowspan="2">7</th>
<th rowspan="2">8</th>
<th rowspan="2" style="min-width:55px">9</th>
<th rowspan="2" style="min-width:55px">10</th>
<th rowspan="2">11</th>
<th rowspan="2">12</th>
<th rowspan="2">13</th>
<th rowspan="2">14</th>
<th rowspan="2">16</th>
<th rowspan="2">17</th>
<th rowspan="2">18</th>
<th rowspan="2">19</th>
<th colspan="2">20</th>
<th rowspan="2">21</th>
<th rowspan="2">22</th>
<th rowspan="2">24</th>
</tr>
<tr>
<th>12</th>
<th>12</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in 100" :key="index">
<td class="firstTd">fdsa</td>
<td class="SecondTd">gfdg</td>
<td>gfhfd</td>
<td>fsdf</td>
<td>fsaf</td>
<td>re</td>
<td>fsadf</td>
<td>gsfd</td>
<td>da</td>
<td>hhsdh</td>
<td>fsgda</td>
<td>hdh</td>
<td>hfdghfh</td>
<td>tsadg</td>
<td>gfdhfgd</td>
<td>hfghf</td>
<td>afdgs</td>
<td>sagsg</td>
<td colspan="2">
<div style="display:flex">
<div style="width:50%;border-right:1px solid #eee">111</div>
<div style="width:50%">111</div>
</div>
</td>
<td>fsadfs</td>
<td>fdfsf</td>
<td>fsdafas</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- </div> -->
</div>
</div>
</template>
<script setup lang="ts">
import { nextTick, onMounted, reactive, ref, toRaw, watch } from "vue";
//打印
const isShowOperation = ref<boolean>(true);
const isshowHeader = ref<boolean>(false);
const printHtml = ref();
const doPrint = () => {
nextTick(() => {//在这里打印
let bodyHtml = window.document.body.innerHTML;
window.document.body.innerHTML = printHtml.value.innerHTML;
window.print();
window.document.body.innerHTML = bodyHtml;
window.location.reload();
});
}
</script>
<style scoped lang="less">
.craftTable {
width: 100%;
margin: auto;
background-color: #fff;
height: calc(100vh - 65px);
.table_container {
width: 1850px;
height: calc(100vh - 110px);
margin: auto;
overflow: scroll;
}
.header {
width: 1816px;
border: 1px solid #eee;
height: 40px;
margin: auto;
text-align: center;
line-height: 40px;
font-size: 20px;
font-weight: bolder;
}
table {
// table-layout: fixed;
border: none;
border-collapse: collapse;
background: #fff;
text-align: center;
thead {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 3;
tr {
color: #484848;
font-weight: bold;
th {
background-color: #B8E9FF;
min-width: 60px;
}
}
}
}
tbody {
tr {
cursor: pointer;
td {
min-width: 60px;
position: -webkit-sticky;
position: sticky;
padding: 0px;
}
td.last_td {
background-color: #D5F2FF;
font-weight: bold;
right: 0;
z-index: 3;
}
}
}
input,
.ant-input-number {
border-color: #F45454;
width: 100%;
}
.icon {
line-height: 20px;
position: relative;
.cancel,
.edit,
.submit,
.save,
.cancelEdit {
cursor: pointer;
}
}
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
// /*定义滚动条轨道
// 内阴影+圆角*/
::-webkit-scrollbar-track {
background-color: #E7EEF2;
}
// /*定义滑块
// 内阴影+圆角*/
::-webkit-scrollbar-thumb {
background-color: #D7E0E7;
}
.layer{
border: none;
border-right: 1px solid var(--xp-gray-e);
}
}
.processScheduling {
.SecondTd {
width: 6%;
}
th:nth-child(11),
td:nth-child(11) {
width: 4%;
}
th:nth-child(14),
td:nth-child(14) {
width: 8%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
th:nth-child(15),
td:nth-child(15) {
width: 8%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
th:nth-child(16),
td:nth-child(16) {
width: 8%;
}
th:nth-child(19),
td:nth-child(19) {
width: 10%;
}
th:nth-child(20),
td:nth-child(20) {
width: 8%;
}
th:nth-child(21),
td:nth-child(21) {
width: 8%;
}
th:nth-child(22),
td:nth-child(22) {
width: 8%;
}
}
.wraper table thead tr th,
.wraper table tr td {
// white-space: nowrap;
font-size: 12px;
}
</style>
测试了没问题，延时打印试试
const doPrint = () => {
nextTick(() => {//在这里打印
let bodyHtml = window.document.body.innerHTML;
window.document.body.innerHTML = printHtml.value.innerHTML;
setTimeout(() => {
window.print();
//window.document.body.innerHTML = bodyHtml;//这句没必要
window.location.reload();
}, 200)
});
}
是不是由于你的数据不够导致的。
您好，我是有问必答小助手，您的问题已经有小伙伴帮您解答，感谢您对有问必答的支持与关注！PS：问答VIP年卡 【限时加赠：IT技术图书免费领】，了解详情>>> https://vip.csdn.net/askvip?utm_source=1146287632