vue实现分页列表打印
Vue 实现分页列表打印
分页功能实现
使用 v-for 渲染列表数据，结合计算属性实现分页逻辑。示例代码：
<template>
<div>
<ul>
<li v-for="item in paginatedData" :key="item.id">{{ item.name }}</li>
</ul>
<button @click="prevPage" :disabled="currentPage === 1">上一页</button>
<span>{{ currentPage }} / {{ totalPages }}</span>
<button @click="nextPage" :disabled="currentPage === totalPages">下一页</button>
</div>
</template>
<script>
export default {
data() {
return {
items: [], // 从API获取的数据
currentPage: 1,
itemsPerPage: 10
};
},
computed: {
paginatedData() {
const start = (this.currentPage - 1) * this.itemsPerPage;
const end = start + this.itemsPerPage;
return this.items.slice(start, end);
},
totalPages() {
return Math.ceil(this.items.length / this.itemsPerPage);
}
},
methods: {
prevPage() {
if (this.currentPage > 1) this.currentPage--;
},
nextPage() {
if (this.currentPage < this.totalPages) this.currentPage++;
}
}
};
</script>打印功能实现
通过浏览器原生打印API实现打印功能，结合CSS控制打印样式：
methods: {
printList() {
const printContent = document.getElementById('printable-area').innerHTML;
const originalContent = document.body.innerHTML;
document.body.innerHTML = printContent;
window.print();
document.body.innerHTML = originalContent;
}
}添加打印按钮和打印区域：
<button @click="printList">打印列表</button>
<div id="printable-area">
<h2>打印列表</h2>
<ul>
<li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>
</div>打印样式优化
在组件或全局CSS中添加打印样式，确保打印效果符合需求：
@media print {
body * {
visibility: hidden;
}
#printable-area, #printable-area * {
visibility: visible;
}
#printable-area {
position: absolute;
left: 0;
top: 0;
}
button {
display: none;
}
}分页打印控制
如果需要强制分页打印，可以在CSS中添加分页控制：
@media print {
li {
page-break-inside: avoid;
}
ul {
page-break-after: always;
}
}完整示例整合
将分页和打印功能整合到同一个组件中，确保用户可以先浏览分页数据，再打印完整列表或当前页数据。根据实际需求调整打印内容的选择逻辑。
