load orgchart
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
6097caf22d
commit
fbe3b62a95
5 changed files with 237 additions and 20 deletions
50
package-lock.json
generated
50
package-lock.json
generated
|
|
@ -19,8 +19,10 @@
|
|||
"@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",
|
||||
"keycloak-js": "^20.0.2",
|
||||
"moment": "^2.29.4",
|
||||
"pdf-lib": "^1.17.1",
|
||||
"pinia": "^2.0.29",
|
||||
"quasar": "^2.11.1",
|
||||
"socket.io-client": "^4.7.4",
|
||||
|
|
@ -1143,6 +1145,24 @@
|
|||
"node": ">= 8"
|
||||
}
|
||||
},
|
||||
"node_modules/@pdf-lib/standard-fonts": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@pdf-lib/standard-fonts/-/standard-fonts-1.0.0.tgz",
|
||||
"integrity": "sha512-hU30BK9IUN/su0Mn9VdlVKsWBS6GyhVfqjwl1FjZN4TxP6cCw0jP2w7V3Hf5uX7M0AZJ16vey9yE0ny7Sa59ZA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"pako": "^1.0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/@pdf-lib/upng": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/@pdf-lib/upng/-/upng-1.0.1.tgz",
|
||||
"integrity": "sha512-dQK2FUMQtowVP00mtIksrlZhdFXQZPC+taih1q4CvPZ5vqdxR/LKBaFg0oAfzd1GlHZXXSPdQfzQnt+ViGvEIQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"pako": "^1.0.10"
|
||||
}
|
||||
},
|
||||
"node_modules/@quasar/extras": {
|
||||
"version": "1.15.8",
|
||||
"license": "MIT",
|
||||
|
|
@ -3006,6 +3026,12 @@
|
|||
"node": ">=6.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/dom-to-image-more": {
|
||||
"version": "3.6.0",
|
||||
"resolved": "https://registry.npmjs.org/dom-to-image-more/-/dom-to-image-more-3.6.0.tgz",
|
||||
"integrity": "sha512-0BB0M9gRRP7znKBNLRAvNyWnkDIzSgMSDcS7WdPDzPnWhW2YJqxUR/dCHiJ2HdCV3K2rVky5Vba8UF31mvrCuQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/domexception": {
|
||||
"version": "4.0.0",
|
||||
"dev": true,
|
||||
|
|
@ -5871,6 +5897,12 @@
|
|||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/pako": {
|
||||
"version": "1.0.11",
|
||||
"resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
|
||||
"integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==",
|
||||
"license": "(MIT AND Zlib)"
|
||||
},
|
||||
"node_modules/panzoom": {
|
||||
"version": "9.4.3",
|
||||
"resolved": "https://registry.npmjs.org/panzoom/-/panzoom-9.4.3.tgz",
|
||||
|
|
@ -5980,6 +6012,24 @@
|
|||
"through": "~2.3"
|
||||
}
|
||||
},
|
||||
"node_modules/pdf-lib": {
|
||||
"version": "1.17.1",
|
||||
"resolved": "https://registry.npmjs.org/pdf-lib/-/pdf-lib-1.17.1.tgz",
|
||||
"integrity": "sha512-V/mpyJAoTsN4cnP31vc0wfNA1+p20evqqnap0KLoRUN0Yk/p3wN52DOEsL4oBFcLdb76hlpKPtzJIgo67j/XLw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@pdf-lib/standard-fonts": "^1.0.0",
|
||||
"@pdf-lib/upng": "^1.0.1",
|
||||
"pako": "^1.0.11",
|
||||
"tslib": "^1.11.1"
|
||||
}
|
||||
},
|
||||
"node_modules/pdf-lib/node_modules/tslib": {
|
||||
"version": "1.14.1",
|
||||
"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
|
||||
"integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
|
||||
"license": "0BSD"
|
||||
},
|
||||
"node_modules/pdfjs-dist": {
|
||||
"version": "3.7.107",
|
||||
"resolved": "https://registry.npmjs.org/pdfjs-dist/-/pdfjs-dist-3.7.107.tgz",
|
||||
|
|
|
|||
|
|
@ -26,8 +26,10 @@
|
|||
"@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",
|
||||
"keycloak-js": "^20.0.2",
|
||||
"moment": "^2.29.4",
|
||||
"pdf-lib": "^1.17.1",
|
||||
"pinia": "^2.0.29",
|
||||
"quasar": "^2.11.1",
|
||||
"socket.io-client": "^4.7.4",
|
||||
|
|
|
|||
|
|
@ -10,6 +10,12 @@ import { useCounterMixin } from "@/stores/mixin";
|
|||
|
||||
import "structure-chart/structure-chart.css";
|
||||
|
||||
import {
|
||||
exportChartToPNG,
|
||||
exportChartToPDF,
|
||||
showLoadingSpinner,
|
||||
} from "@/plugins/exportChart";
|
||||
|
||||
/** use*/
|
||||
const $q = useQuasar();
|
||||
const router = useRouter();
|
||||
|
|
@ -88,30 +94,33 @@ function findPath(id: any) {
|
|||
}
|
||||
}
|
||||
|
||||
const isLoadBtn = ref(false);
|
||||
/** function ดาวน์โหลดไฟล์โครงสร้าง PNG*/
|
||||
async function savePNG() {
|
||||
try {
|
||||
showLoader();
|
||||
await scrollToCenter();
|
||||
await chartRef.value.savePNG();
|
||||
} catch {
|
||||
messageError($q);
|
||||
} finally {
|
||||
hideLoader();
|
||||
}
|
||||
showLoadingSpinner();
|
||||
isLoadBtn.value = true;
|
||||
setTimeout(async () => {
|
||||
try {
|
||||
// export แบบเต็มๆ
|
||||
scrollContainer.value && (await exportChartToPNG(scrollContainer.value));
|
||||
} finally {
|
||||
isLoadBtn.value = false;
|
||||
}
|
||||
}, 500);
|
||||
}
|
||||
|
||||
/** function ดาวน์โหลดไฟล์โครงสร้าง PDF*/
|
||||
async function savePDF() {
|
||||
try {
|
||||
showLoader();
|
||||
await scrollToCenter();
|
||||
await chartRef.value.savePDF();
|
||||
} catch {
|
||||
messageError($q);
|
||||
} finally {
|
||||
hideLoader();
|
||||
}
|
||||
showLoadingSpinner();
|
||||
isLoadBtn.value = true;
|
||||
setTimeout(async () => {
|
||||
try {
|
||||
// export แบบเต็มๆ
|
||||
scrollContainer.value && (await exportChartToPDF(scrollContainer.value));
|
||||
} finally {
|
||||
isLoadBtn.value = false;
|
||||
}
|
||||
}, 500);
|
||||
}
|
||||
|
||||
/** ฟังก์ชันเลื่อน scroll ไปที่กึ่งกลาง*/
|
||||
|
|
@ -127,6 +136,7 @@ async function scrollToCenter() {
|
|||
* @param data
|
||||
*/
|
||||
async function refreshChart(data: any, type: number) {
|
||||
if (isLoadBtn.value) return; // ถ้าโหลดอยู่ไม่ให้ทำอะไร
|
||||
if (data.value === undefined) {
|
||||
fetchStructChart(data, type.toString());
|
||||
rootOrgID.value = data;
|
||||
|
|
@ -229,8 +239,9 @@ onMounted(async () => {
|
|||
<div class="q-pa-sm row wrap items-center">
|
||||
<q-btn
|
||||
flat
|
||||
:diasble="isLoadBtn"
|
||||
round
|
||||
color="primary"
|
||||
:color="!isLoadBtn ? 'primary' : 'grey-7'"
|
||||
@click="savePNG()"
|
||||
icon="mdi-image"
|
||||
>
|
||||
|
|
@ -239,7 +250,8 @@ onMounted(async () => {
|
|||
<q-btn
|
||||
flat
|
||||
round
|
||||
color="red-7"
|
||||
:color="!isLoadBtn ? 'red-7' : 'grey-7'"
|
||||
:diasble="isLoadBtn"
|
||||
@click="savePDF()"
|
||||
icon="mdi-file-pdf-box"
|
||||
>
|
||||
|
|
@ -263,7 +275,9 @@ onMounted(async () => {
|
|||
<div class="col-12">
|
||||
<q-separator />
|
||||
</div>
|
||||
|
||||
<div
|
||||
id="structChart"
|
||||
ref="scrollContainer"
|
||||
style="
|
||||
overflow-x: auto;
|
||||
|
|
|
|||
115
src/plugins/exportChart.ts
Normal file
115
src/plugins/exportChart.ts
Normal file
|
|
@ -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();
|
||||
}
|
||||
}
|
||||
36
src/types/dom-to-image-more.d.ts
vendored
Normal file
36
src/types/dom-to-image-more.d.ts
vendored
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
declare module "dom-to-image-more" {
|
||||
export interface Options {
|
||||
filter?: (node: Node) => boolean;
|
||||
bgcolor?: string;
|
||||
width?: number;
|
||||
height?: number;
|
||||
style?: any;
|
||||
quality?: number;
|
||||
imagePlaceholder?: string;
|
||||
cacheBust?: boolean;
|
||||
}
|
||||
|
||||
export function toPng(node: HTMLElement, options?: Options): Promise<string>;
|
||||
export function toJpeg(node: HTMLElement, options?: Options): Promise<string>;
|
||||
export function toSvg(node: HTMLElement, options?: Options): Promise<string>;
|
||||
export function toPixelData(
|
||||
node: HTMLElement,
|
||||
options?: Options
|
||||
): Promise<Uint8ClampedArray>;
|
||||
export function toCanvas(
|
||||
node: HTMLElement,
|
||||
options?: Options
|
||||
): Promise<HTMLCanvasElement>;
|
||||
export function toBlob(node: HTMLElement, options?: Options): Promise<Blob>;
|
||||
|
||||
const domtoimage: {
|
||||
toPng: typeof toPng;
|
||||
toJpeg: typeof toJpeg;
|
||||
toSvg: typeof toSvg;
|
||||
toPixelData: typeof toPixelData;
|
||||
toCanvas: typeof toCanvas;
|
||||
toBlob: typeof toBlob;
|
||||
};
|
||||
|
||||
export default domtoimage;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue