一、print.js的引入和基本使用
http://m.itdecent.cn/p/37b20fd9918b
二、如何實(shí)現(xiàn)分頁(yè)行不被截?cái)嗲颐恳豁?yè)都有表頭
滿足以下前提
- 使用原生的table標(biāo)簽
- 媒體查詢print類(lèi)型
不了解媒體查詢參考鏈接 http://m.itdecent.cn/p/0374d7005915
打印預(yù)覽效果如下（行不截?cái)啵乱豁?yè)有表頭）
image.png
2.1、html部分
這里使用原生table標(biāo)簽
thead是分頁(yè)自動(dòng)加表頭的關(guān)鍵，，一定要寫(xiě)
我一直以為table里面的thead是沒(méi)有什么用的，只是一個(gè)標(biāo)簽語(yǔ)義化的意思，但是在需要用到打印table的時(shí)候，使用起來(lái)很方便，可以為下一頁(yè)自動(dòng)加表頭的關(guān)鍵。
<template>
<!-- ref綁定打印dom節(jié)點(diǎn)名稱(chēng) -->
<div ref="printArea" class="printAsset">
<table class="assetPrintTable">
<!-- 重點(diǎn)--一定要寫(xiě)thead -->
<thead>
<tr>
<th>資產(chǎn)編號(hào)</th>
<th>資產(chǎn)名稱(chēng)</th>
<th>Epc</th>
<th>規(guī)格型號(hào)</th>
<th>使用期限</th>
<th>存放區(qū)域</th>
<th>資產(chǎn)原值</th>
<th>登記時(shí)間</th>
<th>是否已發(fā)卡</th>
</tr>
</thead>
<tbody>
<tr v-for="item in dataList" :key="item.id">
<td>{{ item.number }}</td>
<td>{{ item.name }}</td>
<td>{{ item.epc }}</td>
<td>{{ item.specifications }}</td>
<td>{{ item.usedMonth }}</td>
<td>{{ item.fullName }}</td>
<td>{{ item.price }}</td>
<td>{{ item.registerTime }}</td>
<td>
<span v-if="item.epcBind == '0'">未發(fā)卡</span>
<span v-else-if="item.epcBind == '1'">已發(fā)卡</span>
</td>
</tr>
</tbody>
</table>
</div>
</template>
2.2、js部分
子組件methods
//print方法是在父組件觸發(fā)的
print() {
this.$nextTick(() => {
// 延遲到下次dom更新執(zhí)行
this.$print(this.$refs["printArea"], {
noPrint: ".noPrint",
type: "html",
onStart: () => {
console.log("打印開(kāi)始");
},
onEnd: () => {
console.log("打印完成");
},
});
});
},
父組件html
<!-- PrintAsset就是引入的子組件-->
<PrintAsset
:dataList="dataListPrint"
ref="printAsset"
v-show="showPrintAsset"
/>
父組件js（部分）
// 執(zhí)行打印方法
this.$refs["printAsset"].print();
2.3、子組件的css
-
@media print只在打印和打印預(yù)覽的時(shí)候生效 - 實(shí)現(xiàn)分頁(yè)，一行不被截?cái)嗟年P(guān)鍵
tr {
page-break-inside: avoid;
}
看一下這個(gè)css屬性的介紹
page-break-inside 屬性用于設(shè)置是否在指定元素中插入分頁(yè)符。
注意： 您不能對(duì)絕對(duì)定位的元素使用此屬性。
注意： 請(qǐng)盡可能少地使用分頁(yè)屬性，并且避免在表格、浮動(dòng)元素、帶有邊框的塊元素中使用分頁(yè)屬性。
auto：默認(rèn)。如果必要?jiǎng)t在元素內(nèi)部插入分頁(yè)符。
avoid：避免在元素內(nèi)部插入分頁(yè)符。
inherit：規(guī)定應(yīng)該從父元素繼承 page-break-inside 屬性的設(shè)置。
<style lang="scss">
// 媒體查詢print，只在打印和打印預(yù)覽的時(shí)候生效
@media print {
.printAsset {
width: 100%;
// 表格基本樣式
.assetPrintTable {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
border-left: 1px solid #e4e7ed;
border-top: 1px solid #e4e7ed;
// 實(shí)現(xiàn)分頁(yè)，行不撕裂的關(guān)鍵
tr {
page-break-inside: avoid;
}
// 單元格樣式
td,
th {
border-right: 1px solid #e4e7ed;
border-bottom: 1px solid #e4e7ed;
padding: 10px;
text-align: center;
}
//表頭添加背景色
th {
background-color: #f5f7fa;
}
}
}
}
</style>
三、總結(jié)
加入thead標(biāo)簽之后，分頁(yè)之后會(huì)自動(dòng)加表頭，還是要看項(xiàng)目中的實(shí)際需求，如果客戶不需要分頁(yè)表頭，就使用page-break-inside，防止行被截?cái)嗉纯伞?/p>
四、擴(kuò)展
在這次項(xiàng)目中，我是直接手寫(xiě)table，沒(méi)有使用el-table。雖然兩者里面都有包裹thead標(biāo)簽，但是el-table為了實(shí)現(xiàn)表頭浮動(dòng)，他把表頭信息與內(nèi)容信息是分為兩個(gè)div來(lái)寫(xiě)的，el-table在打印的時(shí)候不能讓每一頁(yè)都含有表頭，就需要在適當(dāng)?shù)臅r(shí)候操作dom節(jié)點(diǎn)了，在內(nèi)容的div里面添加表頭信息。
<el-table
:data="data"
ref="table"
>
</el-table>
<script>
export default {
mounted(){
this.$nextTick(() => {
//獲取el-table的thead dom節(jié)點(diǎn)
let thead = this.$refs.table.$el.querySelector('.el-table__header-wrapper thead');
//追加到el-table的內(nèi)容里去
this.$refs.table.$el.querySelector('.el-table__body-wrapper table').appendChild(thead)
})
}
}
</script>
<style>
/* 隱藏咱們dom操作添加的節(jié)點(diǎn)，不影響el-table原功能 */
.el-table .el-table__body-wrapper table thead{
display:none;
}
/* 在打印的時(shí)候隱藏el-table的表頭，開(kāi)放咱們dom操作添加的節(jié)點(diǎn) */
@media print{
.el-table .el-table__header-wrapper{
display:none;
}
.el-table .el-table__body-wrapper table thead{
display:table-header-group;
}
}
</style>
