使用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]。