vue+elementui使用print-js循环打印表格，并自定义打印纸张的宽度和高度

在Vue.js项目中结合Element UI和Print.js库实现循环打印表格并且自定义纸张大小，首先你需要安装这两个依赖：

npm install vue-element-ui print-js

然后，在你的Vue组件中，可以按照以下步骤操作：

1. 引入所需的库：

import ElementUI from 'element-ui';
import Vue from 'vue';
import PrintJS from 'print-js'; // 导入Print.js

Vue.use(ElementUI);

2. 定义页面数据结构，包括表格数据和自定义纸张尺寸：

data() {
  return {
    tableData: [
      ... // 你的表格数据数组
    ],
    paperSize: { width: '210mm', height: '297mm' } // 可自定义的纸张尺寸
  };
},

3. 创建一个打印方法，这里我们假设表格是一个`el-table`元素：

methods: {
  async printTable() {
    const tables = document.querySelectorAll('.your-table-class'); // 替换为你表格的实际选择器

    for (let i = 0; i < tables.length; i++) {
      await PrintJS.from(tables[i]).saveAs('custom_' + i); // 保存每个表格为PDF
      this.printPdf(i); // 自定义打印方法，打印第i个PDF
    }
  },
  
  async printPdf(index) {
    const printDoc = new PrintJS.Document({
      type: PrintJS.DocumentType.PDF,
      pages: `custom_${index}.pdf`, // 使用自定义的PDF文件名
      pageSize: this.paperSize, // 设置纸张尺寸
      landscape: true, // 如果需要横版打印
    });

    await printDoc.print();
  }
}

4. 在模板中渲染表格并添加打印按钮：

<template>
  <div>
    <el-table :data="tableData" class="your-table-class"></el-table> <!-- 表格 -->
    <button @click="printTable">批量打印</button>
  </div>
</template>

<style scoped>
.your-table-class {
  /* 如果有样式需求，添加在这里 */
}
</style>

当你点击“批量打印”按钮时，会依次对每个表格进行打印，同时按照你设置的自定义纸张尺寸。