基于 Vue 3 的PDF和Excel导出

news2025/3/29 22:37: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 元素渲染成 Canvas
  const 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 文件在外观和布局上的效果。

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