cloud-web-corejs 1.0.54-dev.81 → 1.0.54-dev.810

package/src/utils/pdfUtil.js

@@ -0,0 +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();
+  }
+}

package/src/utils/repeatOpen.js

@@ -0,0 +1,48 @@
+/**
+ * 同一菜单是否允许重复打开为独立标签页。
+ * 仅当该菜单维护了「是否可重复打开」（meta.repeatOpen 为真）时才可重复打开。
+ * affix 固定标签与 outLink（iframe 按 path 挂载）始终不参与重复打开。
+ */
+export function isRepeatable(view) {
+  if (!view) return false;
+  const meta = view.meta || {};
+  if (meta.affix) return false;
+  if (view.name === "outLink") return false;
+  return !!meta.repeatOpen;
+}
+
+/**
+ * 标签页/缓存体系统一使用的唯一键。
+ * 可重复的视图按 fullPath 区分（每次打开附带唯一 query 使其唯一），
+ * 其余保持按 path，等价于原有行为。
+ */
+export function viewKey(view) {
+  if (!view) return "";
+  if (isRepeatable(view)) return view.fullPath || view.path;
+  return view.path;
+}
+
+/**
+ * 给路由目标附加一个唯一标识，使其 fullPath 唯一，从而以独立标签打开。
+ * @param {string|Object} location 路径字符串或 vue-router location 对象
+ * @returns {Object} 归一化后的 location（带唯一 _rk）
+ */
+export function withRepeatKey(location) {
+  const loc =
+    typeof location === "string" ? { path: location } : { ...location };
+  loc.query = { ...(loc.query || {}), _rk: Date.now() };
+  return loc;
+}
+
+/**
+ * 通用打开菜单/路由方法：菜单维护了可重复时以独立标签重复打开，否则按原逻辑跳转。
+ * 任意位置均可调用，替代直接 this.$router.push。
+ * @param {VueRouter} router this.$router
+ * @param {string|Object} location 路径字符串或 vue-router location 对象
+ * @param {Object} [route] 用于判定是否可重复（含 meta.repeatOpen/name）；缺省时按不可重复处理
+ */
+export function openView(router, location, route) {
+  // 仅当传入 route 且其维护了 meta.repeatOpen 时才以独立标签重复打开
+  const repeatable = isRepeatable(route);
+  return router.push(repeatable ? withRepeatKey(location) : location);
+}