当前位置：首页 > news >正文

基于 Vue 3 的PDF和Excel导出

news 2025/3/26 17:57:25

以下是基于 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>

说明

ref() 用于定义模板中的 DOM 引用。
html2canvas 将 DOM 渲染为 Canvas，支持跨域图片加载。
jspdf 创建 PDF 文件。
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>

说明

ref() 定义响应式数据。
XLSX.utils.json_to_sheet() 将 JSON 转换为 Excel 工作表。
XLSX.utils.book_new() 创建新的 Excel 文件。
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 文件在外观和布局上的效果。

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