changes

app/plugins/01-common.js

@@ -8,6 +8,9 @@ import isSameOrBefore from "dayjs/plugin/isSameOrBefore";
 import isSameOrAfter from "dayjs/plugin/isSameOrAfter";
 import "dayjs/locale/vi";
 import { deburr } from "es-toolkit";
+import html2pdf from "html2pdf.js";
+import html2canvas from "html2canvas-pro";
+
 dayjs.extend(weekday);
 dayjs.extend(weekOfYear);
 dayjs.extend(relativeTime);
@@ -19,7 +22,7 @@ dayjs.locale("vi");
 export default defineNuxtPlugin((nuxtApp) => {
   const route = useRoute();
   const store = useStore();
-  const { $id, $empty } = nuxtApp;
+  const { $id, $copy, $empty } = nuxtApp;
 
   const dialog = function (content, title, type, duration, width, height, vbind) {
     content = typeof content === "string" ? content : JSON.stringify(content);
@@ -98,7 +101,7 @@ export default defineNuxtPlugin((nuxtApp) => {
   };
 
   const dummy = function (data, count) {
-    let list = this.$copy(data);
+    let list = $copy(data);
     for (let index = 0; index < count; index++) {
       if (data.length < index + 1) list.push({ dummy: true });
     }
@@ -167,7 +170,7 @@ export default defineNuxtPlugin((nuxtApp) => {
   };
 
   const change = function (obj1, obj2, list) {
-    var change = false;
+    let change = false;
     if (list) {
       list.map((v) => {
         if (obj1[v] !== obj2[v]) change = true;
@@ -233,6 +236,65 @@ export default defineNuxtPlugin((nuxtApp) => {
     return id;
   };
 
+  const exportPdf = async (docid, { filename = "file", format = "a4", orientation = "portrait" } = {}) => {
+    const target = document.getElementById(docid);
+
+    const ignored = target.querySelectorAll(".ignore");
+    ignored.forEach((el) => el.style.setProperty("display", "none", "important"));
+    // Xóa cache ảnh để lần export sau không bị lỗi
+    target.querySelectorAll("img").forEach((img) => (img.src = `${img.src}`));
+    const restoreIcons = swapIconsForExport(target);
+
+    const opt = {
+      margin: 3,
+      filename: `${filename}-${dayjs().format("YYYYMMDDHHmmss")}.pdf`,
+      jsPDF: { format, orientation, unit: "mm" },
+      html2canvas: { scale: 3, useCORS: true },
+      image: { type: "jpeg", quality: 1 },
+      pagebreak: {
+        mode: ["avoid-all", "css", "legacy"],
+        before: ".page-break-before",
+        after: ".page-break-after",
+        avoid: ".avoid-page-break",
+      },
+    };
+
+    try {
+      await new Promise((r) => requestAnimationFrame(r));
+      await html2pdf().set(opt).from(target).save();
+    } finally {
+      restoreIcons();
+      ignored.forEach((el) => el.style.removeProperty("display"));
+    }
+    return opt.filename;
+  };
+
+  const exportImage = async (docid, filename = "file") => {
+    const target = document.getElementById(docid);
+
+    const ignored = target.querySelectorAll(".ignore");
+    ignored.forEach((el) => el.style.setProperty("display", "none", "important"));
+    // Xóa cache ảnh để lần export sau không bị lỗi
+    target.querySelectorAll("img").forEach((img) => (img.src = `${img.src}`));
+    const restoreIcons = swapIconsForExport(target);
+
+    try {
+      await new Promise((r) => requestAnimationFrame(r));
+
+      const canvas = await html2canvas(target);
+      const link = document.createElement("a");
+      link.href = canvas.toDataURL("image/png");
+      link.download = `${filename}-${dayjs().format("YYYYMMDDHHmmss")}.png`;
+      link.click();
+      link.remove();
+    } finally {
+      restoreIcons();
+      ignored.forEach((el) => el.style.removeProperty("display"));
+    }
+
+    return filename;
+  };
+
   const download = async function (url, fileName) {
     const name = dayjs(new Date()).format("YYYYMMDDhhmmss") + "-" + fileName;
     const response = await fetch(url);
@@ -480,6 +542,27 @@ export default defineNuxtPlugin((nuxtApp) => {
     return new Intl.NumberFormat("en", { notation: "compact" }).format(Number(amount));
   }
 
+  function qr(amount, qrVars = {}) {
+    const defaultQRVars = {
+      bankId: "BIDV",
+      accountNo: "1222198820",
+      accountName: "Nguyen Viet An",
+      template: "Rxp4lcv",
+      description: "Thanh toan ERP",
+    };
+
+    const finalVars = {
+      ...defaultQRVars,
+      ...qrVars,
+    };
+
+    const { bankId, accountNo, template, description, accountName } = finalVars;
+
+    const qrSrc = `https://img.vietqr.io/image/${bankId}-${accountNo}-${template}.png?amount=${amount}&addInfo=${description}&accountName=${accountName}`;
+
+    return qrSrc;
+  }
+
   return {
     provide: {
       dialog,
@@ -495,6 +578,8 @@ export default defineNuxtPlugin((nuxtApp) => {
       copyToClipboard,
       nonAccent,
       linkID,
+      exportPdf,
+      exportImage,
       vnmoney,
       createMeta,
       dayjs,
@@ -504,6 +589,7 @@ export default defineNuxtPlugin((nuxtApp) => {
       numberToVietnamese,
       formatDateVN,
       shortenCurrency,
+      qr,
     },
   };
 });