使用vue-html2pdf 去实现

### 使用 `vue-html2pdf` 实现导出 PDF 的功能

#### 安装依赖包
为了使用 `vue-html2pdf` 插件，在 Vue 项目中需先安装此插件。可以通过 npm 或 yarn 来完成安装。

npm install vue-html2pdf --save

或者

yarn add vue-html2pdf

#### 引入并注册组件
在需要使用的 Vue 组件内引入 `vue-html2pdf` 并将其作为子组件注册：

import VueHtml2pdf from 'vue-html2pdf'

export default {
  components: { 
    VueHtml2pdf,
  },
}

#### 配置参数与模板结构
接下来定义用于渲染成 PDF 的 HTML 结构以及传递给 `vue-html2pdf` 的配置项，这些可以放在 `<template>` 中的一个容器里，并通过 props 将其传送给 `VueHtml2pdf` 组件。

<template>
  <div id="app">
    <!-- 要转换为PDF的内容 -->
    <section ref="contentToConvert">
      <h1>这是要转成PDF的部分</h1>
      <p>一些描述性的文字...</p>
    </section>

    <!-- pdf导出按钮 -->
    <button @click="generatePdf">点击生成PDF</button>

    <!-- vue-html2pdf组件实例化 -->
    <vue-html2pdf
        :show-layout="false"
        :float-layout="true"
        :enable-download="true"
        :preview-modal="true"
        :paginate-elements-by-height="1400"
        filename="sample-filename"
        :pdf-quality="2"
        :manual-pagination="true"
        pdf-format="a4"
        pdf-orientation="portrait"
        pdf-content-width="800px"
        ref="html2Pdf"
    >
      <section slot="pdf-content" style="padding-bottom: 5%;">
          <img src="@/assets/logo.png"/>
          <br/>
          <span v-for="(item, index) in items" :key="index">{{ item }}</span>
      </section>
    </vue-html2pdf>
  </div>
</template>

上述代码片段展示了如何创建一个简单的界面来展示待转化的内容，并提供了一个触发 PDF 创建过程的按钮[^1]。

#### 方法编写
最后一步是在脚本部分添加处理逻辑以便当用户单击按钮时调用 `vue-html2pdf` 提供的方法来进行实际的 PDF 文件生成操作。

methods: {
  generatePdf() {
    this.$refs.html2Pdf.generatePdf()
  }
},
data(){
  return{
    items:[ "Item 1", "Item 2", "Item 3"]
  }
}

这段 JavaScript 代码实现了监听按钮事件的功能，一旦被激活就会执行 `generatePdf()` 函数，进而调用了由 `vue-html2pdf` 注册好的 API 接口去启动整个文档编译流程[^4]。