Vue 多条数据连续打印 PDF 实现指南

要实现多条数据连续打印 PDF，可以使用以下步骤：

准备数据：将要打印的多条数据准备好，可以使用数组或对象的形式存储。
创建打印模板：使用 HTML 和 CSS 创建一个打印模板，可以使用 Vue 的模板语法来动态渲染数据。
使用 jsPDF 库生成 PDF：使用 jsPDF 库来生成 PDF 文件。你可以通过 npm 安装该库，并在 Vue 组件中引入。

npm install jspdf


4. 通过循环遍历数据，依次生成 PDF：在 Vue 组件中，使用循环遍历数据，每次渲染一个数据项到打印模板中，并调用 jsPDF 库的相关方法将当前模板内容生成为 PDF。

```javascript
import jsPDF from 'jspdf';

export default {
  methods: {
    printPDF() {
      const doc = new jsPDF();
      const data = ['data1', 'data2', 'data3']; // 你的数据

      data.forEach((item, index) => {
        // 渲染数据到打印模板
        const template = `
          <div>
            <h1>'${item}'</h1>
          </div>
        `;

        // 将模板内容添加到 PDF 中
        doc.text(template, 10, 10 + index * 50);

        // 添加分页符（可选）
        if (index < data.length - 1) {
          doc.addPage();
        }
      });

      // 保存或打印生成的 PDF
      doc.save('print.pdf');
    }
  }
}

在 Vue 组件中调用打印方法：在需要打印的地方调用打印方法。

<template>
  <div>
    <button @click="printPDF">打印 PDF</button>
  </div>
</template>

通过以上步骤，你就可以实现多条数据连续打印 PDF。每次循环都会生成一个新的页面，并将数据渲染到打印模板中，最终生成一个包含所有数据的 PDF 文件。