load orgchart

src/plugins/exportChart.ts

@@ -0,0 +1,115 @@
+import domtoimage from "dom-to-image-more";
+import { PDFDocument } from "pdf-lib";
+
+/** ฟังก์ชันสำหรับแสดง loading spinner */
+export function showLoadingSpinner() {
+  const loading = document.createElement("div");
+  loading.id = "loading-spinner";
+  loading.style.position = "fixed";
+  loading.style.top = "0";
+  loading.style.left = "0";
+  loading.style.width = "100vw";
+  loading.style.height = "100vh";
+  loading.style.background = "rgba(0,0,0,0.2)";
+  loading.style.display = "flex";
+  loading.style.alignItems = "center";
+  loading.style.justifyContent = "center";
+  loading.style.zIndex = "9999";
+  loading.innerHTML = `
+    <div style="display:flex;flex-direction:column;align-items:center;">
+      <div style="
+        border: 8px solid #f3f3f3;
+        border-top: 8px solid #3498db;
+        border-radius: 50%;
+        width: 60px;
+        height: 60px;
+        animation: spin 1s linear infinite;
+      "></div>
+     
+    </div>
+    <style>
+      @keyframes spin {
+        0% { transform: rotate(0deg);}
+        100% { transform: rotate(360deg);}
+      }
+    </style>
+  `;
+  document.body.appendChild(loading);
+}
+
+/** ฟังก์ชันสำหรับซ่อน loading spinner */
+function hideLoadingSpinner() {
+  const loading = document.getElementById("loading-spinner");
+  if (loading) loading.remove();
+}
+
+/**
+ * ฟังก์ชันสำหรับ export โครงสร้างองค์กรเป็น PNG
+ * @param node HTMLElement ที่ต้องการ export เป็น PNG
+ */
+export async function exportChartToPNG(node: HTMLElement): Promise<void> {
+  if (node) {
+    try {
+      // สร้าง PNG จาก DOM ขนาดเต็ม
+      const imageData = await domtoimage.toPng(node, {
+        bgcolor: "#fff",
+        quality: 1,
+        width: node.scrollWidth,
+        height: node.scrollHeight,
+      });
+
+      const link = document.createElement("a");
+      link.download = "orgchart.png";
+      link.href = imageData;
+      link.click();
+    } catch (error: any) {
+      alert("Export ไม่สำเร็จ: " + error.message);
+    } finally {
+      hideLoadingSpinner();
+    }
+  }
+}
+
+/**
+ * ฟังก์ชันสำหรับ export โครงสร้างองค์กรเป็น PNG
+ * @param node HTMLElement ที่ต้องการ export เป็น PNG
+ */
+export async function exportChartToPDF(node: HTMLElement): Promise<void> {
+  // ใช้ scrollWidth/scrollHeight เพื่อขนาดเต็ม
+  const width = node.scrollWidth;
+  const height = node.scrollHeight;
+
+  try {
+    // สร้าง PNG จาก DOM ขนาดเต็ม
+    const imageData = await domtoimage.toPng(node, {
+      width,
+      height,
+      bgcolor: "#fff",
+    });
+    // สร้าง PDF ด้วย pdf-lib
+    const pdfDoc = await PDFDocument.create();
+    const page = pdfDoc.addPage([width, height]);
+    const pngImage = await pdfDoc.embedPng(imageData);
+    page.drawImage(pngImage, {
+      x: 0,
+      y: 0,
+      width,
+      height,
+    });
+    const pdfBytes = await pdfDoc.save();
+    // ดาวน์โหลด PDF
+    const blob = new Blob([pdfBytes], { type: "application/pdf" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = "orgchart.pdf";
+    a.click();
+    URL.revokeObjectURL(url);
+  } catch (err: any) {
+    alert("Export ไม่สำเร็จ: " + err.message);
+
+    console.error(err);
+  } finally {
+    hideLoadingSpinner();
+  }
+}