changes

app/utils/exportImage.js

@@ -0,0 +1,28 @@
+import dayjs from "dayjs";
+import html2canvas from "html2canvas-pro";
+
+export default async function exportImage(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;
+}

app/utils/exportPdf.js

@@ -0,0 +1,35 @@
+import dayjs from "dayjs";
+import html2pdf from "html2pdf.js";
+
+export default async function exportPdf(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;
+}

app/utils/iconSwap.js

@@ -0,0 +1,52 @@
+const ICONIFY_SELECTOR = '[class*="iconify"]';
+
+/**
+ * Replaces iconify CSS-mask spans with real <svg> (for html2pdf, html2canvas),
+ * returns a restore function to swap them back.
+ */
+export function swapIconsForExport(root) {
+  const spans = root.querySelectorAll(ICONIFY_SELECTOR);
+  const restoreList = [];
+
+  spans.forEach((span) => {
+    const svgMarkup = extractSvgFromMask(span);
+    if (!svgMarkup) return; // not a mask-based icon, skip
+
+    const computed = getComputedStyle(span);
+    const size = computed.fontSize || "1em";
+    const color = computed.color;
+
+    const wrapper = document.createElement("span");
+    wrapper.innerHTML = svgMarkup;
+    const svgEl = wrapper.firstElementChild;
+
+    svgEl.setAttribute("width", size);
+    svgEl.setAttribute("height", size);
+    svgEl.style.display = "inline-block";
+    svgEl.style.verticalAlign = "middle";
+    // force fill to currentColor's resolved value
+    svgEl.querySelectorAll("[fill]").forEach((node) => node.setAttribute("fill", color));
+
+    span.replaceWith(svgEl);
+    restoreList.push({ svgEl, originalSpan: span });
+  });
+
+  return function restoreIcons() {
+    restoreList.forEach(({ svgEl, originalSpan }) => {
+      svgEl.replaceWith(originalSpan);
+    });
+  };
+}
+
+function extractSvgFromMask(el) {
+  const maskVar = getComputedStyle(el).getPropertyValue("--svg").trim();
+  // maskVar looks like: url("data:image/svg+xml,...")
+  const match = maskVar.match(/url\((['"]?)(.*?)\1\)/);
+  if (!match) return null;
+
+  const dataUri = match[2];
+  if (!dataUri.startsWith("data:image/svg+xml,")) return null;
+
+  const encoded = dataUri.replace("data:image/svg+xml,", "");
+  return decodeURIComponent(encoded);
+}