当前位置：首页 > VUE

vue实现分页列表打印

2026-01-23 02:08:58VUE

实现分页列表打印

在Vue中实现分页列表打印功能，可以通过以下步骤完成。需要结合分页逻辑和打印样式调整。

安装html2canvas和jspdf库

使用html2canvas将DOM元素转换为canvas，再通过jspdf生成PDF文件实现打印功能。

npm install html2canvas jspdf --save

分页列表组件

创建一个分页列表组件，包含数据分页逻辑和打印按钮。

<template>
  <div>
    <div ref="printContent">
      <div v-for="(item, index) in paginatedData" :key="index">
        {{ item.content }}
      </div>
    </div>
    <button @click="print">打印</button>
    <div>
      <button @click="prevPage" :disabled="currentPage === 1">上一页</button>
      <span>第 {{ currentPage }} 页 / 共 {{ totalPages }} 页</span>
      <button @click="nextPage" :disabled="currentPage === totalPages">下一页</button>
    </div>
  </div>
</template>

<script>
import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';

export default {
  data() {
    return {
      dataList: [], // 你的数据列表
      currentPage: 1,
      itemsPerPage: 10
    };
  },
  computed: {
    paginatedData() {
      const start = (this.currentPage - 1) * this.itemsPerPage;
      const end = start + this.itemsPerPage;
      return this.dataList.slice(start, end);
    },
    totalPages() {
      return Math.ceil(this.dataList.length / this.itemsPerPage);
    }
  },
  methods: {
    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--;
      }
    },
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage++;
      }
    },
    print() {
      html2canvas(this.$refs.printContent).then(canvas => {
        const imgData = canvas.toDataURL('image/png');
        const pdf = new jsPDF();
        pdf.addImage(imgData, 'PNG', 0, 0);
        pdf.save('print.pdf');
      });
    }
  }
};
</script>

打印样式调整

为打印内容添加CSS样式，确保打印效果符合预期。

@media print {
  body * {
    visibility: hidden;
  }
  #printContent, #printContent * {
    visibility: visible;
  }
  #printContent {
    position: absolute;
    left: 0;
    top: 0;
  }
}

分页打印控制

如果需要将整个列表分页打印，而不是仅打印当前页，可以修改打印方法。

printAllPages() {
  const pdf = new jsPDF();
  const element = this.$refs.printContent;
  const totalHeight = element.offsetHeight;
  const pageHeight = pdf.internal.pageSize.height - 20;
  let position = 0;

  html2canvas(element).then(canvas => {
    const imgData = canvas.toDataURL('image/png');
    let heightLeft = totalHeight;

    while (heightLeft > 0) {
      pdf.addImage(imgData, 'PNG', 10, position, 180, heightLeft > pageHeight ? pageHeight : heightLeft);
      heightLeft -= pageHeight;
      position -= pageHeight;

      if (heightLeft > 0) {
        pdf.addPage();
      }
    }

    pdf.save('all-pages.pdf');
  });
}