115 lines
3.5 KiB
TypeScript
115 lines
3.5 KiB
TypeScript
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();
|
|
}
|
|
}
|