基于 Vue 3 的PDF和Excel导出

以下是基于 Vue 3 Composition API 的完整实现，包括 PDF 和 Excel 导出。

一、PDF 导出 (Vue 3)

安装依赖

在项目中安装相关库：

npm install html2canvas jspdf

Vue 3 代码实现

说明

1. ref() 用于定义模板中的 DOM 引用。
2. html2canvas 将 DOM 渲染为 Canvas，支持跨域图片加载。
3. jspdf 创建 PDF 文件。
4. pdf.addImage() 添加图像，pdf.save() 触发保存。

---

二、Excel 导出 (Vue 3)

安装依赖

安装相关 Excel 生成和下载工具：

npm install xlsx file-saver

Vue 3 代码实现

说明

1. ref() 定义响应式数据。
2. XLSX.utils.json_to_sheet() 将 JSON 转换为 Excel 工作表。
3. XLSX.utils.book_new() 创建新的 Excel 文件。
4. file-saver 生成文件并触发浏览器下载。

---

三、分页生成 PDF（处理多页情况）

在 PDF 内容过长超出单页时，可以通过分页处理：

const imgHeight = (canvas.height * imgWidth) / canvas.width;
let position = 0;

pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);

while (position + imgHeight < canvas.height) {
  position -= 297; // A4 高度
  pdf.addPage();
  pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
}

---

四、Excel 单元格格式优化

可以通过设置 cellStyles 控制单元格格式和宽度：

const worksheet = XLSX.utils.json_to_sheet(tableData.value);

// 设置列宽
worksheet['!cols'] = [{ wch: 20 }, { wch: 30 }];

// 设置字体、对齐方式
worksheet['A1'].s = {
  font: { bold: true, color: { rgb: 'FF0000' } },
  alignment: { horizontal: 'center' },
};

这部分代码涉及对 Excel 文件中 单元格的格式和宽度 进行设置，目的是在生成的 Excel 文件中对表格显示效果进行优化，提升可读性和专业性，简单来说，提升导出后文件的美观性。虽然即使不设置这些格式，基本的数据导出功能也可以正常工作，但设置格式后可以显著提升导出的 Excel 文件在外观和布局上的效果。 

默认格式往往存在以下问题：

• 列宽可能过窄，导致内容被截断。
• 字体默认是常规字体，无法突出重点信息。
• 内容默认左对齐，缺乏视觉层次感。

---

五、常见问题及解决

1. HTML2Canvas 截图为空白或内容不完整

• 确认 DOM 元素已在渲染后再进行截图。
• 如果存在跨域图片，需配置 useCORS: true。

---

2. Excel 文件下载后打开报错

• 确认生成的二进制数据完整。
• 确认 Blob 格式为 application/octet-stream。

---

六、最佳实践

• PDF 适用于导出完整页面（包括图表和布局）。
• Excel 适用于导出结构化数据（如表格、JSON）。
• 分页导出适用于数据量较大的情况。