基于 Vue 3 的PDF和Excel导出

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

一、PDF 导出 (Vue 3)

安装依赖

在项目中安装相关库：

npm install html2canvas jspdf

Vue 3 代码实现

<template><div><div ref="pdfContent" class="pdf-content"><h1>导出为 PDF 示例</h1><table border="1"><tr><th>序号</th><th>名称</th><th>数量</th></tr><tr v-for="(item, index) in tableData" :key="index"><td>{{ index + 1 }}</td><td>{{ item.name }}</td><td>{{ item.count }}</td></tr></table></div><button @click="downloadPDF">导出 PDF</button></div>
</template><script setup>
import { ref } from 'vue';
import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';const pdfContent = ref(null);const tableData = ref([{ name: '数据1', count: 10 },{ name: '数据2', count: 20 },{ name: '数据3', count: 30 },
]);const downloadPDF = async () => {const element = pdfContent.value;// 使用 html2canvas 将 DOM 元素渲染成 Canvasconst canvas = await html2canvas(element, {scale: 2, // 提高清晰度useCORS: true,});const imgData = canvas.toDataURL('image/png');const pdf = new jsPDF('p', 'mm', 'a4'); // 定义 PDF 尺寸和方向const imgWidth = 210; // A4 纸宽度 (mm)const imgHeight = (canvas.height * imgWidth) / canvas.width;pdf.addImage(imgData, 'PNG', 0, 0, imgWidth, imgHeight);pdf.save('export.pdf');
};
</script><style scoped>
.pdf-content {padding: 20px;background-color: #fff;
}
</style>

说明

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 代码实现

<template><div><table border="1"><tr><th>序号</th><th>名称</th><th>数量</th></tr><tr v-for="(item, index) in tableData" :key="index"><td>{{ index + 1 }}</td><td>{{ item.name }}</td><td>{{ item.count }}</td></tr></table><button @click="exportExcel">导出 Excel</button></div>
</template><script setup>
import { ref } from 'vue';
import * as XLSX from 'xlsx';
import { saveAs } from 'file-saver';const tableData = ref([{ name: '数据1', count: 10 },{ name: '数据2', count: 20 },{ name: '数据3', count: 30 },
]);const exportExcel = () => {const worksheet = XLSX.utils.json_to_sheet(tableData.value);const workbook = XLSX.utils.book_new();XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');// 生成 Excel 文件的二进制数据const excelBuffer = XLSX.write(workbook, {bookType: 'xlsx',type: 'array',});// 创建 Blob 并触发下载const blob = new Blob([excelBuffer], {type: 'application/octet-stream',});saveAs(blob, 'export.xlsx');
};
</script>

说明

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）。
• 分页导出适用于数据量较大的情况。