cloud-web-corejs 1.0.281 → 1.1.0-dev.4

package/src/utils/pdfUtil.js

@@ -1,429 +1,429 @@
-import html2canvas from "html2canvas";
-import jspdf from "jspdf";
-import { Message } from "element-ui";
-
-//A4 纵向 210mm x 297mm，四边各留 10mm 边距，正文区 190 x 277
-const PAGE_WIDTH = 190;
-const PAGE_HEIGHT = 277;
-const PAGE_MARGIN = 10;
-
-//浏览器对 canvas 有硬限制(Chrome：单边 16384px、总面积 2^28 像素)，
-//超过之后 toDataURL 直接返回空白图——长详情页很容易撞上，这里按内容尺寸回退 scale。
-const MAX_CANVAS_SIDE = 16384;
-const MAX_CANVAS_AREA = 268435456;
-
-const JPEG_QUALITY = 0.92;
-
-const OVERFLOW_CLIP = /auto|scroll|hidden|overlay/;
-
-//遮罩挂在导出根元素的父级上，正常不会进截图范围；这条是兜底，
-//防止根元素本身就没有父级(游离节点)时遮罩落进截图里
-const LOADING_MASK = ".el-loading-mask";
-
-function nextFrame() {
-  //改完内联样式要等浏览器重排完再截图，一帧不够(vxe-table 的 resize 监听在下一帧才补高度)
-  return new Promise((resolve) => {
-    requestAnimationFrame(() => requestAnimationFrame(resolve));
-  });
-}
-
-//纵向被裁掉内容的容器：详情页的 .d-cont、vxe-table 的 body-wrapper/fixed-wrapper 都属于这一类。
-//只放开纵向：横向滚动的宽表放开也没用——截图区域按根元素的宽度取，
-//溢出到根元素外面的列照样画不进去，反而会把版面撑乱。
-function isVerticallyClipped(el, style) {
-  return (
-    OVERFLOW_CLIP.test(style.overflowY) && el.scrollHeight > el.clientHeight + 1
-  );
-}
-
-//把 dom 自身、它的祖先、以及内部所有带纵向滚动/裁剪的容器统一放开高度，
-//返回一个还原函数。原实现只处理了 .d-cont 一层，且在 html2canvas 真正克隆 DOM 之前
-//就把高度还原了(没 await)，所以放开高度这一步等于没做，导出的永远只有可视区那一屏。
-export function expandForCapture(dom) {
-  //读写严格分成两趟：先只读地挑出要放开的元素，再统一写内联样式。
-  //边读 getComputedStyle/scrollHeight 边写样式，会让浏览器每个元素强制重排一次
-  //(layout thrashing)——详情页几千个节点就是几千次整页重排，点完按钮会明显卡住。
-  const targets = [];
-
-  //祖先：#containt / .app-main 这类布局层用 100vh、calc(100vh - n) 定死了高度，
-  //不放开的话 dom 自己 height:auto 也会被父级的滚动容器裁掉。
-  let parent = dom.parentElement;
-  while (parent && parent !== document.body && parent !== document.documentElement) {
-    const style = window.getComputedStyle(parent);
-    if (isVerticallyClipped(parent, style) || style.height !== "auto") {
-      targets.push(parent);
-    }
-    parent = parent.parentElement;
-  }
-
-  targets.push(dom);
-
-  const children = dom.querySelectorAll("*");
-  for (let i = 0; i < children.length; i++) {
-    const el = children[i];
-    const style = window.getComputedStyle(el);
-    if (isVerticallyClipped(el, style)) targets.push(el);
-  }
-
-  //读：scrollTop 也是会触发重排的读操作，必须留在这一趟里
-  const records = targets.map((el) => ({
-    el: el,
-    style: el.getAttribute("style"),
-    scrollTop: el.scrollTop,
-  }));
-
-  //写
-  for (let i = 0; i < records.length; i++) {
-    const el = records[i].el;
-    el.style.height = "auto";
-    el.style.maxHeight = "none";
-    el.style.overflow = "visible";
-  }
-
-  return function restore() {
-    //倒序还原，先还原内层再还原外层，避免中间态触发多余的重排
-    for (let i = records.length - 1; i >= 0; i--) {
-      const record = records[i];
-      if (record.style === null) {
-        record.el.removeAttribute("style");
-      } else {
-        record.el.setAttribute("style", record.style);
-      }
-      record.el.scrollTop = record.scrollTop;
-    }
-  };
-}
-
-function pickScale(width, height, expected) {
-  let scale = expected || Math.min(window.devicePixelRatio || 1, 2);
-  if (!width || !height) return scale;
-  scale = Math.min(
-    scale,
-    MAX_CANVAS_SIDE / width,
-    MAX_CANVAS_SIDE / height,
-    Math.sqrt(MAX_CANVAS_AREA / (width * height))
-  );
-  return Math.max(scale, 1);
-}
-
-//Safari(WebKit) 的 getComputedStyle 会把颜色序列化成 color(srgb …) / color(display-p3 …)，
-//而 html2canvas 1.4.1 只认 rgb/rgba/hsl/hsla 四种，撞上就抛
-//"Attempting to parse an unsupported color function" 直接整个导出失败。
-//项目源码里并没有写过 color()，是浏览器自己吐出来的，改样式没用——只能在克隆体上就地换算。
-const COLOR_FUNCTION = /color\([^()]*\)/g;
-
-//html2canvas 会按颜色解析的属性(format: 'color')，外加三个值里可能夹着颜色的：
-//渐变、阴影里的 color() 一样会把解析器打挂。
-const COLOR_PROPS = [
-  "color",
-  "background-color",
-  "border-top-color",
-  "border-right-color",
-  "border-bottom-color",
-  "border-left-color",
-  "text-decoration-color",
-  "-webkit-text-stroke-color",
-  "background-image",
-  "box-shadow",
-  "text-shadow",
-];
-
-//探针色：用来判断 canvas 到底认没认这个值(不认的话 fillStyle 会保持原样)
-const PROBE_COLOR = "#010203";
-
-function isWebKit() {
-  const ua = typeof navigator === "undefined" ? "" : navigator.userAgent || "";
-  //Chrome 系的 UA 里也有 AppleWebKit 字样，但它不会这么序列化，得排掉
-  return /AppleWebKit/.test(ua) && !/Chrome|Chromium|Edg\//.test(ua);
-}
-
-function probeContext() {
-  try {
-    const canvas = document.createElement("canvas");
-    return typeof canvas.getContext === "function" ? canvas.getContext("2d") : null;
-  } catch (err) {
-    return null;
-  }
-}
-
-function toByte(raw) {
-  const num = parseFloat(raw);
-  if (isNaN(num)) return 0;
-  const ratio = raw.indexOf("%") === -1 ? num : num / 100;
-  return Math.max(0, Math.min(255, Math.round(ratio * 255)));
-}
-
-function toAlpha(raw) {
-  const num = parseFloat(raw);
-  if (isNaN(num)) return 1;
-  const alpha = raw.indexOf("%") === -1 ? num : num / 100;
-  return Math.max(0, Math.min(1, alpha));
-}
-
-//浏览器不肯换算时的兜底：按 sRGB 直接取分量。
-//display-p3 这样算是近似(色域没做映射)，但截图里看不出差别，总好过整个导出失败。
-function fallbackColor(value) {
-  const inside = value.slice(value.indexOf("(") + 1, value.lastIndexOf(")"));
-  const parts = inside.split("/");
-  //第一段是色彩空间名(srgb / display-p3 …)，分量从第二段开始
-  const numbers = parts[0].trim().split(/\s+/).slice(1);
-  const channels = [0, 1, 2].map((i) => toByte(numbers[i] || "0"));
-  const alpha = parts.length > 1 ? toAlpha(parts[1]) : 1;
-  return "rgba(" + channels.join(", ") + ", " + alpha + ")";
-}
-
-function toLegacyColor(value, ctx) {
-  return value.replace(COLOR_FUNCTION, (match) => {
-    //优先让浏览器自己换：它认识 color()，换出来的 sRGB 值是准的
-    if (ctx) {
-      ctx.fillStyle = PROBE_COLOR;
-      ctx.fillStyle = match;
-      const converted = ctx.fillStyle;
-      const usable = typeof converted === "string" && converted.indexOf("color(") === -1;
-      if (usable && converted !== PROBE_COLOR) return converted;
-    }
-    return fallbackColor(match);
-  });
-}
-
-//在 html2canvas 的克隆体上把 color() 全部换成 rgba()，写成内联样式(优先级最高)。
-//只在需要时才挂上去：这一趟要给每个节点再算一次样式，白跑一遍就是白卡一下。
-export function normalizeColorFunctions(clonedDoc, clonedElement) {
-  const view = clonedDoc.defaultView;
-  if (!view || typeof view.getComputedStyle !== "function") return;
-  const ctx = probeContext();
-  const targets = [];
-  //除了目标元素，html2canvas 还会读 html/body 的背景色(parseBackgroundColor)，一起带上
-  if (clonedDoc.documentElement) targets.push(clonedDoc.documentElement);
-  if (clonedDoc.body) targets.push(clonedDoc.body);
-  targets.push(clonedElement);
-  const children = clonedElement.querySelectorAll("*");
-  for (let i = 0; i < children.length; i++) targets.push(children[i]);
-
-  for (let i = 0; i < targets.length; i++) {
-    const el = targets[i];
-    if (!el || !el.style) continue;
-    const style = view.getComputedStyle(el);
-    for (let j = 0; j < COLOR_PROPS.length; j++) {
-      const prop = COLOR_PROPS[j];
-      const value = style.getPropertyValue(prop);
-      if (!value || value.indexOf("color(") === -1) continue;
-      el.style.setProperty(prop, toLegacyColor(value, ctx));
-    }
-  }
-}
-
-function isUnsupportedColorError(err) {
-  const message = err && err.message ? err.message : String(err || "");
-  return message.indexOf("unsupported color function") !== -1;
-}
-
-function withColorFix(options) {
-  return Object.assign({}, options, { onclone: normalizeColorFunctions });
-}
-
-async function renderCanvas(dom, options, fixColors) {
-  try {
-    return await html2canvas(dom, fixColors ? withColorFix(options) : options);
-  } catch (err) {
-    //别的引擎哪天也开始这么序列化，兜一次；已经带着换算跑过就别再重来了
-    if (fixColors || !isUnsupportedColorError(err)) throw err;
-    return html2canvas(dom, withColorFix(options));
-  }
-}
-
-function buildIgnore(selectors) {
-  let list = [LOADING_MASK];
-  if (selectors) list = list.concat(selectors);
-  const selector = list.join(",");
-  return function (el) {
-    return typeof el.matches === "function" && el.matches(selector);
-  };
-}
-
-//手写一层 element 样式的遮罩，而不是用 Loading.service，两个原因都躲不掉：
-//1. `Loading.service({ fullscreen: true })` 是全局单例，会被 request.js 里的请求收尾顺手关掉，
-//   而导出这几秒里页面上别的请求随时可能回来；
-//2. `Loading.service({ target: dom })` 会给 dom 加 el-loading-parent--relative(position:relative !important)，
-//   页面里 .slide-nav 这类绝对定位元素的包含块跟着变，位置会挪——而且是连截进 PDF 里的。
-//自己建的 DOM 节点两头都不沾，也不用担心被别处关掉。
-//挂载点取根元素的父级，不挂 body：微前端下 body 是主应用的，往上加节点算越界；
-//挂父级也让这个节点跟着页面走，页面被销毁时不会剩一层孤儿遮罩。
-//只遮导出的那块区域，不铺满视口：左侧菜单、页签这些跟导出无关的地方不该被压住。
-//做法是 fixed + 按导出元素的 getBoundingClientRect 圈定范围(取展开之前的可视位置)，
-//这样既不用给挂载点加 position:relative(会挪走 .slide-nav 这类绝对定位元素，
-//也正是不能用 Loading.service({ target }) 的原因)，也不会盖到别人头上。
-//为什么不挂根元素自己：加子节点会改变根元素下 :last-child 的匹配，
-//而那种样式差异是会被截进 PDF 的；挂在父级上则完全在截图范围之外。
-function openLoading(dom, option) {
-  if (option.loading === false) return null;
-  const host = dom.parentElement || dom;
-  //必须在 expandForCapture 之前量：展开之后元素会被撑到完整内容高度，量出来是没用的
-  const rect = dom.getBoundingClientRect();
-  const top = Math.max(rect.top, 0);
-  const left = Math.max(rect.left, 0);
-  const height = Math.min(rect.bottom, window.innerHeight) - top;
-  const width = Math.min(rect.right, window.innerWidth) - left;
-  const mask = document.createElement("div");
-  mask.className = "el-loading-mask";
-  //.el-loading-mask 自带 top/right/bottom/left:0，right/bottom 要显式清掉，
-  //否则宽高会被拉回视口边缘，又变成全屏
-  mask.style.position = "fixed";
-  mask.style.top = top + "px";
-  mask.style.left = left + "px";
-  mask.style.right = "auto";
-  mask.style.bottom = "auto";
-  mask.style.width = width + "px";
-  mask.style.height = height + "px";
-  mask.innerHTML = [
-    '<div class="el-loading-spinner">',
-    '<svg class="circular" viewBox="25 25 50 50">',
-    '<circle class="path" cx="50" cy="50" r="20" fill="none"></circle>',
-    "</svg>",
-    '<p class="el-loading-text"></p>',
-    "</div>",
-  ].join("");
-  const label = mask.querySelector(".el-loading-text");
-  label.textContent = option.loadingText || "正在生成PDF，请稍候…";
-  host.appendChild(mask);
-  return {
-    //分阶段换文案：截图那段主线程是整块占住的，转圈会定住，
-    //有个往前走的文案才看得出是在干活而不是卡死。调用方自带文案时不覆盖。
-    setText(next) {
-      if (!option.loadingText) label.textContent = next;
-    },
-    close() {
-      if (mask.parentNode) mask.parentNode.removeChild(mask);
-    },
-  };
-}
-
-//toDataURL 是同步编码，一整页 JPEG 能顶住主线程几百毫秒；
-//toBlob 是异步的，浏览器可以把编码挪到主线程之外，转圈动画就不会整段定住。
-//jsdom 和老浏览器没有 toBlob，退回同步版本。
-function encodeJpeg(canvas) {
-  return new Promise((resolve) => {
-    const sync = () => resolve(canvas.toDataURL("image/jpeg", JPEG_QUALITY));
-    if (typeof canvas.toBlob !== "function") return sync();
-    canvas.toBlob(
-      (blob) => {
-        if (!blob) return sync();
-        const reader = new FileReader();
-        reader.onload = () => resolve(reader.result);
-        reader.onerror = sync;
-        reader.readAsDataURL(blob);
-      },
-      "image/jpeg",
-      JPEG_QUALITY
-    );
-  });
-}
-
-async function canvasToPdf(canvas, fileName, loading) {
-  const pdf = new jspdf("p", "mm", "a4");
-  //按 A4 正文区的宽高比换算一页对应的像素高度
-  const pageImgHeight = Math.floor((PAGE_HEIGHT * canvas.width) / PAGE_WIDTH);
-  const total = Math.ceil(canvas.height / pageImgHeight);
-  let page$index = 0;
-  let rendered = 0;
-  while (rendered < canvas.height) {
-    page$index++;
-    if (loading) loading.setText(`正在生成第 ${page$index}/${total} 页…`);
-    //每页之前让出一帧：切图+编码是大块同步活，不让出的话文案和转圈都刷不出来
-    await nextFrame();
-    const sliceHeight = Math.min(pageImgHeight, canvas.height - rendered);
-    const page = document.createElement("canvas");
-    page.width = canvas.width;
-    page.height = sliceHeight;
-    const ctx = page.getContext("2d");
-    //JPEG 没有透明通道，不先铺白底的话，页面上透明的地方会变成黑块
-    ctx.fillStyle = "#ffffff";
-    ctx.fillRect(0, 0, page.width, page.height);
-    //用 drawImage 而不是 getImageData/putImageData：后者逐像素拷贝，长页面上很慢
-    ctx.drawImage(
-      canvas,
-      0,
-      rendered,
-      canvas.width,
-      sliceHeight,
-      0,
-      0,
-      canvas.width,
-      sliceHeight
-    );
-    const dataUrl = await encodeJpeg(page);
-    pdf.addImage(
-      dataUrl,
-      "JPEG",
-      PAGE_MARGIN,
-      PAGE_MARGIN,
-      PAGE_WIDTH,
-      Math.min(PAGE_HEIGHT, (PAGE_WIDTH * sliceHeight) / page.width)
-    );
-    rendered += sliceHeight;
-    if (rendered < canvas.height) pdf.addPage();
-  }
-  pdf.save(`${fileName}.pdf`);
-}
-
-/**
- * 把 dom 整体(含被滚动容器裁掉的部分)截图并按 A4 分页导出 PDF
- * @param {Object} option
- * @param {HTMLElement} option.dom 要导出的根元素
- * @param {String} option.fileName 文件名(不带扩展名)
- * @param {Number} [option.scale] 截图倍率，默认取 devicePixelRatio(上限 2)，会按 canvas 上限自动回退
- * @param {String|String[]} [option.ignoreSelectors] 不参与截图的元素选择器，如操作按钮区
- * @param {Boolean} [option.loading] 是否在导出期间盖加载遮罩，默认 true
- * @param {String} [option.loadingText] 遮罩文案
- * @returns {Promise<Boolean>} 是否导出成功。内部已经提示过失败，调用方可以直接不管返回值
- */
-export async function exportPDF(option) {
-  const dom = option && option.dom;
-  if (!dom) return false;
-  const fileName = option.fileName || "export";
-  const loading = openLoading(dom, option);
-  //展开放进 try 里：万一它自己抛了，遮罩也得摘掉，不能把页面永远糊住
-  let restore = null;
-  try {
-    //先让浏览器把遮罩画出来，再做展开和截图——这两步都是同步卡主线程的，
-    //不先出让一帧的话遮罩要等截图结束才显示，等于没有。
-    await nextFrame();
-    restore = expandForCapture(dom);
-    if (loading) loading.setText("正在展开页面内容…");
-    await nextFrame();
-    const fullWidth = Math.max(dom.scrollWidth, dom.offsetWidth);
-    const fullHeight = Math.max(dom.scrollHeight, dom.offsetHeight);
-    const scale = pickScale(fullWidth, fullHeight, option.scale);
-    //html2canvas 这一段是整块同步活：它对每个节点都要 getComputedStyle 三次(自身/:before/:after)
-    //克隆一遍，再整棵树画进 canvas，中途没有让出主线程的机会，页面必然定住几秒。
-    //只能靠文案说明进度，真要更快就得降 scale 或少截点内容。
-    if (loading) loading.setText("正在渲染页面，请稍候…");
-    await nextFrame();
-    const options = {
-      backgroundColor: "#ffffff",
-      useCORS: true,
-      logging: false,
-      scale: scale,
-      //克隆出来的 iframe 默认只有一屏高，页面里的 100vh / height:100% 会在克隆里重新把内容压回一屏，
-      //所以要把它撑到完整内容高度；scrollX/scrollY 归零避免按当前滚动位置偏移取景。
-      scrollX: 0,
-      scrollY: 0,
-      windowWidth: Math.max(document.documentElement.clientWidth, fullWidth),
-      windowHeight: fullHeight + 200,
-      ignoreElements: buildIgnore(option.ignoreSelectors),
-    };
-    //WebKit 上直接带着颜色换算跑：先失败一次再重来，等于把那几秒的冻结再来一遍
-    const canvas = await renderCanvas(dom, options, isWebKit());
-    await canvasToPdf(canvas, fileName, loading);
-    return true;
-  } catch (err) {
-    //不往外抛：调用方多是 @click 直接调用，抛出去只会变成一条 unhandledrejection
-    console.error("[exportPDF] 导出失败", err);
-    Message.error("导出PDF失败");
-    return false;
-  } finally {
-    //必须等 html2canvas 真正 resolve 之后再还原：它的 DOM 克隆是异步做的
-    if (restore) restore();
-    if (loading) loading.close();
-  }
-}
+import html2canvas from "html2canvas";
+import jspdf from "jspdf";
+import { Message } from "element-ui";
+
+//A4 纵向 210mm x 297mm，四边各留 10mm 边距，正文区 190 x 277
+const PAGE_WIDTH = 190;
+const PAGE_HEIGHT = 277;
+const PAGE_MARGIN = 10;
+
+//浏览器对 canvas 有硬限制(Chrome：单边 16384px、总面积 2^28 像素)，
+//超过之后 toDataURL 直接返回空白图——长详情页很容易撞上，这里按内容尺寸回退 scale。
+const MAX_CANVAS_SIDE = 16384;
+const MAX_CANVAS_AREA = 268435456;
+
+const JPEG_QUALITY = 0.92;
+
+const OVERFLOW_CLIP = /auto|scroll|hidden|overlay/;
+
+//遮罩挂在导出根元素的父级上，正常不会进截图范围；这条是兜底，
+//防止根元素本身就没有父级(游离节点)时遮罩落进截图里
+const LOADING_MASK = ".el-loading-mask";
+
+function nextFrame() {
+  //改完内联样式要等浏览器重排完再截图，一帧不够(vxe-table 的 resize 监听在下一帧才补高度)
+  return new Promise((resolve) => {
+    requestAnimationFrame(() => requestAnimationFrame(resolve));
+  });
+}
+
+//纵向被裁掉内容的容器：详情页的 .d-cont、vxe-table 的 body-wrapper/fixed-wrapper 都属于这一类。
+//只放开纵向：横向滚动的宽表放开也没用——截图区域按根元素的宽度取，
+//溢出到根元素外面的列照样画不进去，反而会把版面撑乱。
+function isVerticallyClipped(el, style) {
+  return (
+    OVERFLOW_CLIP.test(style.overflowY) && el.scrollHeight > el.clientHeight + 1
+  );
+}
+
+//把 dom 自身、它的祖先、以及内部所有带纵向滚动/裁剪的容器统一放开高度，
+//返回一个还原函数。原实现只处理了 .d-cont 一层，且在 html2canvas 真正克隆 DOM 之前
+//就把高度还原了(没 await)，所以放开高度这一步等于没做，导出的永远只有可视区那一屏。
+export function expandForCapture(dom) {
+  //读写严格分成两趟：先只读地挑出要放开的元素，再统一写内联样式。
+  //边读 getComputedStyle/scrollHeight 边写样式，会让浏览器每个元素强制重排一次
+  //(layout thrashing)——详情页几千个节点就是几千次整页重排，点完按钮会明显卡住。
+  const targets = [];
+
+  //祖先：#containt / .app-main 这类布局层用 100vh、calc(100vh - n) 定死了高度，
+  //不放开的话 dom 自己 height:auto 也会被父级的滚动容器裁掉。
+  let parent = dom.parentElement;
+  while (parent && parent !== document.body && parent !== document.documentElement) {
+    const style = window.getComputedStyle(parent);
+    if (isVerticallyClipped(parent, style) || style.height !== "auto") {
+      targets.push(parent);
+    }
+    parent = parent.parentElement;
+  }
+
+  targets.push(dom);
+
+  const children = dom.querySelectorAll("*");
+  for (let i = 0; i < children.length; i++) {
+    const el = children[i];
+    const style = window.getComputedStyle(el);
+    if (isVerticallyClipped(el, style)) targets.push(el);
+  }
+
+  //读：scrollTop 也是会触发重排的读操作，必须留在这一趟里
+  const records = targets.map((el) => ({
+    el: el,
+    style: el.getAttribute("style"),
+    scrollTop: el.scrollTop,
+  }));
+
+  //写
+  for (let i = 0; i < records.length; i++) {
+    const el = records[i].el;
+    el.style.height = "auto";
+    el.style.maxHeight = "none";
+    el.style.overflow = "visible";
+  }
+
+  return function restore() {
+    //倒序还原，先还原内层再还原外层，避免中间态触发多余的重排
+    for (let i = records.length - 1; i >= 0; i--) {
+      const record = records[i];
+      if (record.style === null) {
+        record.el.removeAttribute("style");
+      } else {
+        record.el.setAttribute("style", record.style);
+      }
+      record.el.scrollTop = record.scrollTop;
+    }
+  };
+}
+
+function pickScale(width, height, expected) {
+  let scale = expected || Math.min(window.devicePixelRatio || 1, 2);
+  if (!width || !height) return scale;
+  scale = Math.min(
+    scale,
+    MAX_CANVAS_SIDE / width,
+    MAX_CANVAS_SIDE / height,
+    Math.sqrt(MAX_CANVAS_AREA / (width * height))
+  );
+  return Math.max(scale, 1);
+}
+
+//Safari(WebKit) 的 getComputedStyle 会把颜色序列化成 color(srgb …) / color(display-p3 …)，
+//而 html2canvas 1.4.1 只认 rgb/rgba/hsl/hsla 四种，撞上就抛
+//"Attempting to parse an unsupported color function" 直接整个导出失败。
+//项目源码里并没有写过 color()，是浏览器自己吐出来的，改样式没用——只能在克隆体上就地换算。
+const COLOR_FUNCTION = /color\([^()]*\)/g;
+
+//html2canvas 会按颜色解析的属性(format: 'color')，外加三个值里可能夹着颜色的：
+//渐变、阴影里的 color() 一样会把解析器打挂。
+const COLOR_PROPS = [
+  "color",
+  "background-color",
+  "border-top-color",
+  "border-right-color",
+  "border-bottom-color",
+  "border-left-color",
+  "text-decoration-color",
+  "-webkit-text-stroke-color",
+  "background-image",
+  "box-shadow",
+  "text-shadow",
+];
+
+//探针色：用来判断 canvas 到底认没认这个值(不认的话 fillStyle 会保持原样)
+const PROBE_COLOR = "#010203";
+
+function isWebKit() {
+  const ua = typeof navigator === "undefined" ? "" : navigator.userAgent || "";
+  //Chrome 系的 UA 里也有 AppleWebKit 字样，但它不会这么序列化，得排掉
+  return /AppleWebKit/.test(ua) && !/Chrome|Chromium|Edg\//.test(ua);
+}
+
+function probeContext() {
+  try {
+    const canvas = document.createElement("canvas");
+    return typeof canvas.getContext === "function" ? canvas.getContext("2d") : null;
+  } catch (err) {
+    return null;
+  }
+}
+
+function toByte(raw) {
+  const num = parseFloat(raw);
+  if (isNaN(num)) return 0;
+  const ratio = raw.indexOf("%") === -1 ? num : num / 100;
+  return Math.max(0, Math.min(255, Math.round(ratio * 255)));
+}
+
+function toAlpha(raw) {
+  const num = parseFloat(raw);
+  if (isNaN(num)) return 1;
+  const alpha = raw.indexOf("%") === -1 ? num : num / 100;
+  return Math.max(0, Math.min(1, alpha));
+}
+
+//浏览器不肯换算时的兜底：按 sRGB 直接取分量。
+//display-p3 这样算是近似(色域没做映射)，但截图里看不出差别，总好过整个导出失败。
+function fallbackColor(value) {
+  const inside = value.slice(value.indexOf("(") + 1, value.lastIndexOf(")"));
+  const parts = inside.split("/");
+  //第一段是色彩空间名(srgb / display-p3 …)，分量从第二段开始
+  const numbers = parts[0].trim().split(/\s+/).slice(1);
+  const channels = [0, 1, 2].map((i) => toByte(numbers[i] || "0"));
+  const alpha = parts.length > 1 ? toAlpha(parts[1]) : 1;
+  return "rgba(" + channels.join(", ") + ", " + alpha + ")";
+}
+
+function toLegacyColor(value, ctx) {
+  return value.replace(COLOR_FUNCTION, (match) => {
+    //优先让浏览器自己换：它认识 color()，换出来的 sRGB 值是准的
+    if (ctx) {
+      ctx.fillStyle = PROBE_COLOR;
+      ctx.fillStyle = match;
+      const converted = ctx.fillStyle;
+      const usable = typeof converted === "string" && converted.indexOf("color(") === -1;
+      if (usable && converted !== PROBE_COLOR) return converted;
+    }
+    return fallbackColor(match);
+  });
+}
+
+//在 html2canvas 的克隆体上把 color() 全部换成 rgba()，写成内联样式(优先级最高)。
+//只在需要时才挂上去：这一趟要给每个节点再算一次样式，白跑一遍就是白卡一下。
+export function normalizeColorFunctions(clonedDoc, clonedElement) {
+  const view = clonedDoc.defaultView;
+  if (!view || typeof view.getComputedStyle !== "function") return;
+  const ctx = probeContext();
+  const targets = [];
+  //除了目标元素，html2canvas 还会读 html/body 的背景色(parseBackgroundColor)，一起带上
+  if (clonedDoc.documentElement) targets.push(clonedDoc.documentElement);
+  if (clonedDoc.body) targets.push(clonedDoc.body);
+  targets.push(clonedElement);
+  const children = clonedElement.querySelectorAll("*");
+  for (let i = 0; i < children.length; i++) targets.push(children[i]);
+
+  for (let i = 0; i < targets.length; i++) {
+    const el = targets[i];
+    if (!el || !el.style) continue;
+    const style = view.getComputedStyle(el);
+    for (let j = 0; j < COLOR_PROPS.length; j++) {
+      const prop = COLOR_PROPS[j];
+      const value = style.getPropertyValue(prop);
+      if (!value || value.indexOf("color(") === -1) continue;
+      el.style.setProperty(prop, toLegacyColor(value, ctx));
+    }
+  }
+}
+
+function isUnsupportedColorError(err) {
+  const message = err && err.message ? err.message : String(err || "");
+  return message.indexOf("unsupported color function") !== -1;
+}
+
+function withColorFix(options) {
+  return Object.assign({}, options, { onclone: normalizeColorFunctions });
+}
+
+async function renderCanvas(dom, options, fixColors) {
+  try {
+    return await html2canvas(dom, fixColors ? withColorFix(options) : options);
+  } catch (err) {
+    //别的引擎哪天也开始这么序列化，兜一次；已经带着换算跑过就别再重来了
+    if (fixColors || !isUnsupportedColorError(err)) throw err;
+    return html2canvas(dom, withColorFix(options));
+  }
+}
+
+function buildIgnore(selectors) {
+  let list = [LOADING_MASK];
+  if (selectors) list = list.concat(selectors);
+  const selector = list.join(",");
+  return function (el) {
+    return typeof el.matches === "function" && el.matches(selector);
+  };
+}
+
+//手写一层 element 样式的遮罩，而不是用 Loading.service，两个原因都躲不掉：
+//1. `Loading.service({ fullscreen: true })` 是全局单例，会被 request.js 里的请求收尾顺手关掉，
+//   而导出这几秒里页面上别的请求随时可能回来；
+//2. `Loading.service({ target: dom })` 会给 dom 加 el-loading-parent--relative(position:relative !important)，
+//   页面里 .slide-nav 这类绝对定位元素的包含块跟着变，位置会挪——而且是连截进 PDF 里的。
+//自己建的 DOM 节点两头都不沾，也不用担心被别处关掉。
+//挂载点取根元素的父级，不挂 body：微前端下 body 是主应用的，往上加节点算越界；
+//挂父级也让这个节点跟着页面走，页面被销毁时不会剩一层孤儿遮罩。
+//只遮导出的那块区域，不铺满视口：左侧菜单、页签这些跟导出无关的地方不该被压住。
+//做法是 fixed + 按导出元素的 getBoundingClientRect 圈定范围(取展开之前的可视位置)，
+//这样既不用给挂载点加 position:relative(会挪走 .slide-nav 这类绝对定位元素，
+//也正是不能用 Loading.service({ target }) 的原因)，也不会盖到别人头上。
+//为什么不挂根元素自己：加子节点会改变根元素下 :last-child 的匹配，
+//而那种样式差异是会被截进 PDF 的；挂在父级上则完全在截图范围之外。
+function openLoading(dom, option) {
+  if (option.loading === false) return null;
+  const host = dom.parentElement || dom;
+  //必须在 expandForCapture 之前量：展开之后元素会被撑到完整内容高度，量出来是没用的
+  const rect = dom.getBoundingClientRect();
+  const top = Math.max(rect.top, 0);
+  const left = Math.max(rect.left, 0);
+  const height = Math.min(rect.bottom, window.innerHeight) - top;
+  const width = Math.min(rect.right, window.innerWidth) - left;
+  const mask = document.createElement("div");
+  mask.className = "el-loading-mask";
+  //.el-loading-mask 自带 top/right/bottom/left:0，right/bottom 要显式清掉，
+  //否则宽高会被拉回视口边缘，又变成全屏
+  mask.style.position = "fixed";
+  mask.style.top = top + "px";
+  mask.style.left = left + "px";
+  mask.style.right = "auto";
+  mask.style.bottom = "auto";
+  mask.style.width = width + "px";
+  mask.style.height = height + "px";
+  mask.innerHTML = [
+    '<div class="el-loading-spinner">',
+    '<svg class="circular" viewBox="25 25 50 50">',
+    '<circle class="path" cx="50" cy="50" r="20" fill="none"></circle>',
+    "</svg>",
+    '<p class="el-loading-text"></p>',
+    "</div>",
+  ].join("");
+  const label = mask.querySelector(".el-loading-text");
+  label.textContent = option.loadingText || "正在生成PDF，请稍候…";
+  host.appendChild(mask);
+  return {
+    //分阶段换文案：截图那段主线程是整块占住的，转圈会定住，
+    //有个往前走的文案才看得出是在干活而不是卡死。调用方自带文案时不覆盖。
+    setText(next) {
+      if (!option.loadingText) label.textContent = next;
+    },
+    close() {
+      if (mask.parentNode) mask.parentNode.removeChild(mask);
+    },
+  };
+}
+
+//toDataURL 是同步编码，一整页 JPEG 能顶住主线程几百毫秒；
+//toBlob 是异步的，浏览器可以把编码挪到主线程之外，转圈动画就不会整段定住。
+//jsdom 和老浏览器没有 toBlob，退回同步版本。
+function encodeJpeg(canvas) {
+  return new Promise((resolve) => {
+    const sync = () => resolve(canvas.toDataURL("image/jpeg", JPEG_QUALITY));
+    if (typeof canvas.toBlob !== "function") return sync();
+    canvas.toBlob(
+      (blob) => {
+        if (!blob) return sync();
+        const reader = new FileReader();
+        reader.onload = () => resolve(reader.result);
+        reader.onerror = sync;
+        reader.readAsDataURL(blob);
+      },
+      "image/jpeg",
+      JPEG_QUALITY
+    );
+  });
+}
+
+async function canvasToPdf(canvas, fileName, loading) {
+  const pdf = new jspdf("p", "mm", "a4");
+  //按 A4 正文区的宽高比换算一页对应的像素高度
+  const pageImgHeight = Math.floor((PAGE_HEIGHT * canvas.width) / PAGE_WIDTH);
+  const total = Math.ceil(canvas.height / pageImgHeight);
+  let page$index = 0;
+  let rendered = 0;
+  while (rendered < canvas.height) {
+    page$index++;
+    if (loading) loading.setText(`正在生成第 ${page$index}/${total} 页…`);
+    //每页之前让出一帧：切图+编码是大块同步活，不让出的话文案和转圈都刷不出来
+    await nextFrame();
+    const sliceHeight = Math.min(pageImgHeight, canvas.height - rendered);
+    const page = document.createElement("canvas");
+    page.width = canvas.width;
+    page.height = sliceHeight;
+    const ctx = page.getContext("2d");
+    //JPEG 没有透明通道，不先铺白底的话，页面上透明的地方会变成黑块
+    ctx.fillStyle = "#ffffff";
+    ctx.fillRect(0, 0, page.width, page.height);
+    //用 drawImage 而不是 getImageData/putImageData：后者逐像素拷贝，长页面上很慢
+    ctx.drawImage(
+      canvas,
+      0,
+      rendered,
+      canvas.width,
+      sliceHeight,
+      0,
+      0,
+      canvas.width,
+      sliceHeight
+    );
+    const dataUrl = await encodeJpeg(page);
+    pdf.addImage(
+      dataUrl,
+      "JPEG",
+      PAGE_MARGIN,
+      PAGE_MARGIN,
+      PAGE_WIDTH,
+      Math.min(PAGE_HEIGHT, (PAGE_WIDTH * sliceHeight) / page.width)
+    );
+    rendered += sliceHeight;
+    if (rendered < canvas.height) pdf.addPage();
+  }
+  pdf.save(`${fileName}.pdf`);
+}
+
+/**
+ * 把 dom 整体(含被滚动容器裁掉的部分)截图并按 A4 分页导出 PDF
+ * @param {Object} option
+ * @param {HTMLElement} option.dom 要导出的根元素
+ * @param {String} option.fileName 文件名(不带扩展名)
+ * @param {Number} [option.scale] 截图倍率，默认取 devicePixelRatio(上限 2)，会按 canvas 上限自动回退
+ * @param {String|String[]} [option.ignoreSelectors] 不参与截图的元素选择器，如操作按钮区
+ * @param {Boolean} [option.loading] 是否在导出期间盖加载遮罩，默认 true
+ * @param {String} [option.loadingText] 遮罩文案
+ * @returns {Promise<Boolean>} 是否导出成功。内部已经提示过失败，调用方可以直接不管返回值
+ */
+export async function exportPDF(option) {
+  const dom = option && option.dom;
+  if (!dom) return false;
+  const fileName = option.fileName || "export";
+  const loading = openLoading(dom, option);
+  //展开放进 try 里：万一它自己抛了，遮罩也得摘掉，不能把页面永远糊住
+  let restore = null;
+  try {
+    //先让浏览器把遮罩画出来，再做展开和截图——这两步都是同步卡主线程的，
+    //不先出让一帧的话遮罩要等截图结束才显示，等于没有。
+    await nextFrame();
+    restore = expandForCapture(dom);
+    if (loading) loading.setText("正在展开页面内容…");
+    await nextFrame();
+    const fullWidth = Math.max(dom.scrollWidth, dom.offsetWidth);
+    const fullHeight = Math.max(dom.scrollHeight, dom.offsetHeight);
+    const scale = pickScale(fullWidth, fullHeight, option.scale);
+    //html2canvas 这一段是整块同步活：它对每个节点都要 getComputedStyle 三次(自身/:before/:after)
+    //克隆一遍，再整棵树画进 canvas，中途没有让出主线程的机会，页面必然定住几秒。
+    //只能靠文案说明进度，真要更快就得降 scale 或少截点内容。
+    if (loading) loading.setText("正在渲染页面，请稍候…");
+    await nextFrame();
+    const options = {
+      backgroundColor: "#ffffff",
+      useCORS: true,
+      logging: false,
+      scale: scale,
+      //克隆出来的 iframe 默认只有一屏高，页面里的 100vh / height:100% 会在克隆里重新把内容压回一屏，
+      //所以要把它撑到完整内容高度；scrollX/scrollY 归零避免按当前滚动位置偏移取景。
+      scrollX: 0,
+      scrollY: 0,
+      windowWidth: Math.max(document.documentElement.clientWidth, fullWidth),
+      windowHeight: fullHeight + 200,
+      ignoreElements: buildIgnore(option.ignoreSelectors),
+    };
+    //WebKit 上直接带着颜色换算跑：先失败一次再重来，等于把那几秒的冻结再来一遍
+    const canvas = await renderCanvas(dom, options, isWebKit());
+    await canvasToPdf(canvas, fileName, loading);
+    return true;
+  } catch (err) {
+    //不往外抛：调用方多是 @click 直接调用，抛出去只会变成一条 unhandledrejection
+    console.error("[exportPDF] 导出失败", err);
+    Message.error("导出PDF失败");
+    return false;
+  } finally {
+    //必须等 html2canvas 真正 resolve 之后再还原：它的 DOM 克隆是异步做的
+    if (restore) restore();
+    if (loading) loading.close();
+  }
+}