fullcalendar插件日历导出

需求

对页面中的日历部分进行导出展示

方案一：使用日历插件的原生导出

经过查看日历组件的官网没有找到（不确定是没有还是没有，细细查看时间成本较高）PASS

方案二：使用canvas导出

对页面中的日历部分进行导出展示，支持图片导出

方案示例

首先安装需要的库：

npm install html2canvas jspdf

以下是使用 html2canvas 将 FullCalendar 视图截取为图片的代码。可以选择将截图下载为 PNG 格式，也可以结合 jsPDF 导出为 PDF。

import html2canvas from "html2canvas";
import jsPDF from "jspdf";

function exportCalendarAsImage() {
  const calendarElement = document.querySelector(".fc"); // FullCalendar 根元素

  if (!calendarElement) return;

  html2canvas(calendarElement, { scale: 2 }).then((canvas) => {
    const link = document.createElement("a");
    link.href = canvas.toDataURL("image/png");
    link.download = "calendar.png";
    link.click();
  });
}

function exportCalendarAsPDF() {
  const calendarElement = document.querySelector(".fc");

  if (!calendarElement) return;

  html2canvas(calendarElement, { scale: 2 }).then((canvas) => {
    const imgData = canvas.toDataURL("image/png");
    const pdf = new jsPDF("p", "mm", "a4");
    const imgWidth = 190;
    const imgHeight = (canvas.height * imgWidth) / canvas.width;

    pdf.addImage(imgData, "PNG", 10, 10, imgWidth, imgHeight);
    pdf.save("calendar.pdf");
  });
}

在模板中绑定按钮，用于触发导出功能

<template>
  <button @click="exportCalendarAsImage">导出为 PNG 图片</button>
  <button @click="exportCalendarAsPDF">导出为 PDF 文件</button>
  <FullCalendar /> <!-- 替换为你的 FullCalendar 组件 -->
</template>

<script setup lang="ts">
import { exportCalendarAsImage, exportCalendarAsPDF } from './path-to-your-export-function'
</script>