Vue.js中动态生成PDF教程：基于现有数据和设计实现高效输出

npm install vue-html2pdf
# 或者
yarn add vue-html2pdf

<template>
  <div>
    <!-- 表单用于收集数据 -->
    <form @submit.prevent="generatePdf">
      <input type="text" v-model="name" placeholder="姓名" />
      <input type="text" v-model="expiry" placeholder="有效期" />
      <input type="file" @change="handleImageUpload" />
      <button type="submit">生成PDF</button>
    </form>

    <!-- vue-html2pdf 组件，用于包装需要转换为PDF的内容 -->
    <vue-html2pdf
      :show-layout="false"
      :float-layout="true"
      :enable-download="true"
      :preview-modal="true"
      :paginate-elements-by-height="1400"
      filename="my-dynamic-document"
      :pdf-quality="2"
      :manual-pagination="false"
      pdf-format="a4"
      pdf-orientation="portrait"
      pdf-content-width="800px"
      ref="html2Pdf"
    >
      <section slot="pdf-content">
        <!-- 这是需要转换为PDF的实际内容 -->
        <div class="pdf-template">
          <h1>动态生成文档</h1>
          <p>姓名: {{ name }}</p>
          <p>有效期: {{ expiry }}</p>
          <div v-if="imageUrl">
            @@##@@
          </div>
          <p>本文件是根据您提供的数据动态生成的。</p>
        </div>
      </section>
    </vue-html2pdf>
  </div>
</template>

<script>
import VueHtml2pdf from 'vue-html2pdf';

export default {
  components: {
    VueHtml2pdf
  },
  data() {
    return {
      name: '',
      expiry: '',
      imageUrl: null
    };
  },
  methods: {
    handleImageUpload(event) {
      const file = event.target.files[0];
      if (file) {
        const reader = new FileReader();
        reader.onload = (e) => {
          this.imageUrl = e.target.result; // 将图片转换为Base64编码
        };
        reader.readAsDataURL(file);
      }
    },
    generatePdf() {
      // 触发PDF生成
      this.$refs.html2Pdf.generatePdf();
    }
  }
};
</script>

<style scoped>
.pdf-template {
  padding: 20px;
  font-family: Arial, sans-serif;
  border: 1px solid #eee;
  min-height: 297mm; /* A4 height for better preview */
  box-sizing: border-box;
}
</style>

npm install jspdf
# 或者
yarn add jspdf

<template>
  <div>
    <form @submit.prevent="generateJsPdf">
      <input type="text" v-model="name" placeholder="姓名" />
      <input type="text" v-model="expiry" placeholder="有效期" />
      <input type="file" @change="handleImageUpload" />
      <button type="submit">生成JS PDF</button>
    </form>
  </div>
</template>

<script>
import { jsPDF } from 'jspdf';

export default {
  data() {
    return {
      name: '',
      expiry: '',
      imageUrl: null // Base64 image data
    };
  },
  methods: {
    handleImageUpload(event) {
      const file = event.target.files[0];
      if (file) {
        const reader = new FileReader();
        reader.onload = (e) => {
          this.imageUrl = e.target.result; // 将图片转换为Base64编码
        };
        reader.readAsDataURL(file);
      }
    },
    async generateJsPdf() {
      const doc = new jsPDF();

      // 添加文本
      doc.setFontSize(22);
      doc.text("动态生成文档", 20, 20); // x, y 坐标

      doc.setFontSize(12);
      doc.text(`姓名: ${this.name}`, 20, 40);
      doc.text(`有效期: ${this.expiry}`, 20, 50);

      // 添加图片
      if (this.imageUrl) {
        // 图片的宽度和高度，以及在PDF中的x, y坐标
        // 假设图片宽度为50mm，高度为50mm，从(20, 60)开始
        doc.addImage(this.imageUrl, 'JPEG', 20, 60, 50, 50);
      }

      doc.text("本文件是根据您提供的数据动态生成的。", 20, 120);

      // 保存PDF
      doc.save("my-jspdf-document.pdf");
    }
  }
};
</script>

// 示例：将背景图片添加到PDF
// 假设 'templateImageBase64' 是你的PDF背景模板的Base64编码
doc.addImage(templateImageBase64, 'JPEG', 0, 0, doc.internal.pageSize.getWidth(), doc.internal.pageSize.getHeight());
// 然后在上面添加你的动态内容
doc.text(`姓名: ${this.name}`, 50, 80); // 调整坐标以适应背景模板