Vue组件开发-使用 html2canvas 和 jspdf 库实现PDF文件导出 设置页面大小及方向

在 Vue 项目中实现导出 PDF 文件、调整文件页面大小和页面方向的功能，使用 html2canvas 将 HTML 内容转换为图片，再使用 jspdf 把图片添加到 PDF 文件中。以下是详细的实现步骤和代码示例：

步骤 1：安装依赖

首先，在项目中安装 html2canvas 和 jspdf：

npm install html2canvas jspdf

步骤 2：创建 Vue 组件

以下是一个完整的 Vue 组件示例，包含导出 PDF、调整页面大小和方向的功能：

<template><div><!-- 选择页面大小的下拉框 --><select v-model="selectedPageSize"><option value="a4">A4</option><option value="a3">A3</option><option value="letter">Letter</option></select><!-- 选择页面方向的下拉框 --><select v-model="selectedPageOrientation"><option value="portrait">纵向</option><option value="landscape">横向</option></select><!-- 导出 PDF 的按钮 --><button @click="exportToPDF">导出为 PDF</button><!-- 需要导出为 PDF 的内容区域 --><div id="contentToExport"><h1>这是要导出为 PDF 的内容</h1><p>可以在这里添加更多文本、图片、表格等元素。</p></div></div>
</template><script>
// 引入 html2canvas 用于将 HTML 元素转换为 canvas 图像
import html2canvas from 'html2canvas';
// 引入 jsPDF 用于创建和保存 PDF 文件
import jsPDF from 'jspdf';export default {data() {return {// 存储用户选择的页面大小，默认为 A4selectedPageSize: 'a4',// 存储用户选择的页面方向，默认为纵向selectedPageOrientation: 'portrait'};},methods: {async exportToPDF() {// 获取需要导出为 PDF 的 HTML 元素const element = document.getElementById('contentToExport');try {// 使用 html2canvas 将 HTML 元素转换为 canvas 图像const canvas = await html2canvas(element);// 将 canvas 图像转换为 base64 编码的 PNG 图片数据const imgData = canvas.toDataURL('image/png');// 根据用户选择的页面大小和方向创建 jsPDF 实例const pdf = new jsPDF({orientation: this.selectedPageOrientation, // 页面方向unit: 'mm', // 单位为毫米format: this.selectedPageSize // 页面大小});// 获取 PDF 页面的宽度和高度const pdfWidth = pdf.internal.pageSize.getWidth();const pdfHeight = pdf.internal.pageSize.getHeight();// 计算图像的宽度和高度，使图像按比例适应页面const imgWidth = pdfWidth;const imgHeight = (canvas.height * imgWidth) / canvas.width;let heightLeft = imgHeight;let position = 0;// 将图像添加到第一页 PDFpdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);heightLeft -= pdfHeight;// 如果图像高度超过一页，进行分页处理while (heightLeft >= 0) {position = heightLeft - imgHeight;pdf.addPage();pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);heightLeft -= pdfHeight;}// 保存 PDF 文件，文件名为 exported.pdfpdf.save('exported.pdf');} catch (error) {// 捕获并打印导出过程中可能出现的错误console.error('导出 PDF 时出错:', error);}}}
};
</script><style scoped>
/* 为需要导出的内容区域添加样式 */
#contentToExport {padding: 20px;border: 1px solid #ccc;margin-top: 20px;
}
</style>

代码解释

1. 模板部分（<template>）：

   • 两个 select 元素分别用于选择页面大小和页面方向，通过 v-model 指令绑定到组件的数据 selectedPageSize 和 selectedPageOrientation。
   • 一个按钮，点击时触发 exportToPDF 方法进行 PDF 导出操作。
   • 一个 div 元素，其 id 为 contentToExport，该元素内的内容将被导出为 PDF。

2. 脚本部分（<script>）：

   • data 函数返回两个数据项，分别存储用户选择的页面大小和页面方向。
   • exportToPDF 方法是核心逻辑：
     • 使用 document.getElementById 获取要导出的 HTML 元素。
     • 调用 html2canvas 将 HTML 元素转换为 canvas 图像，并将其转换为 base64 编码的 PNG 图片数据。
     • 根据用户选择的页面大小和方向创建 jsPDF 实例。
     • 计算图像的宽度和高度，使其按比例适应页面。
     • 将图像添加到 PDF 中，如果图像高度超过一页，进行分页处理。
     • 最后使用 pdf.save 方法保存 PDF 文件。

3. 样式部分（<style>）：

   • 为 #contentToExport 元素添加了一些样式，使其在页面上有边框和内边距。

使用方法

将上述代码保存为一个 Vue 组件（例如 ExportPDF.vue），然后在其他组件中引入并使用：

<template><div><ExportPDF /></div>
</template><script>
import ExportPDF from './ExportPDF.vue';export default {components: {ExportPDF}
};
</script>