fix:export Chart
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
710e9fe7b3
commit
e632daa773
2 changed files with 124 additions and 46 deletions
|
|
@ -26,7 +26,7 @@
|
|||
"@tato30/vue-pdf": "^1.5.1",
|
||||
"@vuepic/vue-datepicker": "^3.6.3",
|
||||
"bma-org-chart": "^0.0.7",
|
||||
"dom-to-image-more": "^3.6.0",
|
||||
"html-to-image": "^1.11.13",
|
||||
"keycloak-js": "^20.0.2",
|
||||
"moment": "^2.29.4",
|
||||
"pdf-lib": "^1.17.1",
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import domtoimage from "dom-to-image-more";
|
||||
import * as htmlToImage from "html-to-image";
|
||||
import { PDFDocument } from "pdf-lib";
|
||||
|
||||
/** ฟังก์ชันสำหรับแสดง loading spinner */
|
||||
|
|
@ -10,11 +10,16 @@ export function showLoadingSpinner() {
|
|||
loading.style.left = "0";
|
||||
loading.style.width = "100vw";
|
||||
loading.style.height = "100vh";
|
||||
loading.style.background = "rgba(0,0,0,0.2)";
|
||||
|
||||
// ปรับให้มืดขึ้น (0.6) และเพิ่มการเบลอฉากหลัง (blur)
|
||||
loading.style.background = "rgba(0, 0, 0, 0.6)";
|
||||
loading.style.backdropFilter = "blur(4px)";
|
||||
|
||||
loading.style.display = "flex";
|
||||
loading.style.alignItems = "center";
|
||||
loading.style.justifyContent = "center";
|
||||
loading.style.zIndex = "9999";
|
||||
loading.style.zIndex = "99999";
|
||||
|
||||
loading.innerHTML = `
|
||||
<div style="display:flex;flex-direction:column;align-items:center;">
|
||||
<div style="
|
||||
|
|
@ -23,10 +28,10 @@ export function showLoadingSpinner() {
|
|||
border-radius: 50%;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
animation: spin 1s linear infinite;
|
||||
"></div>
|
||||
|
||||
animation: spin 1s linear infinite;">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg);}
|
||||
|
|
@ -44,60 +49,130 @@ function hideLoadingSpinner() {
|
|||
}
|
||||
|
||||
/**
|
||||
* ฟังก์ชันสำหรับ export โครงสร้างองค์กรเป็น PNG
|
||||
* @param node HTMLElement ที่ต้องการ export เป็น PNG
|
||||
* Prepares an HTML node for export by cloning it, applying styles to reveal its full size,
|
||||
* and calculating its dimensions.
|
||||
* @param node The HTMLElement to prepare.
|
||||
* @returns A promise that resolves with the cloned node, its container, and its dimensions.
|
||||
*/
|
||||
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,
|
||||
});
|
||||
async function prepareNodeForExport(node: HTMLElement) {
|
||||
const container = document.createElement("div");
|
||||
container.style.position = "absolute";
|
||||
container.style.left = "-9999px";
|
||||
container.style.top = "0";
|
||||
container.style.width = "fit-content";
|
||||
container.style.height = "fit-content";
|
||||
container.style.overflow = "visible";
|
||||
container.style.backgroundColor = "#fff"; // ป้องกันพื้นหลังโปร่งแสง
|
||||
|
||||
const link = document.createElement("a");
|
||||
link.download = "orgchart.png";
|
||||
link.href = imageData;
|
||||
link.click();
|
||||
} catch (error: any) {
|
||||
alert("Export ไม่สำเร็จ: " + error.message);
|
||||
} finally {
|
||||
hideLoadingSpinner();
|
||||
}
|
||||
}
|
||||
const clone = node.cloneNode(true) as HTMLElement;
|
||||
|
||||
clone.style.width = "max-content"; // ให้กางตามความกว้างของ Chart ทั้งหมด
|
||||
clone.style.height = "auto";
|
||||
clone.style.overflow = "visible";
|
||||
|
||||
container.appendChild(clone);
|
||||
document.body.appendChild(container);
|
||||
|
||||
await document.fonts.ready;
|
||||
// เพิ่มเวลาอีกนิดเพื่อให้ CSS 'auto' คำนวณเสร็จสมบูรณ์
|
||||
await new Promise((resolve) => setTimeout(resolve, 1200));
|
||||
|
||||
const fullWidth = clone.scrollWidth;
|
||||
const fullHeight = clone.scrollHeight;
|
||||
|
||||
return { clone, container: container, fullWidth, fullHeight };
|
||||
}
|
||||
|
||||
/**
|
||||
* ฟังก์ชันสำหรับ 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;
|
||||
export async function exportChartToPNG(node: HTMLElement): Promise<void> {
|
||||
if (!node) return;
|
||||
|
||||
let container: HTMLElement | null = null;
|
||||
try {
|
||||
// สร้าง PNG จาก DOM ขนาดเต็ม
|
||||
const imageData = await domtoimage.toPng(node, {
|
||||
width,
|
||||
height,
|
||||
bgcolor: "#fff",
|
||||
const {
|
||||
clone,
|
||||
container: cont,
|
||||
fullWidth,
|
||||
fullHeight,
|
||||
} = await prepareNodeForExport(node);
|
||||
container = cont;
|
||||
|
||||
const imageData = await htmlToImage.toPng(clone, {
|
||||
backgroundColor: "#ffffff",
|
||||
quality: 1,
|
||||
width: fullWidth + 100, // Add padding to prevent clipping
|
||||
height: fullHeight + 100,
|
||||
style: {
|
||||
padding: "50px",
|
||||
margin: "0",
|
||||
fontFamily: "'Sarabun', sans-serif",
|
||||
},
|
||||
cacheBust: true,
|
||||
});
|
||||
// สร้าง PDF ด้วย pdf-lib
|
||||
|
||||
const link = document.createElement("a");
|
||||
link.download = "orgchart.png";
|
||||
link.href = imageData;
|
||||
link.click();
|
||||
} catch (error: any) {
|
||||
console.error("Export Error:", error);
|
||||
alert("Export ไม่สำเร็จ: " + error.message);
|
||||
} finally {
|
||||
if (container && document.body.contains(container)) {
|
||||
document.body.removeChild(container);
|
||||
}
|
||||
hideLoadingSpinner();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* ฟังก์ชันสำหรับ export โครงสร้างองค์กรเป็น PDF
|
||||
* @param node HTMLElement ที่ต้องการ export เป็น PDF
|
||||
*/
|
||||
export async function exportChartToPDF(node: HTMLElement): Promise<void> {
|
||||
if (!node) return;
|
||||
|
||||
let container: HTMLElement | null = null;
|
||||
try {
|
||||
const {
|
||||
clone,
|
||||
container: cont,
|
||||
fullWidth,
|
||||
fullHeight,
|
||||
} = await prepareNodeForExport(node);
|
||||
container = cont;
|
||||
|
||||
// Use htmlToImage for better Thai language stability
|
||||
const imageData = await htmlToImage.toPng(clone, {
|
||||
backgroundColor: "#ffffff",
|
||||
quality: 1,
|
||||
width: fullWidth,
|
||||
height: fullHeight,
|
||||
style: {
|
||||
fontFamily: "'Sarabun', sans-serif",
|
||||
},
|
||||
cacheBust: true,
|
||||
});
|
||||
|
||||
// Create PDF with pdf-lib
|
||||
const pdfDoc = await PDFDocument.create();
|
||||
const page = pdfDoc.addPage([width, height]);
|
||||
// Add a PDF page based on the actual image size
|
||||
const page = pdfDoc.addPage([fullWidth, fullHeight]);
|
||||
const pngImage = await pdfDoc.embedPng(imageData);
|
||||
|
||||
page.drawImage(pngImage, {
|
||||
x: 0,
|
||||
y: 0,
|
||||
width,
|
||||
height,
|
||||
width: fullWidth,
|
||||
height: fullHeight,
|
||||
});
|
||||
|
||||
const pdfBytes = await pdfDoc.save();
|
||||
// ดาวน์โหลด PDF
|
||||
|
||||
// Download the file
|
||||
const blob = new Blob([pdfBytes], { type: "application/pdf" });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement("a");
|
||||
|
|
@ -106,10 +181,13 @@ export async function exportChartToPDF(node: HTMLElement): Promise<void> {
|
|||
a.click();
|
||||
URL.revokeObjectURL(url);
|
||||
} catch (err: any) {
|
||||
alert("Export ไม่สำเร็จ: " + err.message);
|
||||
|
||||
console.error(err);
|
||||
console.error("PDF Export Error:", err);
|
||||
alert("Export PDF ไม่สำเร็จ: " + err.message);
|
||||
} finally {
|
||||
// Clean up the clone and hide loading
|
||||
if (container && document.body.contains(container)) {
|
||||
document.body.removeChild(container);
|
||||
}
|
||||
hideLoadingSpinner();
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue